w-component-vue 2.3.30 → 2.3.32

package/docs/examples/w-table-dyn_editable_checkId_successMsgFromAddRow_errorMsgFromAddRow.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.30/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.32/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -170,6 +170,12 @@
     vuetify: new Vuetify(),
     data: function() {
       let keys1 = ["make", "model", "price"];
+      let kpHeadFilterType1 = {
+        //default: num (num,text,time,set)
+        make: "text",
+        model: "text",
+        price: "num"
+      };
       let rows1 = [
         { make: "Toyota", model: "Celica", price: 35000 },
         { make: "Ford", model: "Mondeo", price: 32000 },
@@ -194,6 +200,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType2 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows2 = [
         {
           id: "id-Toyota",
@@ -322,6 +338,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType3 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows3 = [
         {
           id: "",
@@ -435,14 +461,17 @@
             "The relationship between different car types and prices",
           opt1: {
             keys: keys1,
+            kpHeadFilterType: kpHeadFilterType1,
             rows: rows1
           },
           opt2: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2
           },
           opt3: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpHead: {
               id: "主鍵",
@@ -456,6 +485,7 @@
           },
           opt4: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             beforeAddRow: function(newRow) {
               newRow.id = "id-random-" + Math.random();
@@ -464,6 +494,7 @@
           },
           opt5: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpConvertKeysWhenUploadData: {
               makeTemp: "make",
@@ -483,6 +514,7 @@
           },
           opt7: {
             keys: keys3,
+            kpHeadFilterType: kpHeadFilterType3,
             rows: rows3,
             modifyDataWhenSave: function(rows) {
               console.log("modifyDataWhenSave", rows);

package/docs/examples/w-table-dyn_editable_inforPaddingStyle_menuBackgroundColor.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.30/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.32/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -165,6 +165,12 @@
     vuetify: new Vuetify(),
     data: function() {
       let keys1 = ["make", "model", "price"];
+      let kpHeadFilterType1 = {
+        //default: num (num,text,time,set)
+        make: "text",
+        model: "text",
+        price: "num"
+      };
       let rows1 = [
         { make: "Toyota", model: "Celica", price: 35000 },
         { make: "Ford", model: "Mondeo", price: 32000 },
@@ -189,6 +195,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType2 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows2 = [
         {
           id: "id-Toyota",
@@ -317,6 +333,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType3 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows3 = [
         {
           id: "",
@@ -430,14 +456,17 @@
             "The relationship between different car types and prices",
           opt1: {
             keys: keys1,
+            kpHeadFilterType: kpHeadFilterType1,
             rows: rows1
           },
           opt2: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2
           },
           opt3: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpHead: {
               id: "主鍵",
@@ -451,6 +480,7 @@
           },
           opt4: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             beforeAddRow: function(newRow) {
               newRow.id = "id-random-" + Math.random();
@@ -459,6 +489,7 @@
           },
           opt5: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpConvertKeysWhenUploadData: {
               makeTemp: "make",
@@ -478,6 +509,7 @@
           },
           opt7: {
             keys: keys3,
+            kpHeadFilterType: kpHeadFilterType3,
             rows: rows3,
             modifyDataWhenSave: function(rows) {
               console.log("modifyDataWhenSave", rows);

package/docs/examples/{w-table-dyn_editable_checkId_tooltipAddRow_tooltipDeleteSelectedRows.html → w-table-dyn_editable_language_checkId_tooltipAddRow.html}

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.30/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.32/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -137,7 +137,7 @@
         <div class="bk">
             <div
                 class="item"
-            >editable &amp; checkId &amp; tooltipAddRow &amp; tooltipDeleteSelectedRows &amp; tooltipDownloadExcelFile &amp; tooltipUploadExcelFile &amp; uploadModeTitle &amp; uploadModeTextForReplace &amp; uploadModeTextForAppend</div>
+            >editable &amp; language &amp; checkId &amp; tooltipAddRow &amp; tooltipDeleteSelectedRows &amp; tooltipDownloadExcelFile &amp; tooltipDownloadExcelFileForDisplay &amp; tooltipUploadExcelFile &amp; uploadModeTitle &amp; uploadModeTextForReplace &amp; uploadModeTextForAppend</div>
 
             <w-table-dyn
                 style="width:600px; height:400px;"
@@ -145,10 +145,12 @@
                 :description="WTableDyn.description"
                 :opt="WTableDyn.opt2"
                 :editable="true"
+                :language="'zh-tw'"
                 :check-id="'id'"
                 :tooltip-add-row="'新增數據'"
                 :tooltip-delete-selected-rows="'刪除選擇數據'"
-                :tooltip-download-excel-file="'下載 Excel(xlsx) 數據檔案'"
+                :tooltip-download-excel-file="'下載數據成為 Excel(xlsx) 檔案'"
+                :tooltip-download-excel-file-for-display="'下載過濾後數據成為 Excel(xlsx) 檔案'"
                 :tooltip-upload-excel-file="'上傳 Excel(xlsx) 數據檔案'"
                 :upload-mode-title="'請選擇上傳模式：'"
                 :upload-mode-text-for-replace="'取代'"
@@ -169,6 +171,12 @@
     vuetify: new Vuetify(),
     data: function() {
       let keys1 = ["make", "model", "price"];
+      let kpHeadFilterType1 = {
+        //default: num (num,text,time,set)
+        make: "text",
+        model: "text",
+        price: "num"
+      };
       let rows1 = [
         { make: "Toyota", model: "Celica", price: 35000 },
         { make: "Ford", model: "Mondeo", price: 32000 },
@@ -193,6 +201,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType2 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows2 = [
         {
           id: "id-Toyota",
@@ -321,6 +339,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType3 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows3 = [
         {
           id: "",
@@ -434,14 +462,17 @@
             "The relationship between different car types and prices",
           opt1: {
             keys: keys1,
+            kpHeadFilterType: kpHeadFilterType1,
             rows: rows1
           },
           opt2: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2
           },
           opt3: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpHead: {
               id: "主鍵",
@@ -455,6 +486,7 @@
           },
           opt4: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             beforeAddRow: function(newRow) {
               newRow.id = "id-random-" + Math.random();
@@ -463,6 +495,7 @@
           },
           opt5: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpConvertKeysWhenUploadData: {
               makeTemp: "make",
@@ -482,6 +515,7 @@
           },
           opt7: {
             keys: keys3,
+            kpHeadFilterType: kpHeadFilterType3,
             rows: rows3,
             modifyDataWhenSave: function(rows) {
               console.log("modifyDataWhenSave", rows);

package/docs/examples/{w-table-dyn_editable_textLabelDataName_textPlaceholderDataName_textLabelDataDescription.html → w-table-dyn_editable_language_textLabelDataName_textPlaceholderDataName.html}

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.30/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.32/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -137,7 +137,7 @@
         <div class="bk">
             <div
                 class="item"
-            >editable &amp; textLabelDataName &amp; textPlaceholderDataName &amp; textLabelDataDescription &amp; textPlaceholderDataDescription</div>
+            >editable &amp; language &amp; textLabelDataName &amp; textPlaceholderDataName &amp; textLabelDataDescription &amp; textPlaceholderDataDescription</div>
 
             <w-table-dyn
                 style="width:600px; height:400px;"
@@ -145,6 +145,7 @@
                 :description="WTableDyn.description"
                 :opt="WTableDyn.opt2"
                 :editable="true"
+                :language="'zh-tw'"
                 :text-label-data-name="'名稱'"
                 :text-placeholder-data-name="'請輸入數據名稱'"
                 :text-label-data-description="'說明'"
@@ -165,6 +166,12 @@
     vuetify: new Vuetify(),
     data: function() {
       let keys1 = ["make", "model", "price"];
+      let kpHeadFilterType1 = {
+        //default: num (num,text,time,set)
+        make: "text",
+        model: "text",
+        price: "num"
+      };
       let rows1 = [
         { make: "Toyota", model: "Celica", price: 35000 },
         { make: "Ford", model: "Mondeo", price: 32000 },
@@ -189,6 +196,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType2 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows2 = [
         {
           id: "id-Toyota",
@@ -317,6 +334,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType3 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows3 = [
         {
           id: "",
@@ -430,14 +457,17 @@
             "The relationship between different car types and prices",
           opt1: {
             keys: keys1,
+            kpHeadFilterType: kpHeadFilterType1,
             rows: rows1
           },
           opt2: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2
           },
           opt3: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpHead: {
               id: "主鍵",
@@ -451,6 +481,7 @@
           },
           opt4: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             beforeAddRow: function(newRow) {
               newRow.id = "id-random-" + Math.random();
@@ -459,6 +490,7 @@
           },
           opt5: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpConvertKeysWhenUploadData: {
               makeTemp: "make",
@@ -478,6 +510,7 @@
           },
           opt7: {
             keys: keys3,
+            kpHeadFilterType: kpHeadFilterType3,
             rows: rows3,
             modifyDataWhenSave: function(rows) {
               console.log("modifyDataWhenSave", rows);

package/docs/examples/w-table-dyn_editable_no enableInfor.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.30/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.32/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -160,6 +160,12 @@
     vuetify: new Vuetify(),
     data: function() {
       let keys1 = ["make", "model", "price"];
+      let kpHeadFilterType1 = {
+        //default: num (num,text,time,set)
+        make: "text",
+        model: "text",
+        price: "num"
+      };
       let rows1 = [
         { make: "Toyota", model: "Celica", price: 35000 },
         { make: "Ford", model: "Mondeo", price: 32000 },
@@ -184,6 +190,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType2 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows2 = [
         {
           id: "id-Toyota",
@@ -312,6 +328,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType3 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows3 = [
         {
           id: "",
@@ -425,14 +451,17 @@
             "The relationship between different car types and prices",
           opt1: {
             keys: keys1,
+            kpHeadFilterType: kpHeadFilterType1,
             rows: rows1
           },
           opt2: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2
           },
           opt3: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpHead: {
               id: "主鍵",
@@ -446,6 +475,7 @@
           },
           opt4: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             beforeAddRow: function(newRow) {
               newRow.id = "id-random-" + Math.random();
@@ -454,6 +484,7 @@
           },
           opt5: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpConvertKeysWhenUploadData: {
               makeTemp: "make",
@@ -473,6 +504,7 @@
           },
           opt7: {
             keys: keys3,
+            kpHeadFilterType: kpHeadFilterType3,
             rows: rows3,
             modifyDataWhenSave: function(rows) {
               console.log("modifyDataWhenSave", rows);

package/docs/examples/w-table-dyn_editable_no enableMenu.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.30/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.32/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -160,6 +160,12 @@
     vuetify: new Vuetify(),
     data: function() {
       let keys1 = ["make", "model", "price"];
+      let kpHeadFilterType1 = {
+        //default: num (num,text,time,set)
+        make: "text",
+        model: "text",
+        price: "num"
+      };
       let rows1 = [
         { make: "Toyota", model: "Celica", price: 35000 },
         { make: "Ford", model: "Mondeo", price: 32000 },
@@ -184,6 +190,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType2 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows2 = [
         {
           id: "id-Toyota",
@@ -312,6 +328,16 @@
         "price",
         "isActive"
       ];
+      let kpHeadFilterType3 = {
+        //default: num (num,text,time,set)
+        id: "text",
+        mappingId: "text",
+        order: "num",
+        make: "text",
+        model: "text",
+        price: "num",
+        isActive: "text"
+      };
       let rows3 = [
         {
           id: "",
@@ -425,14 +451,17 @@
             "The relationship between different car types and prices",
           opt1: {
             keys: keys1,
+            kpHeadFilterType: kpHeadFilterType1,
             rows: rows1
           },
           opt2: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2
           },
           opt3: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpHead: {
               id: "主鍵",
@@ -446,6 +475,7 @@
           },
           opt4: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             beforeAddRow: function(newRow) {
               newRow.id = "id-random-" + Math.random();
@@ -454,6 +484,7 @@
           },
           opt5: {
             keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
             rows: rows2,
             kpConvertKeysWhenUploadData: {
               makeTemp: "make",
@@ -473,6 +504,7 @@
           },
           opt7: {
             keys: keys3,
+            kpHeadFilterType: kpHeadFilterType3,
             rows: rows3,
             modifyDataWhenSave: function(rows) {
               console.log("modifyDataWhenSave", rows);