New feature - VueUiTable - Add field to change export filename #250

Author: graphieros

src/components/vue-ui-table.vue

@@ -34,6 +34,15 @@
                             <span>{{ FINAL_CONFIG.translations.exportPageButton }}</span>
                         </button>
                     </div>
+                    <div class="vue-ui-table-dialog-field">
+                        <label class="label vue-ui-table-dialog-input-label">
+                            {{ FINAL_CONFIG.translations.filename }}
+                            <input ref="filenameInputRef" @keydown.space.stop pattern=".*" class="vue-ui-table-dialog-input" type="text" v-model="filename"/>
+                        </label>
+                        <button class="vue-ui-table-dialog-field-button" @click="filename = ''">
+                            <BaseIcon name="close" :stroke="FINAL_CONFIG.style.exportMenu.color" :size="18"/>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -557,6 +566,7 @@ import {
 import { useConfig } from "../useConfig";
 import VueUiXy from "./vue-ui-xy.vue";
 import VueUiDonut from "./vue-ui-donut.vue";
+import BaseIcon from "../atoms/BaseIcon.vue";
 
 export default {
     name: "vue-ui-table",
@@ -574,7 +584,7 @@ export default {
             }
         }
     },
-    components: { VueUiXy, VueUiDonut },
+    components: { VueUiXy, VueUiDonut, BaseIcon },
     emits: ['page-change'],
     data() {
         const uid = `vue-ui-table-${Math.random()}`;
@@ -669,6 +679,7 @@ export default {
                     type: head.type, // this attribute is mandatory
                 }
             }),
+            filename: '',
         }
     },
     mounted() {
@@ -692,8 +703,17 @@ export default {
                 e.preventDefault();
             }
         })
+        this.filename = this.FINAL_CONFIG.style.exportMenu.filename;
     },
     watch: {
+        isExportRequest: function (bool) {
+            if (bool) {
+                const filenameInput = this.$refs.filenameInputRef;
+                if (filenameInput) {
+                    filenameInput.focus();
+                }
+            }
+        },
         showChart: function (hasChart) {
             if (hasChart) {
                 this.$nextTick(() => {
@@ -1104,7 +1124,7 @@ export default {
             const body = selection === 'all' ? this.bodyCopy.map(b => b.td) : this.visibleRows.map(r => r.td);
             const table = [head].concat(body);
             const csvContent = this.createCsvContent(table);
-            this.downloadCsv({ csvContent, title: 'vue-ui-table' })
+            this.downloadCsv({ csvContent, title: this.filename })
         },
         calcLinearProgression,
         closeAllDropdowns() {
@@ -2388,7 +2408,36 @@ button.th-reset:not(:disabled) {
     justify-content: flex-start;
 }
 
-.vue-ui-table-main .vue-ui-table-export-hub-option-wrapper .label {
+.vue-ui-table-main .vue-ui-table-dialog-field {
+    width: calc(100% - 12px);
+    padding-right: 12px;
+    align-items:center;
+    position: relative;
+}
+
+.vue-ui-table-dialog-field {
+    width: 100%;
+}
+
+input.vue-ui-table-dialog-input {
+    width: calc(100% - 44px);
+    padding-right: 44px;
+}
+
+.vue-ui-table-dialog-field-button {
+    background: transparent;
+    border: none !important;
+    box-shadow: none;
+    outline: none;
+    position: absolute;
+    right: 4px;
+    top: 26px;
+    min-width: 36px !important;
+    width: 36px;
+}
+
+.vue-ui-table-main .vue-ui-table-export-hub-option-wrapper .label,
+.vue-ui-table-main .vue-ui-table-dialog-field .label {
     font-size: 12px;
     line-height: 12px;
     margin-bottom: 6px;
@@ -2442,4 +2491,7 @@ button.th-reset:not(:disabled) {
         opacity: 0;
     }
 }
+input {
+    font-family: inherit !important;
+}
 </style>

src/useConfig.js

@@ -233,7 +233,7 @@ export function useConfig() {
         startIndex: null,
         endIndex: null,
         enableRangeHandles: true,
-        enableSelectionDrag: true
+        enableSelectionDrag: true,
     }
 
     const MINIMAP = {
@@ -245,6 +245,8 @@ export function useConfig() {
         selectionRadius: 2,
         indicatorColor: COLOR_BLACK,
         verticalHandles: false,
+        compact: true,
+        merged: false,
     }
 
     const vue_ui_stackbar = {
@@ -2913,7 +2915,7 @@ export function useConfig() {
         zoomStartIndex: null,
         zoomEndIndex: null,
         zoomEnableRangeHandles: true,
-        zoomEnableSelectionDrag: true
+        zoomEnableSelectionDrag: true,
     }
 
     const vue_ui_age_pyramid = {
@@ -5337,7 +5339,8 @@ export function useConfig() {
                 buttons: {
                     backgroundColor: COLOR_WHITE_ALMOST,
                     color: COLOR_BLACK
-                }
+                },
+                filename: ''
             },
             closeButtons: {
                 backgroundColor: 'transparent',
@@ -5419,7 +5422,8 @@ export function useConfig() {
             sum: 'Sum',
             to: 'To',
             total: 'Total',
-            totalRows: 'Total rows'
+            totalRows: 'Total rows',
+            filename: 'File name'
         },
         useChart: true
     }

types/vue-data-ui.d.ts

@@ -306,6 +306,8 @@ declare module "vue-data-ui" {
         selectionRadius?: number;
         indicatorColor?: string;
         verticalHandles?: boolean;
+        compact?: boolean;
+        merged?: boolean;
     };
 
     export type ChartZoom = {
@@ -5563,6 +5565,7 @@ declare module "vue-data-ui" {
                     backgroundColor?: string;
                     color?: string;
                 };
+                filename?: string | number;
             };
             closeButtons?: {
                 backgroundColor?: string;
@@ -5645,6 +5648,7 @@ declare module "vue-data-ui" {
             to?: string;
             total?: string;
             totalRows?: string;
+            filename?: string;
         };
         useChart?: boolean;
     };
@@ -6189,6 +6193,7 @@ declare module "vue-data-ui" {
         zoomEndIndex?: number | null;
         zoomEnableRangeHandles?: boolean;
         zoomEnableSelectionDrag?: boolean;
+        zoomCompact?: boolean;
         userOptionsPosition?: "right" | "left";
         userOptionsButtons?: {
             tooltip?: boolean;