npm - w-table-vue - Versions diffs - 1.0.0 - Mend

w-table-vue 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/.editorconfig +9 -0
package/.eslintignore +3 -0
package/.eslintrc.js +55 -0
package/.jsdoc +25 -0
package/LICENSE +21 -0
package/README.md +109 -0
package/SECURITY.md +5 -0
package/babel.config.js +16 -0
package/dist/w-table-vue.umd.js +7 -0
package/dist/w-table-vue.umd.js.map +1 -0
package/docs/examples/app.html +63 -0
package/docs/examples/app.umd.js +7 -0
package/docs/examples/app.umd.js.map +1 -0
package/docs/examples/w-table-edit_default.html +525 -0
package/docs/examples/w-table-edit_editable.html +528 -0
package/docs/examples/w-table-edit_editable_checkId.html +529 -0
package/docs/examples/w-table-edit_editable_checkId_opt.modifyDataWhenSave_save(call cmp. method).html +544 -0
package/docs/examples/w-table-edit_editable_checkId_successMsgFromAddRow_errorMsgFromAddRow.html +539 -0
package/docs/examples/w-table-edit_editable_inforPaddingStyle_menuBackgroundColor.html +534 -0
package/docs/examples/w-table-edit_editable_language_checkId_tooltipAddRow.html +540 -0
package/docs/examples/w-table-edit_editable_language_textLabelDataName_textPlaceholderDataName.html +535 -0
package/docs/examples/w-table-edit_editable_no enableInfor.html +529 -0
package/docs/examples/w-table-edit_editable_no enableMenu.html +529 -0
package/docs/examples/w-table-edit_editable_opt.beforeAddRow.html +528 -0
package/docs/examples/w-table-edit_editable_opt.kpConvertKeysWhenUploadData.html +528 -0
package/docs/examples/w-table-edit_editable_opt.optForUploadData.html +528 -0
package/docs/examples/w-table-edit_editable_slot btns-right.html +552 -0
package/docs/examples/w-table-edit_fixIds (fix id).html +529 -0
package/docs/examples/w-table-edit_hideIds (hide mappingId).html +529 -0
package/docs/examples/w-table-edit_name_description.html +527 -0
package/docs/examples/w-table-edit_no enableInfor.html +528 -0
package/docs/examples/w-table-edit_no enableMenu.html +528 -0
package/docs/examples/w-table-edit_opt.kpHead.html +527 -0
package/docs/examples/w-table-edit_removeIdsWhenDownload (remove id, mappingId, order, isActive).html +530 -0
package/docs/examples/w-table-edit_slot btns-left.html +551 -0
package/docs/examples/w-table-edit_slot btns-right.html +551 -0
package/docs/examples/w-table-edit_slot infor (name_description).html +544 -0
package/docs/examples/w-table-edit_sortColIds (sort by order).html +528 -0
package/docs/fonts/Montserrat/Montserrat-Bold.eot +0 -0
package/docs/fonts/Montserrat/Montserrat-Bold.ttf +0 -0
package/docs/fonts/Montserrat/Montserrat-Bold.woff +0 -0
package/docs/fonts/Montserrat/Montserrat-Bold.woff2 +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.eot +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.woff +0 -0
package/docs/fonts/Montserrat/Montserrat-Regular.woff2 +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.eot +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.svg +978 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.ttf +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.woff2 +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.eot +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.svg +1049 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.ttf +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff +0 -0
package/docs/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.woff2 +0 -0
package/docs/index.html +84 -0
package/docs/module-WTableEdit.html +1486 -0
package/docs/scripts/collapse.js +39 -0
package/docs/scripts/commonNav.js +28 -0
package/docs/scripts/linenumber.js +25 -0
package/docs/scripts/nav.js +12 -0
package/docs/scripts/polyfill.js +4 -0
package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
package/docs/scripts/prettify/lang-css.js +2 -0
package/docs/scripts/prettify/prettify.js +28 -0
package/docs/scripts/search.js +99 -0
package/docs/styles/jsdoc.css +776 -0
package/docs/styles/prettify.css +80 -0
package/package.json +66 -0
package/public/index.html +25 -0
package/script.txt +24 -0
package/src/App.vue +322 -0
package/src/AppZoneWTableEdit.vue +740 -0
package/src/components/WTableEdit.vue +1278 -0
package/src/components/WTableVue.vue +12 -0
package/src/components/demolink.vue +105 -0
package/src/main.js +8 -0
package/test/all.test.mjs +10 -0
package/toolg/addVersion.mjs +4 -0
package/toolg/cleanFolder.mjs +5 -0
package/toolg/cvCasename.mjs +43 -0
package/toolg/gDistApp.mjs +38 -0
package/toolg/gDistRollupComps.mjs +23 -0
package/toolg/gDocExams.mjs +47 -0
package/toolg/gExtractHtml.mjs +268 -0
package/toolg/gMergeComps.mjs +75 -0
package/toolg/modifyReadme.mjs +4 -0
package/vue.config.js +9 -0

package/docs/examples/w-table-edit_editable_slot btns-right.html ADDED Viewed

@@ -0,0 +1,552 @@
+<!doctype html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-tw">
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>w-table-vue</title>
+    <!-- @babel/polyfill -->
+    <script
+        nomodule
+        src="https://cdn.jsdelivr.net/npm/@babel/polyfill/dist/polyfill.min.js"
+    ></script>
+    <!-- vue -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
+    <!-- extractHtml已自動添加@babel/polyfill與vue -->
+    <!-- fontawesome -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css"
+        rel="stylesheet"
+    />
+    <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"
+        rel="stylesheet"
+    />
+    <!-- google, 各組件使用mdi/js故不需引用 -->
+    <link
+        _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
+        rel="stylesheet"
+    />
+    <link
+        _href="https://fonts.googleapis.com/css?family=Material+Icons"
+        rel="stylesheet"
+    />
+    <!-- xlsx, w-aggrid-vue的download與upload會使用 -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"
+    ></script>
+    <!-- ag-grid, ag-grid-vue無法被rollup編譯, 須由cdn引入, 且其依賴window.agGrid -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/ag-grid-community@31.3.4/dist/ag-grid-community.min.noStyle.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/ag-grid-vue@31.3.4/dist/ag-grid-vue.umd.min.js"
+    ></script>
+    <!-- w-table-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-table-vue@1.0.0/dist/w-table-vue.umd.js"></script>
+    <style>
+  .item {
+    /* 因item位於demolink, 提取各範例html後會刪除demolink, 故得額外補上 */
+    border-left: 3px solid #ffba75;
+    margin: 5px 5px 8px 0px;
+    padding: 3px 3px 5px 10px;
+    font-size: 0.9rem;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+  .head1 {
+    padding: 0px 0px 20px 0px;
+    font-size: 2.5rem;
+  }
+  .bkh {
+    /* 寬 */
+    padding: 20px;
+  }
+  @media screen and (max-width: 800px) {
+    /* 中 */
+    .bkh {
+      padding: 10px;
+    }
+  }
+  @media screen and (max-width: 400px) {
+    /* 窄 */
+    .bkh {
+      padding: 5px;
+    }
+  }
+  .bk {
+    /* 寬 */
+    display: inline-block;
+    vertical-align: top;
+    padding: 0px 80px 60px 0px;
+  }
+  @media screen and (max-width: 1000px) {
+    /* 中窄 */
+    .bk {
+      display: block;
+      padding: 0px 0px 50px 0px;
+    }
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <div id="app" class="bkh" style>
+        <div class="head1">
+            <span
+                style="cursor:pointer;"
+                title="open for copy link to view component"
+                onclick="window.open('//yuda-lyu.github.io/w-table-vue/examples/app.html?cmp='+this.innerText,'_blank')"
+            >w-table-edit</span>
+        </div>
+        <div class="bk">
+            <div class="item">editable &amp; slot btns-right</div>
+            <w-table-edit
+                style="width:600px; height:400px;"
+                :name="WTableEdit.name"
+                :description="WTableEdit.description"
+                :opt="WTableEdit.opt1"
+                :editable="true"
+                @success="evSuccess"
+                @error="evError"
+            >
+                <template v-slot:btns-right="props">
+                    <select
+                        style="padding:0px 10px; background:rgba(255,255,255,0.1); color:#666; font-size:0.7rem; border:1px solid rgba(0,0,0,0.3); border-radius:30px; outline:none;"
+                    >
+                        <option
+                            style="color:#666; font-size:0.7rem;"
+                            value="0"
+                        >Select Item</option>
+                        <option
+                            style="color:#666; font-size:0.7rem;"
+                            value="1"
+                        >Quisquam</option>
+                        <option
+                            style="color:#666; font-size:0.7rem;"
+                            value="2"
+                        >Dolorem</option>
+                        <option
+                            :style="`${props.editable?'color:#666;':'color:#aaa;'} font-size:0.7rem;`"
+                            value="3"
+                            :disabled="!props.editable"
+                        >Ipsum</option>
+                    </select>
+                </template>
+            </w-table-edit>
+        </div>
+    </div>
+    <script>
+  //install
+  Vue.use(window["w-table-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    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 },
+        { make: "Porsche", model: "Boxter", price: 72000 },
+        { make: "BMW", model: "Sedan", price: 66000 },
+        { make: "Nissan", model: "March", price: 61000 },
+        { make: "Lexus", model: "RX", price: 56000 },
+        { make: "Audi", model: "A6 Allroad", price: 45000 },
+        { make: "Mazda", model: "MX-5", price: 36000 },
+        { make: "Mercedes-Benz", model: "Cabriolet", price: 86000 },
+        { make: "Volkswagen", model: "Beetle", price: 68000 },
+        { make: "Honda", model: "City", price: 69000 },
+        { make: "Volvo", model: "S60", price: 71000 },
+        { make: "Subaru", model: "BRZ", price: 48000 }
+      ];
+      let keys2 = [
+        "id",
+        "mappingId",
+        "order",
+        "make",
+        "model",
+        "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",
+          mappingId: "car_table",
+          order: 0,
+          make: "Toyota",
+          model: "Celica",
+          price: 35000,
+          isActive: "y"
+        },
+        {
+          id: "id-Ford",
+          mappingId: "car_table",
+          order: 1,
+          make: "Ford",
+          model: "Mondeo",
+          price: 32000,
+          isActive: "y"
+        },
+        {
+          id: "id-Porsche",
+          mappingId: "car_table",
+          order: 2,
+          make: "Porsche",
+          model: "Boxter",
+          price: 72000,
+          isActive: "y"
+        },
+        {
+          id: "id-BMW",
+          mappingId: "car_table",
+          order: 11,
+          make: "BMW",
+          model: "Sedan",
+          price: 66000,
+          isActive: "y"
+        },
+        {
+          id: "id-Nissan",
+          mappingId: "car_table",
+          order: 8,
+          make: "Nissan",
+          model: "March",
+          price: 61000,
+          isActive: "y"
+        },
+        {
+          id: "id-Lexus",
+          mappingId: "car_table",
+          order: 4,
+          make: "Lexus",
+          model: "RX",
+          price: 56000,
+          isActive: "y"
+        },
+        {
+          id: "id-Audi",
+          mappingId: "car_table",
+          order: 5,
+          make: "Audi",
+          model: "A6 Allroad",
+          price: 45000,
+          isActive: "y"
+        },
+        {
+          id: "id-Mazda",
+          mappingId: "car_table",
+          order: 6,
+          make: "Mazda",
+          model: "MX-5",
+          price: 36000,
+          isActive: "y"
+        },
+        {
+          id: "id-Mercedes",
+          mappingId: "car_table",
+          order: 7,
+          make: "Mercedes-Benz",
+          model: "Cabriolet",
+          price: 86000,
+          isActive: "y"
+        },
+        {
+          id: "id-Volkswagen",
+          mappingId: "car_table",
+          order: 9,
+          make: "Volkswagen",
+          model: "Beetle",
+          price: 68000,
+          isActive: "y"
+        },
+        {
+          id: "id-Honda",
+          mappingId: "car_table",
+          order: 10,
+          make: "Honda",
+          model: "City",
+          price: 69000,
+          isActive: "y"
+        },
+        {
+          id: "id-Volvo",
+          mappingId: "car_table",
+          order: 12,
+          make: "Volvo",
+          model: "S60",
+          price: 71000,
+          isActive: "y"
+        },
+        {
+          id: "id-Subaru",
+          mappingId: "car_table",
+          order: 3,
+          make: "Subaru",
+          model: "BRZ",
+          price: 48000,
+          isActive: "y"
+        }
+      ];
+      let keys3 = [
+        "id",
+        "mappingId",
+        "order",
+        "make",
+        "model",
+        "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: "",
+          mappingId: "",
+          order: 0,
+          make: "Toyota",
+          model: "Celica",
+          price: 35000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 1,
+          make: "Ford",
+          model: "Mondeo",
+          price: 32000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 2,
+          make: "Porsche",
+          model: "Boxter",
+          price: 72000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 11,
+          make: "BMW",
+          model: "Sedan",
+          price: 66000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 8,
+          make: "Nissan",
+          model: "March",
+          price: 61000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 4,
+          make: "Lexus",
+          model: "RX",
+          price: 56000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 5,
+          make: "Audi",
+          model: "A6 Allroad",
+          price: 45000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 6,
+          make: "Mazda",
+          model: "MX-5",
+          price: 36000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 7,
+          make: "Mercedes-Benz",
+          model: "Cabriolet",
+          price: 86000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 9,
+          make: "Volkswagen",
+          model: "Beetle",
+          price: 68000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 10,
+          make: "Honda",
+          model: "City",
+          price: 69000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 12,
+          make: "Volvo",
+          model: "S60",
+          price: 71000
+        },
+        {
+          id: "",
+          mappingId: "",
+          order: 3,
+          make: "Subaru",
+          model: "BRZ",
+          price: 48000
+        }
+      ];
+      return {
+        WTableEdit: {
+          name: "Car Price",
+          description:
+            "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: "主鍵",
+              mappingId: "所屬主鍵",
+              order: "順序",
+              make: "Ecirp",
+              model: "Ledom",
+              price: "Ecirp",
+              isActive: "有效"
+            }
+          },
+          opt4: {
+            keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
+            rows: rows2,
+            beforeAddRow: function(newRow) {
+              newRow.id = "id-random-" + Math.random();
+              return newRow;
+            }
+          },
+          opt5: {
+            keys: keys2,
+            kpHeadFilterType: kpHeadFilterType2,
+            rows: rows2,
+            kpConvertKeysWhenUploadData: {
+              makeTemp: "make",
+              modelTemp: "model",
+              priceTemp: "price"
+            }
+          },
+          opt6: {
+            keys: keys2,
+            rows: rows2,
+            optForUploadData: {
+              //input for uploadData in w-aggrid-vue, https://github.com/yuda-lyu/w-aggrid-vue
+              beforeUpload: null,
+              parseSheetInd: 1 //取第2個sheet, 預設0(取第1個sheet)
+            }
+          },
+          opt7: {
+            keys: keys3,
+            kpHeadFilterType: kpHeadFilterType3,
+            rows: rows3,
+            modifyDataWhenSave: function(rows) {
+              console.log("modifyDataWhenSave", rows);
+              for (let k = 0; k < rows.length; k++) {
+                let v = rows[k];
+                v.id = "id-random-" + Math.random();
+                v.mappingId = "auto_car_table";
+                v.order = k;
+                v.isActive = "y";
+              }
+              return rows;
+            }
+          }
+        },
+        actions: []
+      };
+    },
+    mounted: function() {
+      return {};
+    },
+    computed: {},
+    methods: {
+      evSuccess: function(msg) {
+        console.log("evSuccess:", msg);
+      },
+      evError: function(msg) {
+        console.log("evError:", msg);
+      },
+      saveData: function() {
+        let data = this.$refs.table.save();
+        document.querySelector("#disp-save-data").innerHTML = JSON.stringify(
+          data,
+          null,
+          2
+        );
+        console.log("saveData:", data);
+      }
+    }
+  });
+    </script>
+</body>
+</html>