Improvement - Add html2canvas options params to usePrinter calls

Author: graphieros

src/components/vue-ui-3d-bar.vue

@@ -109,7 +109,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `3d_bar_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-3d-bar'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-3d-bar',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const customPalette = computed(() => {

src/components/vue-ui-age-pyramid.vue

@@ -143,7 +143,8 @@ function prepareChart() {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `vue-ui-age-pyramid_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-age-pyramid'
+    fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-age-pyramid',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-bullet.vue

@@ -332,7 +332,8 @@ const legendConfig = computed(() => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `bullet_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-bullet'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-bullet',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-candlestick.vue

@@ -205,7 +205,8 @@ onBeforeUnmount(() => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `vue-ui-candlestick_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-candlestick'
+    fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-candlestick',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-carousel-table.vue

@@ -103,7 +103,8 @@ watch(() => props.dataset, (_) => {
 
 const { isPrinting, isImaging, generatePdf: makePdf, generateImage } = usePrinter({
     elementId: `carousel-table_${uid.value}`,
-    fileName: FINAL_CONFIG.value.caption.text || 'vue-ui-carousel-table'
+    fileName: FINAL_CONFIG.value.caption.text || 'vue-ui-carousel-table',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const mutableConfig = ref({

src/components/vue-ui-chestnut.vue

@@ -103,7 +103,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `vue-ui-chestnut_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.layout.title.text || 'vue-ui-chestnut'
+    fileName: FINAL_CONFIG.value.style.chart.layout.title.text || 'vue-ui-chestnut',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-circle-pack.vue

@@ -116,7 +116,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `vue-ui-circle-pack_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-circle-pack'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-circle-pack',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-donut-evolution.vue

@@ -225,7 +225,8 @@ watch(() => props.dataset, (_) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: uid.value,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-donut-evolution'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-donut-evolution',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-donut.vue

@@ -186,7 +186,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `donut__${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-donut'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-donut',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-dumbbell.vue

@@ -175,7 +175,8 @@ onBeforeUnmount(() => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `dumbbell_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-dumbbell'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-dumbbell',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-flow.vue

@@ -117,7 +117,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `flow_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-flow'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-flow',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-funnel.vue

@@ -178,7 +178,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `funnel_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-funnel'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-funnel',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-galaxy.vue

@@ -140,7 +140,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `galaxy_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-galaxy'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-galaxy',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-gauge.vue

@@ -103,7 +103,8 @@ function prepareConfig() {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `vue-ui-gauge_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-gauge'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-gauge',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-heatmap.vue

@@ -134,7 +134,8 @@ watch(() => props.dataset, () => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `heatmap__${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-heatmap'
+    fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-heatmap',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-history-plot.vue

@@ -276,7 +276,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `history_plot_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-history-plot'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-history-plot',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-molecule.vue

@@ -125,7 +125,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `cluster_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-molecule'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-molecule',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-mood-radar.vue

@@ -116,7 +116,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: uid.value,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-mood-radar'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-mood-radar',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-nested-donuts.vue

@@ -166,7 +166,8 @@ onBeforeUnmount(() => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `nested_donuts_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-nested-donuts'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-nested-donuts',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-onion.vue

@@ -115,7 +115,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `vue-ui-onion_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-onion'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-onion',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-parallel-coordinate-plot.vue

@@ -212,7 +212,8 @@ onBeforeUnmount(() => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `pcp_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-parallel-coordinate-plot'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-parallel-coordinate-plot',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-quadrant.vue

@@ -204,7 +204,8 @@ onBeforeUnmount(() => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `vue-ui-quadrant_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-quadrant'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-quadrant',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-quick-chart.vue

@@ -189,7 +189,8 @@ watch(() => chartType.value, (v) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `${chartType.value}_${uid.value}`,
-    fileName: FINAL_CONFIG.value.title || chartType.value
+    fileName: FINAL_CONFIG.value.title || chartType.value,
+    options: FINAL_CONFIG.value.userOptionsPrint
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-radar.vue

@@ -161,7 +161,8 @@ onBeforeUnmount(() => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `vue-ui-radar_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-radar'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-radar',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-relation-circle.vue

@@ -96,7 +96,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `relation_circle_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-relation-circle'
+    fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-relation-circle',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-rings.vue

@@ -186,7 +186,8 @@ onBeforeUnmount(() => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `rings_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-rings'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-rings',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-scatter.vue

@@ -161,6 +161,7 @@ onBeforeUnmount(() => {
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `vue-ui-scatter_${uid.value}`,
     fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-scatter',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-stackbar.vue

@@ -186,7 +186,8 @@ const mutableConfig = ref({
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `stackbar_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-stackbar'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-stackbar',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const defaultSizes = ref({

src/components/vue-ui-strip-plot.vue

@@ -210,7 +210,8 @@ onBeforeUnmount(() => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `strip-plot_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-strip-plot'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-strip-plot',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-table-heatmap.vue

@@ -84,7 +84,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `table_heatmap_${uid.value}`,
-    fileName: 'vue-ui-table-heatmap'
+    fileName: 'vue-ui-table-heatmap',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const breakpoint = computed(() => {

src/components/vue-ui-table-sparkline.vue

@@ -97,7 +97,8 @@ watch(() => props.dataset, (_) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `table_${uid.value}`,
-    fileName: FINAL_CONFIG.value.title.text || 'vue-ui-table-sparkline'
+    fileName: FINAL_CONFIG.value.title.text || 'vue-ui-table-sparkline',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const customPalette = computed(() => {

src/components/vue-ui-thermometer.vue

@@ -116,7 +116,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `thermometer__${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-thermometer'
+    fileName: FINAL_CONFIG.value.style.title.text || 'vue-ui-thermometer',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-tiremarks.vue

@@ -87,7 +87,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: uid.value,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-tiremarks'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-tiremarks',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-treemap.vue

@@ -132,7 +132,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `treemap_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-treemap'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-treemap',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-vertical-bar.vue

@@ -126,7 +126,8 @@ watch(() => props.dataset, recalculateHeight, { deep: true });
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `vue-ui-vertical-bar_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-vertical-bar'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-vertical-bar',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-waffle.vue

@@ -180,7 +180,8 @@ onBeforeUnmount(() => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `vue-ui-waffle_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-waffle'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-waffle',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-wheel.vue

@@ -93,7 +93,8 @@ watch(() => props.config, (_newCfg) => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: uid.value,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-wheel'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-wheel',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const hasOptionsNoTitle = computed(() => {

src/components/vue-ui-word-cloud.vue

@@ -202,7 +202,8 @@ onBeforeUnmount(() => {
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `wordCloud_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-word-cloud'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-word-cloud',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const mutableConfig = ref({

src/components/vue-ui-xy-canvas.vue

@@ -53,7 +53,6 @@ import { useNestedProp } from "../useNestedProp";
 import { usePrinter } from "../usePrinter";
 import { useResponsive } from "../useResponsive";
 import { useConfig } from "../useConfig";
-import PenAndPaper from "../atoms/PenAndPaper.vue";
 import { useUserOptionState } from "../useUserOptionState";
 import { useChartAccessibility } from "../useChartAccessibility";
 import NonSvgPenAndPaper from "../atoms/NonSvgPenAndPaper.vue";
@@ -204,7 +203,8 @@ const aspectRatio = ref(FINAL_CONFIG.value.style.chart.aspectRatio);
 
 const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
     elementId: `xy_canvas_${uid.value}`,
-    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-xy-canvas'
+    fileName: FINAL_CONFIG.value.style.chart.title.text || 'vue-ui-xy-canvas',
+    options: FINAL_CONFIG.value.userOptions.print
 });
 
 const mutableConfig = ref({