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:
parent
5ec0270540
commit
9011ae04fa
@ -38,6 +38,8 @@
|
||||
:template="printProps.template"
|
||||
:values="printProps.values"
|
||||
:scale="scale"
|
||||
:width="templateDoc?.width"
|
||||
:height="templateDoc?.height"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
},
|
||||
|
@ -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];
|
||||
|
@ -49,6 +49,8 @@
|
||||
:template="doc.template!"
|
||||
:values="values!"
|
||||
:scale="scale"
|
||||
:height="doc.height"
|
||||
:width="doc.width"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user