mirror of
https://github.com/frappe/books.git
synced 2024-09-20 03:29:00 +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"
|
:template="printProps.template"
|
||||||
:values="printProps.values"
|
:values="printProps.values"
|
||||||
:scale="scale"
|
:scale="scale"
|
||||||
|
:width="templateDoc?.width"
|
||||||
|
:height="templateDoc?.height"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<ScaledContainer
|
<ScaledContainer
|
||||||
:scale="Math.max(scale, 0.1)"
|
:scale="Math.max(scale, 0.1)"
|
||||||
|
:width="width"
|
||||||
|
:height="height"
|
||||||
ref="scaledContainer"
|
ref="scaledContainer"
|
||||||
class="mx-auto shadow-lg border"
|
class="mx-auto shadow-lg border"
|
||||||
>
|
>
|
||||||
@ -52,7 +54,6 @@ import { getPathAndMakePDF } from 'src/utils/printTemplates';
|
|||||||
import { PrintValues } from 'src/utils/types';
|
import { PrintValues } from 'src/utils/types';
|
||||||
import { defineComponent, PropType } from 'vue';
|
import { defineComponent, PropType } from 'vue';
|
||||||
import ScaledContainer from './ScaledContainer.vue';
|
import ScaledContainer from './ScaledContainer.vue';
|
||||||
import { VueElement } from 'vue';
|
|
||||||
|
|
||||||
export const baseSafeTemplate = `<main class="h-full w-full bg-white">
|
export const baseSafeTemplate = `<main class="h-full w-full bg-white">
|
||||||
<p class="p-4 text-red-500">
|
<p class="p-4 text-red-500">
|
||||||
@ -70,6 +71,8 @@ export default defineComponent({
|
|||||||
props: {
|
props: {
|
||||||
template: { type: String, required: true },
|
template: { type: String, required: true },
|
||||||
scale: { type: Number, default: 0.65 },
|
scale: { type: Number, default: 0.65 },
|
||||||
|
width: { type: Number, default: 21 },
|
||||||
|
height: { type: Number, default: 29.7 },
|
||||||
values: {
|
values: {
|
||||||
type: Object as PropType<PrintValues>,
|
type: Object as PropType<PrintValues>,
|
||||||
required: true,
|
required: true,
|
||||||
|
@ -18,20 +18,20 @@ import { defineComponent } from 'vue';
|
|||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props: {
|
props: {
|
||||||
height: { type: String, default: '29.7cm' },
|
height: { type: Number, default: 29.7 },
|
||||||
width: { type: String, default: '21cm' },
|
width: { type: Number, default: 21 },
|
||||||
scale: { type: Number, default: 0.65 },
|
scale: { type: Number, default: 0.65 },
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
innerContainerStyle(): Record<string, string> {
|
innerContainerStyle(): Record<string, string> {
|
||||||
const style: Record<string, string> = {};
|
const style: Record<string, string> = {};
|
||||||
style['width'] = this.width;
|
style['width'] = this.width + 'cm';
|
||||||
style['height'] = this.height;
|
style['height'] = this.height + 'cm';
|
||||||
style['transform'] = `scale(${this.scale})`;
|
style['transform'] = `scale(${this.scale})`;
|
||||||
style['margin-top'] = `calc(-1 * (${this.height} * ${
|
style['margin-top'] = `calc(-1 * (${this.height}cm * ${
|
||||||
1 - this.scale
|
1 - this.scale
|
||||||
}) / 2)`;
|
}) / 2)`;
|
||||||
style['margin-left'] = `calc(-1 * (${this.width} * ${
|
style['margin-left'] = `calc(-1 * (${this.width}cm * ${
|
||||||
1 - this.scale
|
1 - this.scale
|
||||||
}) / 2)`;
|
}) / 2)`;
|
||||||
|
|
||||||
@ -39,8 +39,8 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
outerContainerStyle(): Record<string, string> {
|
outerContainerStyle(): Record<string, string> {
|
||||||
const style: Record<string, string> = {};
|
const style: Record<string, string> = {};
|
||||||
style['height'] = `calc(${this.scale} * ${this.height})`;
|
style['height'] = `calc(${this.scale} * ${this.height}cm)`;
|
||||||
style['width'] = `calc(${this.scale} * ${this.width})`;
|
style['width'] = `calc(${this.scale} * ${this.width}cm)`;
|
||||||
|
|
||||||
return style;
|
return style;
|
||||||
},
|
},
|
||||||
|
@ -213,6 +213,19 @@ export default defineComponent({
|
|||||||
return { size: 'A4', width: 21, height: 29.7 };
|
return { size: 'A4', width: 21, height: 29.7 };
|
||||||
},
|
},
|
||||||
components: { Float, FormHeader, Select, Button },
|
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: {
|
methods: {
|
||||||
sizeChange(v: string) {
|
sizeChange(v: string) {
|
||||||
const size = paperSizeMap[v as SizeName];
|
const size = paperSizeMap[v as SizeName];
|
||||||
|
@ -49,6 +49,8 @@
|
|||||||
:template="doc.template!"
|
:template="doc.template!"
|
||||||
:values="values!"
|
:values="values!"
|
||||||
:scale="scale"
|
:scale="scale"
|
||||||
|
:height="doc.height"
|
||||||
|
:width="doc.width"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user