Basic preview & print settings

src/pages/PrintSettings.vue

@@ -1,11 +1,18 @@
 <template>
-  <q-page padding>
-    <!-- content -->
-    PRINT SETTINGS
+  <q-page padding class="main-grid">
+    <q-toolbar class="print-settings">
       <q-btn @click="openPrintPage">Open Print Page</q-btn>
-    <pre>
-      {{items}}
-    </pre>
+      <q-input type="number" v-model="itemsW" min="1"></q-input>
+      <q-input type="number" v-model="itemsH" min="1"></q-input>
+      <q-slider v-model="pageMargin" :min="1" label></q-slider>
+      <q-slider v-model="pageGap" :min="1" label></q-slider>
+    </q-toolbar>
+    <div class="print-preview">
+      <div class="grid-container" :style="{gridTemplateColumns: `repeat(${itemsW}, 1fr)`, gridTemplateRows: `repeat(${itemsH}, 1fr)`, gap: `${pageGap/10}% ${pageGap*1.414/10}%`, padding: `${pageMargin/10}%`}">
+        <div v-for="i in (itemsW*itemsH)" :key="i" class="grid-item">
+        </div>
+      </div>
+    </div>
   </q-page>
 </template>
 
@@ -17,7 +24,11 @@ export default {
   data () {
     return {
       items: null,
-      qrCodes: []
+      qrCodes: [],
+      itemsW: 3,
+      itemsH: 4,
+      pageMargin: 10,
+      pageGap: 10
     }
   },
   computed: {
@@ -101,3 +112,35 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.main-grid {
+  display: grid;
+  gap: 10px;
+  height: 100%;
+  max-height: 100vh;
+}
+.print-preview {
+  height: 50vh;
+  aspect-ratio: 1/1.414;
+  position: relative;
+}
+.grid-container {
+  display: grid;
+  gap: 10px;
+  height: 100%;
+  width:100%;
+  page-break-after: always;
+  border: 1px solid gray;
+}
+.grid-item {
+  border: 1px solid gray;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  box-sizing: border-box;
+}
+</style>