2
0
mirror of https://github.com/frappe/books.git synced 2024-11-10 07:40:55 +00:00

feat: update display to use set size

This commit is contained in:
18alantom 2023-06-02 18:59:03 +05:30
parent 5ec0270540
commit 9011ae04fa
5 changed files with 29 additions and 9 deletions

View File

@ -38,6 +38,8 @@
:template="printProps.template"
:values="printProps.values"
:scale="scale"
:width="templateDoc?.width"
:height="templateDoc?.height"
/>
</div>
</div>

View File

@ -1,6 +1,8 @@
<template>
<ScaledContainer
:scale="Math.max(scale, 0.1)"
:width="width"
:height="height"
ref="scaledContainer"
class="mx-auto shadow-lg border"
>
@ -52,7 +54,6 @@ import { getPathAndMakePDF } from 'src/utils/printTemplates';
import { PrintValues } from 'src/utils/types';
import { defineComponent, PropType } from 'vue';
import ScaledContainer from './ScaledContainer.vue';
import { VueElement } from 'vue';
export const baseSafeTemplate = `<main class="h-full w-full bg-white">
<p class="p-4 text-red-500">
@ -70,6 +71,8 @@ export default defineComponent({
props: {
template: { type: String, required: true },
scale: { type: Number, default: 0.65 },
width: { type: Number, default: 21 },
height: { type: Number, default: 29.7 },
values: {
type: Object as PropType<PrintValues>,
required: true,

View File

@ -18,20 +18,20 @@ import { defineComponent } from 'vue';
export default defineComponent({
props: {
height: { type: String, default: '29.7cm' },
width: { type: String, default: '21cm' },
height: { type: Number, default: 29.7 },
width: { type: Number, default: 21 },
scale: { type: Number, default: 0.65 },
},
computed: {
innerContainerStyle(): Record<string, string> {
const style: Record<string, string> = {};
style['width'] = this.width;
style['height'] = this.height;
style['width'] = this.width + 'cm';
style['height'] = this.height + 'cm';
style['transform'] = `scale(${this.scale})`;
style['margin-top'] = `calc(-1 * (${this.height} * ${
style['margin-top'] = `calc(-1 * (${this.height}cm * ${
1 - this.scale
}) / 2)`;
style['margin-left'] = `calc(-1 * (${this.width} * ${
style['margin-left'] = `calc(-1 * (${this.width}cm * ${
1 - this.scale
}) / 2)`;
@ -39,8 +39,8 @@ export default defineComponent({
},
outerContainerStyle(): Record<string, string> {
const style: Record<string, string> = {};
style['height'] = `calc(${this.scale} * ${this.height})`;
style['width'] = `calc(${this.scale} * ${this.width})`;
style['height'] = `calc(${this.scale} * ${this.height}cm)`;
style['width'] = `calc(${this.scale} * ${this.width}cm)`;
return style;
},

View File

@ -213,6 +213,19 @@ export default defineComponent({
return { size: 'A4', width: 21, height: 29.7 };
},
components: { Float, FormHeader, Select, Button },
mounted() {
this.width = this.doc.width ?? 21;
this.height = this.doc.height ?? 29.7;
this.size = '';
Object.entries(paperSizeMap).forEach(([name, { width, height }]) => {
if (this.width === width && this.height === height) {
this.size = name;
}
});
this.size ||= 'Custom';
},
methods: {
sizeChange(v: string) {
const size = paperSizeMap[v as SizeName];

View File

@ -49,6 +49,8 @@
:template="doc.template!"
:values="values!"
:scale="scale"
:height="doc.height"
:width="doc.width"
/>
</div>