vue-json-excel3 - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/vue-json-excel.cjs.js

@@ -177,2 +177,11 @@ 'use strict';
   props: {
+    // If true, don't download but emit a Blob
+    emitBlob: {
+      type: Boolean,
+      default: false,
+    },
+    debounce: {
+      type: Number,
+      default: 500,
+    },
     // mime type [xls, csv]
@@ -211,2 +220,6 @@ type: {
     },
+    // Title(s) for single column data, must be an array (ex: ['titleCol0',,TitleCol2])
+    perColumnsHeaders: {
+      default: null,
+    },
     // Footer(s) for the data, could be a string or an array of strings (multiple footers)
@@ -251,2 +264,7 @@ footer: {
   },
+  setup(){
+    return {
+      isDisabled: vue.ref(false)
+    }
+  },
   computed: {
@@ -267,32 +285,58 @@ // unique identifier
     async generate() {
-      if (typeof this.beforeGenerate === "function") {
-        await this.beforeGenerate();
-      }
-      let data = this.data;
-      if (typeof this.fetch === "function" || !data) data = await this.fetch();
 
-      if (!data || !data.length) {
-        return;
+       if (this.isDisabled) {
+        return; // return early if button is disabled
       }
+      this.isDisabled = true;
+      const debounce = this.$props.debounce;
+      let timeoutId = null;
 
-      let json = this.getProcessedJson(data, this.downloadFields);
-      if (this.type === "html") {
-        // this is mainly for testing
-        return this.export(
-          this.jsonToXLS(json),
-          this.name.replace(".xls", ".html"),
-          "text/html"
-        );
-      } else if (this.type === "csv") {
-        return this.export(
-          this.jsonToCSV(json),
-          this.name.replace(".xls", ".csv"),
-          "application/csv"
-        );
-      }
-      return this.export(
-        this.jsonToXLS(json),
-        this.name,
-        "application/vnd.ms-excel"
-      );
+      return new Promise((resolve, reject) => {
+        const executeGenerate = async () => {
+          if (typeof this.beforeGenerate === "function") {
+            await this.beforeGenerate();
+          }
+          let data = this.data;
+          if (typeof this.fetch === "function" || !data) data = await this.fetch();
+
+          if (!data || !data.length) {
+            if (typeof this.beforeFinish === "function") await this.beforeFinish();
+            return;
+          }
+
+          let json = await this.getProcessedJson(data, this.downloadFields);
+          if (this.type === "html") {
+            // this is mainly for testing
+            return this.export(
+              this.jsonToXLS(json),
+              this.name.replace(".xls", ".html"),
+              "text/html"
+            );
+          } else if (this.type === "csv") {
+            return this.export(
+              this.jsonToCSV(json),
+              this.name.replace(".xls", ".csv"),
+              "application/csv"
+            );
+          }
+          return this.export(
+            this.jsonToXLS(json),
+            this.name,
+            "application/vnd.ms-excel"
+          );
+        };
+
+        const debouncedGenerate = () => {
+          let self = this;
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+          }
+          timeoutId = setTimeout(() => {
+            executeGenerate().then(resolve).catch(reject);
+            self.isDisabled = false;
+          }, debounce);
+        };
+
+        debouncedGenerate();
+      });
     },
@@ -305,3 +349,4 @@ /*
       if (typeof this.beforeFinish === "function") await this.beforeFinish();
-      download(blob, filename, mime);
+      if (this.emitBlob) this.$emit("blob", blob);
+      else download(blob, filename, mime);
     },
@@ -330,2 +375,11 @@ /*
       }
+      // perColumnsHeaders
+      const perColumnsHeaders = this.perColumnsHeaders;
+      if (Array.isArray(perColumnsHeaders)) {
+        xlsData += "<tr>";
+        for (let pchKey in perColumnsHeaders) {
+          xlsData += "<th>" + perColumnsHeaders[pchKey] + "</th>";
+        }
+        xlsData += "</tr>";
+      }
 
@@ -385,2 +439,13 @@ //Fields
 
+      // perColumnsHeaders
+      const perColumnsHeaders = this.perColumnsHeaders;
+      if (Array.isArray(perColumnsHeaders)) {
+        for (let pchKey in perColumnsHeaders) {
+          csvData.push(perColumnsHeaders[pchKey]);
+          csvData.push(",");
+        }
+        csvData.pop();
+        csvData.push("\r\n");
+      }
+
       //Fields
@@ -422,14 +487,16 @@ for (let key in data[0]) {
 		*/
-    getProcessedJson(data, header) {
+    async getProcessedJson(data, header) {
       let keys = this.getKeys(data, header);
       let newData = [];
       let _self = this;
-      data.map(function (item, index) {
+      await data.reduce(async function (prev, current) {
+        await prev;
         let newItem = {};
         for (let label in keys) {
           let property = keys[label];
-          newItem[label] = _self.getValue(property, item);
+          newItem[label] = await _self.getValue(property, current);
         }
         newData.push(newItem);
-      });
+        return true;
+      }, []);
 
@@ -467,3 +534,3 @@ return newData;
 
-    getValue(key, item) {
+    async getValue(key, item) {
       const field = typeof key !== "object" ? key : key.field;
@@ -475,7 +542,7 @@ let indexes = typeof field !== "string" ? [] : field.split(".");
       else if (indexes.length > 1)
-        value = this.getValueFromNestedItem(item, indexes);
+        value = await this.getValueFromNestedItem(item, indexes);
       else value = this.parseValue(item[field]);
 
       if (key.hasOwnProperty("callback"))
-        value = this.getValueFromCallback(value, key.callback);
+        value = await this.getValueFromCallback(value, key.callback);
 
@@ -513,5 +580,5 @@ return value;
 
-    getValueFromCallback(item, callback) {
+    async getValueFromCallback(item, callback) {
       if (typeof callback !== "function") return this.defaultValue;
-      const value = callback(item);
+      const value = await callback(item);
       return this.parseValue(value);
@@ -532,3 +599,3 @@ },
       }
-      return new Blob([u8arr], { type: mime });
+      return new Blob([u8arr], {type: mime});
     },
@@ -543,3 +610,6 @@ }, // end methods
     id: _ctx.idName,
-    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.generate && _ctx.generate(...args)))
+    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.generate && _ctx.generate(...args))),
+    style: vue.normalizeStyle(_ctx.isDisabled?{
+  'opacity': '0.5',
+  'pointer-events': 'none'}:{})
   }, [
@@ -549,3 +619,3 @@ vue.renderSlot(_ctx.$slots, "default", {}, () => [
     ])
-  ], 8 /* PROPS */, _hoisted_1))
+  ], 12 /* STYLE, PROPS */, _hoisted_1))
 }
@@ -552,0 +622,0 @@

dist/vue-json-excel.esm.js

@@ -1,2 +0,2 @@
-import { defineComponent, openBlock, createElementBlock, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, ref, openBlock, createElementBlock, normalizeStyle, renderSlot, createTextVNode, toDisplayString } from 'vue';
 
@@ -175,2 +175,11 @@ var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
   props: {
+    // If true, don't download but emit a Blob
+    emitBlob: {
+      type: Boolean,
+      default: false,
+    },
+    debounce: {
+      type: Number,
+      default: 500,
+    },
     // mime type [xls, csv]
@@ -209,2 +218,6 @@ type: {
     },
+    // Title(s) for single column data, must be an array (ex: ['titleCol0',,TitleCol2])
+    perColumnsHeaders: {
+      default: null,
+    },
     // Footer(s) for the data, could be a string or an array of strings (multiple footers)
@@ -249,2 +262,7 @@ footer: {
   },
+  setup(){
+    return {
+      isDisabled: ref(false)
+    }
+  },
   computed: {
@@ -265,32 +283,58 @@ // unique identifier
     async generate() {
-      if (typeof this.beforeGenerate === "function") {
-        await this.beforeGenerate();
-      }
-      let data = this.data;
-      if (typeof this.fetch === "function" || !data) data = await this.fetch();
 
-      if (!data || !data.length) {
-        return;
+       if (this.isDisabled) {
+        return; // return early if button is disabled
       }
+      this.isDisabled = true;
+      const debounce = this.$props.debounce;
+      let timeoutId = null;
 
-      let json = this.getProcessedJson(data, this.downloadFields);
-      if (this.type === "html") {
-        // this is mainly for testing
-        return this.export(
-          this.jsonToXLS(json),
-          this.name.replace(".xls", ".html"),
-          "text/html"
-        );
-      } else if (this.type === "csv") {
-        return this.export(
-          this.jsonToCSV(json),
-          this.name.replace(".xls", ".csv"),
-          "application/csv"
-        );
-      }
-      return this.export(
-        this.jsonToXLS(json),
-        this.name,
-        "application/vnd.ms-excel"
-      );
+      return new Promise((resolve, reject) => {
+        const executeGenerate = async () => {
+          if (typeof this.beforeGenerate === "function") {
+            await this.beforeGenerate();
+          }
+          let data = this.data;
+          if (typeof this.fetch === "function" || !data) data = await this.fetch();
+
+          if (!data || !data.length) {
+            if (typeof this.beforeFinish === "function") await this.beforeFinish();
+            return;
+          }
+
+          let json = await this.getProcessedJson(data, this.downloadFields);
+          if (this.type === "html") {
+            // this is mainly for testing
+            return this.export(
+              this.jsonToXLS(json),
+              this.name.replace(".xls", ".html"),
+              "text/html"
+            );
+          } else if (this.type === "csv") {
+            return this.export(
+              this.jsonToCSV(json),
+              this.name.replace(".xls", ".csv"),
+              "application/csv"
+            );
+          }
+          return this.export(
+            this.jsonToXLS(json),
+            this.name,
+            "application/vnd.ms-excel"
+          );
+        };
+
+        const debouncedGenerate = () => {
+          let self = this;
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+          }
+          timeoutId = setTimeout(() => {
+            executeGenerate().then(resolve).catch(reject);
+            self.isDisabled = false;
+          }, debounce);
+        };
+
+        debouncedGenerate();
+      });
     },
@@ -303,3 +347,4 @@ /*
       if (typeof this.beforeFinish === "function") await this.beforeFinish();
-      download(blob, filename, mime);
+      if (this.emitBlob) this.$emit("blob", blob);
+      else download(blob, filename, mime);
     },
@@ -328,2 +373,11 @@ /*
       }
+      // perColumnsHeaders
+      const perColumnsHeaders = this.perColumnsHeaders;
+      if (Array.isArray(perColumnsHeaders)) {
+        xlsData += "<tr>";
+        for (let pchKey in perColumnsHeaders) {
+          xlsData += "<th>" + perColumnsHeaders[pchKey] + "</th>";
+        }
+        xlsData += "</tr>";
+      }
 
@@ -383,2 +437,13 @@ //Fields
 
+      // perColumnsHeaders
+      const perColumnsHeaders = this.perColumnsHeaders;
+      if (Array.isArray(perColumnsHeaders)) {
+        for (let pchKey in perColumnsHeaders) {
+          csvData.push(perColumnsHeaders[pchKey]);
+          csvData.push(",");
+        }
+        csvData.pop();
+        csvData.push("\r\n");
+      }
+
       //Fields
@@ -420,14 +485,16 @@ for (let key in data[0]) {
 		*/
-    getProcessedJson(data, header) {
+    async getProcessedJson(data, header) {
       let keys = this.getKeys(data, header);
       let newData = [];
       let _self = this;
-      data.map(function (item, index) {
+      await data.reduce(async function (prev, current) {
+        await prev;
         let newItem = {};
         for (let label in keys) {
           let property = keys[label];
-          newItem[label] = _self.getValue(property, item);
+          newItem[label] = await _self.getValue(property, current);
         }
         newData.push(newItem);
-      });
+        return true;
+      }, []);
 
@@ -465,3 +532,3 @@ return newData;
 
-    getValue(key, item) {
+    async getValue(key, item) {
       const field = typeof key !== "object" ? key : key.field;
@@ -473,7 +540,7 @@ let indexes = typeof field !== "string" ? [] : field.split(".");
       else if (indexes.length > 1)
-        value = this.getValueFromNestedItem(item, indexes);
+        value = await this.getValueFromNestedItem(item, indexes);
       else value = this.parseValue(item[field]);
 
       if (key.hasOwnProperty("callback"))
-        value = this.getValueFromCallback(value, key.callback);
+        value = await this.getValueFromCallback(value, key.callback);
 
@@ -511,5 +578,5 @@ return value;
 
-    getValueFromCallback(item, callback) {
+    async getValueFromCallback(item, callback) {
       if (typeof callback !== "function") return this.defaultValue;
-      const value = callback(item);
+      const value = await callback(item);
       return this.parseValue(value);
@@ -530,3 +597,3 @@ },
       }
-      return new Blob([u8arr], { type: mime });
+      return new Blob([u8arr], {type: mime});
     },
@@ -541,3 +608,6 @@ }, // end methods
     id: _ctx.idName,
-    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.generate && _ctx.generate(...args)))
+    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.generate && _ctx.generate(...args))),
+    style: normalizeStyle(_ctx.isDisabled?{
+  'opacity': '0.5',
+  'pointer-events': 'none'}:{})
   }, [
@@ -547,3 +617,3 @@ renderSlot(_ctx.$slots, "default", {}, () => [
     ])
-  ], 8 /* PROPS */, _hoisted_1))
+  ], 12 /* STYLE, PROPS */, _hoisted_1))
 }
@@ -550,0 +620,0 @@

dist/vue-json-excel.umd.js

@@ -179,2 +179,11 @@ (function (global, factory) {
 	  props: {
+	    // If true, don't download but emit a Blob
+	    emitBlob: {
+	      type: Boolean,
+	      default: false,
+	    },
+	    debounce: {
+	      type: Number,
+	      default: 500,
+	    },
 	    // mime type [xls, csv]
@@ -213,2 +222,6 @@ type: {
 	    },
+	    // Title(s) for single column data, must be an array (ex: ['titleCol0',,TitleCol2])
+	    perColumnsHeaders: {
+	      default: null,
+	    },
 	    // Footer(s) for the data, could be a string or an array of strings (multiple footers)
@@ -253,2 +266,7 @@ footer: {
 	  },
+	  setup(){
+	    return {
+	      isDisabled: vue.ref(false)
+	    }
+	  },
 	  computed: {
@@ -269,32 +287,58 @@ // unique identifier
 	    async generate() {
-	      if (typeof this.beforeGenerate === "function") {
-	        await this.beforeGenerate();
-	      }
-	      let data = this.data;
-	      if (typeof this.fetch === "function" || !data) data = await this.fetch();
 
-	      if (!data || !data.length) {
-	        return;
+	       if (this.isDisabled) {
+	        return; // return early if button is disabled
 	      }
+	      this.isDisabled = true;
+	      const debounce = this.$props.debounce;
+	      let timeoutId = null;
 
-	      let json = this.getProcessedJson(data, this.downloadFields);
-	      if (this.type === "html") {
-	        // this is mainly for testing
-	        return this.export(
-	          this.jsonToXLS(json),
-	          this.name.replace(".xls", ".html"),
-	          "text/html"
-	        );
-	      } else if (this.type === "csv") {
-	        return this.export(
-	          this.jsonToCSV(json),
-	          this.name.replace(".xls", ".csv"),
-	          "application/csv"
-	        );
-	      }
-	      return this.export(
-	        this.jsonToXLS(json),
-	        this.name,
-	        "application/vnd.ms-excel"
-	      );
+	      return new Promise((resolve, reject) => {
+	        const executeGenerate = async () => {
+	          if (typeof this.beforeGenerate === "function") {
+	            await this.beforeGenerate();
+	          }
+	          let data = this.data;
+	          if (typeof this.fetch === "function" || !data) data = await this.fetch();
+
+	          if (!data || !data.length) {
+	            if (typeof this.beforeFinish === "function") await this.beforeFinish();
+	            return;
+	          }
+
+	          let json = await this.getProcessedJson(data, this.downloadFields);
+	          if (this.type === "html") {
+	            // this is mainly for testing
+	            return this.export(
+	              this.jsonToXLS(json),
+	              this.name.replace(".xls", ".html"),
+	              "text/html"
+	            );
+	          } else if (this.type === "csv") {
+	            return this.export(
+	              this.jsonToCSV(json),
+	              this.name.replace(".xls", ".csv"),
+	              "application/csv"
+	            );
+	          }
+	          return this.export(
+	            this.jsonToXLS(json),
+	            this.name,
+	            "application/vnd.ms-excel"
+	          );
+	        };
+
+	        const debouncedGenerate = () => {
+	          let self = this;
+	          if (timeoutId) {
+	            clearTimeout(timeoutId);
+	          }
+	          timeoutId = setTimeout(() => {
+	            executeGenerate().then(resolve).catch(reject);
+	            self.isDisabled = false;
+	          }, debounce);
+	        };
+
+	        debouncedGenerate();
+	      });
 	    },
@@ -307,3 +351,4 @@ /*
 	      if (typeof this.beforeFinish === "function") await this.beforeFinish();
-	      download(blob, filename, mime);
+	      if (this.emitBlob) this.$emit("blob", blob);
+	      else download(blob, filename, mime);
 	    },
@@ -332,2 +377,11 @@ /*
 	      }
+	      // perColumnsHeaders
+	      const perColumnsHeaders = this.perColumnsHeaders;
+	      if (Array.isArray(perColumnsHeaders)) {
+	        xlsData += "<tr>";
+	        for (let pchKey in perColumnsHeaders) {
+	          xlsData += "<th>" + perColumnsHeaders[pchKey] + "</th>";
+	        }
+	        xlsData += "</tr>";
+	      }
 
@@ -387,2 +441,13 @@ //Fields
 
+	      // perColumnsHeaders
+	      const perColumnsHeaders = this.perColumnsHeaders;
+	      if (Array.isArray(perColumnsHeaders)) {
+	        for (let pchKey in perColumnsHeaders) {
+	          csvData.push(perColumnsHeaders[pchKey]);
+	          csvData.push(",");
+	        }
+	        csvData.pop();
+	        csvData.push("\r\n");
+	      }
+
 	      //Fields
@@ -424,14 +489,16 @@ for (let key in data[0]) {
 			*/
-	    getProcessedJson(data, header) {
+	    async getProcessedJson(data, header) {
 	      let keys = this.getKeys(data, header);
 	      let newData = [];
 	      let _self = this;
-	      data.map(function (item, index) {
+	      await data.reduce(async function (prev, current) {
+	        await prev;
 	        let newItem = {};
 	        for (let label in keys) {
 	          let property = keys[label];
-	          newItem[label] = _self.getValue(property, item);
+	          newItem[label] = await _self.getValue(property, current);
 	        }
 	        newData.push(newItem);
-	      });
+	        return true;
+	      }, []);
 
@@ -469,3 +536,3 @@ return newData;
 
-	    getValue(key, item) {
+	    async getValue(key, item) {
 	      const field = typeof key !== "object" ? key : key.field;
@@ -477,7 +544,7 @@ let indexes = typeof field !== "string" ? [] : field.split(".");
 	      else if (indexes.length > 1)
-	        value = this.getValueFromNestedItem(item, indexes);
+	        value = await this.getValueFromNestedItem(item, indexes);
 	      else value = this.parseValue(item[field]);
 
 	      if (key.hasOwnProperty("callback"))
-	        value = this.getValueFromCallback(value, key.callback);
+	        value = await this.getValueFromCallback(value, key.callback);
 
@@ -515,5 +582,5 @@ return value;
 
-	    getValueFromCallback(item, callback) {
+	    async getValueFromCallback(item, callback) {
 	      if (typeof callback !== "function") return this.defaultValue;
-	      const value = callback(item);
+	      const value = await callback(item);
 	      return this.parseValue(value);
@@ -534,3 +601,3 @@ },
 	      }
-	      return new Blob([u8arr], { type: mime });
+	      return new Blob([u8arr], {type: mime});
 	    },
@@ -545,3 +612,6 @@ }, // end methods
 	    id: _ctx.idName,
-	    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.generate && _ctx.generate(...args)))
+	    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.generate && _ctx.generate(...args))),
+	    style: vue.normalizeStyle(_ctx.isDisabled?{
+	  'opacity': '0.5',
+	  'pointer-events': 'none'}:{})
 	  }, [
@@ -551,3 +621,3 @@ vue.renderSlot(_ctx.$slots, "default", {}, () => [
 	    ])
-	  ], 8 /* PROPS */, _hoisted_1))
+	  ], 12 /* STYLE, PROPS */, _hoisted_1))
 	}
@@ -554,0 +624,0 @@

package.json

 {
   "name": "vue-json-excel3",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Download your JSON as an excel or CSV file directly from the browser",
@@ -5,0 +5,0 @@ "main": "dist/vue-json-excel.umd.js",

README.md

@@ -50,3 +50,3 @@ [![npm](https://img.shields.io/npm/dt/vue-json-excel3.svg)](https://www.npmjs.com/package/vue-json-excel3)
 | Name                         |     Type     | Description                                                                                                                                                                                              | Default  |
-|:-----------------------------| :----------: |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| :------: |
+|:-----------------------------|:------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:--------:|
 | data                         |    Array     | Data to be exported.                                                                                                                                                                                     |
@@ -68,2 +68,3 @@ | fields                       |    Object    | Fields inside the JSON Object that you want to export. If none provided, all properties in the JSON will be exported.                                                                                    |
 | emitBlob                     |   Boolean    | This will emmit the blob data. default: False                                                                                                                                                            |
+| debounce                     |    Number    | This is for debouce in download function                                                                                                                                                                 |    500   |
 
@@ -70,0 +71,0 @@ ## Example

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91257

increased by10.39%

Number of package files

18

increased by5.88%

Lines of code

1694

increased by13.01%

Number of lines in readme file

334

increased by0.3%

No dependency changes