npm - w-component-vue - Versions diffs - 2.4.38 → 2.4.40 - Mend

w-component-vue 2.4.38 → 2.4.40

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 (1533) hide show

package/docs/examples/w-tree_filterByFun.html ADDED Viewed

@@ -0,0 +1,770 @@
+<!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-component-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 -->
+    <!-- vuetify -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.css"
+        rel="stylesheet"
+    />
+    <script
+        src="https://cdn.jsdelivr.net/npm/vuetify@2.6.14/dist/vuetify.min.js"
+    ></script>
+    <!-- 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"
+    />
+    <!-- data -->
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataAAPL.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataHousePriceArea.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataFlare.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRain.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataRainClip.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.27/res/data/dataCivilSoilCodeIcon.js"
+    ></script>
+    <!-- w-component-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.4.40/dist/w-component-vue.umd.js"></script>
+    <style>
+  .v-application--wrap {
+    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
+    width: 100svw;
+    max-width: 100svw;
+    font-family: inherit;
+    background: #fff;
+  }
+  /* 組件所須全域樣式 */
+  .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;
+    }
+  }
+  .cpitem {
+    transition: all 0.3s;
+    padding: 5px 15px;
+    cursor: pointer;
+  }
+  .cpitem-white {
+    background: #fff;
+  }
+  .cpitem-white:hover {
+    background: #eee;
+  }
+  .cpitem-black {
+    background: #333;
+  }
+  .cpitem-black:hover {
+    background: #555;
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <v-app id="app" class="bkh" style="font-family:inherit;">
+        <div class="head1">
+            <span
+                style="cursor:pointer;"
+                title="open for copy link to view component"
+                onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')"
+            >w-tree</span>
+        </div>
+        <div class="bk">
+            <div class="item">filterByFun</div>
+            <div>
+                <v-btn
+                    style="margin:0px 5px 5px 0px;"
+                    small
+                    @click="filterByFun('all')"
+                >display all</v-btn>
+                <v-btn
+                    style="margin:0px 5px 5px 0px;"
+                    small
+                    @click="filterByFun('abr')"
+                >filter by abr in text</v-btn>
+                <v-btn
+                    style="margin:0px 5px 5px 0px;"
+                    small
+                    @click="filterByFun('id=15')"
+                >filter by id=15</v-btn>
+            </div>
+            <w-tree
+                ref="ref_filterByFun"
+                style="width:350px; border:1px solid #ddd;"
+                :data="WTree.option.items"
+            ></w-tree>
+        </div>
+    </v-app>
+    <script>
+  //install
+  Vue.use(window["w-component-vue"]);
+  //initialize
+  new Vue({
+    el: "#app",
+    vuetify: new Vuetify(),
+    data: function() {
+      return {
+        WTree: {
+          viewHeightMaxSync: 400,
+          option: {
+            keywords: "abr care att",
+            // selections: [],
+            selections: [
+              { id: 5 },
+              { id: 9 },
+              { id: 18 }
+              //勾選id:18會自動再加入id:19
+            ],
+            itemActive: {
+              id: 4
+            },
+            items: [
+              {
+                id: 1,
+                text: "Satisfied customers",
+                //  text: 'Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi',
+                avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
+                children: [
+                  {
+                    id: 2,
+                    text: "Good food",
+                    icon: "fas fa-utensils",
+                    children: [
+                      {
+                        id: 3,
+                        text: "Quality ingredients",
+                        children: [
+                          {
+                            id: 4,
+                            text: "Character",
+                            key: "Genus",
+                            msg:
+                              "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                          },
+                          {
+                            id: 5,
+                            text: "Fabric",
+                            key: "Genus",
+                            msg:
+                              "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                          }
+                        ]
+                      },
+                      {
+                        id: 6,
+                        text: "Good recipe",
+                        key: "Family",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      }
+                    ]
+                  },
+                  {
+                    id: 7,
+                    text: "Good service",
+                    icon: "fas fa-concierge-bell",
+                    children: [
+                      {
+                        id: 8,
+                        text: "Prompt attention",
+                        key: "Order",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      },
+                      {
+                        id: 9,
+                        text: "Professional waiter",
+                        key: "Order",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      }
+                    ]
+                  },
+                  {
+                    id: 10,
+                    text: "Pleasant surroundings",
+                    icon: "fas fa-camera-retro",
+                    children: [
+                      {
+                        id: 11,
+                        text: "Happy atmosphere",
+                        key: "Class",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      },
+                      {
+                        id: 12,
+                        text: "Good table presentation",
+                        key: "Class",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      },
+                      {
+                        id: 13,
+                        text: "Pleasing decor",
+                        key: "Class",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                id: 14,
+                text: "Others customers",
+                avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
+                children: [
+                  {
+                    id: 15,
+                    text: "Conformance to requirements",
+                    key: "Phylum"
+                  },
+                  {
+                    id: 16,
+                    text: "Fitness for use",
+                    children: [
+                      {
+                        id: 17,
+                        text: "Refers",
+                        key: "Expanded",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      }
+                    ]
+                  },
+                  {
+                    id: 18,
+                    text: "Need to care",
+                    children: [
+                      {
+                        id: 19,
+                        text: "Models",
+                        key: "Disables",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          optionKeys: {
+            items: [
+              {
+                sid: "s1",
+                name: "Applications :",
+                packages: [
+                  { sid: "s2", name: "Calendar : app" },
+                  { sid: "s3", name: "Chrome : app" },
+                  { sid: "s4", name: "Webstorm : app" }
+                ]
+              },
+              {
+                sid: "s5",
+                name: "Documents :",
+                packages: [
+                  {
+                    sid: "s6",
+                    name: "vuetify :",
+                    packages: [
+                      {
+                        sid: "s7",
+                        name: "src :",
+                        packages: [
+                          { sid: "s8", name: "index : ts" },
+                          { sid: "s9", name: "bootstrap : ts" }
+                        ]
+                      }
+                    ]
+                  },
+                  {
+                    sid: "s10",
+                    name: "material2 :",
+                    packages: [
+                      {
+                        sid: "s11",
+                        name: "src :",
+                        packages: [
+                          { sid: "s12", name: "t-btn : ts" },
+                          { sid: "s13", name: "t-card : ts" },
+                          { sid: "s14", name: "t-window : ts" }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                sid: "s15",
+                name: "Downloads :",
+                packages: [
+                  { sid: "s16", name: "October : pdf" },
+                  { sid: "s17", name: "November : pdf" },
+                  { sid: "s18", name: "Tutorial : html" }
+                ]
+              },
+              {
+                sid: "s19",
+                name: "Videos :",
+                packages: [
+                  {
+                    sid: "s20",
+                    name: "Tutorials :",
+                    packages: [
+                      { sid: "s21", name: "Basic layouts : mp4" },
+                      { sid: "s22", name: "Advanced techniques : mp4" },
+                      { sid: "s23", name: "All about app : dir" }
+                    ]
+                  },
+                  { sid: "s24", name: "Intro : mov" },
+                  { sid: "s25", name: "Conference introduction : avi" }
+                ]
+              }
+            ]
+          },
+          optionLocked: {
+            selections: [
+              { id: 5 },
+              { id: 9 },
+              { id: 18 }
+              //勾選id:18會自動再加入id:19
+            ],
+            items: [
+              {
+                id: 1,
+                text: "Satisfied customers",
+                avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
+                children: [
+                  {
+                    id: 2,
+                    locked: true,
+                    text: "Good food",
+                    icon: "fas fa-utensils",
+                    children: [
+                      {
+                        id: 3,
+                        text: "Quality ingredients",
+                        children: [
+                          {
+                            id: 4,
+                            locked: true,
+                            text: "Character",
+                            key: "Genus",
+                            msg:
+                              "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                          },
+                          {
+                            id: 5,
+                            text: "Fabric",
+                            key: "Genus",
+                            msg:
+                              "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                          }
+                        ]
+                      },
+                      {
+                        id: 6,
+                        text: "Good recipe",
+                        key: "Family",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      }
+                    ]
+                  },
+                  {
+                    id: 7,
+                    text: "Good service",
+                    icon: "fas fa-concierge-bell",
+                    children: [
+                      {
+                        id: 8,
+                        text: "Prompt attention",
+                        key: "Order",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      },
+                      {
+                        id: 9,
+                        text: "Professional waiter",
+                        key: "Order",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      }
+                    ]
+                  },
+                  {
+                    id: 10,
+                    text: "Pleasant surroundings",
+                    icon: "fas fa-camera-retro",
+                    children: [
+                      {
+                        id: 11,
+                        text: "Happy atmosphere",
+                        key: "Class",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      },
+                      {
+                        id: 12,
+                        text: "Good table presentation",
+                        key: "Class",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      },
+                      {
+                        id: 13,
+                        text: "Pleasing decor",
+                        key: "Class",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                id: 14,
+                text: "Others customers",
+                avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
+                children: [
+                  {
+                    id: 15,
+                    text: "Conformance to requirements",
+                    key: "Phylum"
+                  },
+                  {
+                    id: 16,
+                    text: "Fitness for use",
+                    children: [
+                      {
+                        id: 17,
+                        text: "Refers",
+                        key: "Expanded",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      }
+                    ]
+                  },
+                  {
+                    id: 18,
+                    text: "Need to care",
+                    children: [
+                      {
+                        id: 19,
+                        text: "Models",
+                        key: "Disables",
+                        msg:
+                          "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero."
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          optionLarge: {
+            selections: [],
+            items: (function(n) {
+              n /= 20;
+              let msg =
+                "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.";
+              let cItems =
+                '{"id":"{n+1}","text":"Satisfied customers","avatar":"https://cdn.vuetifyjs.com/images/lists/1.jpg","children":[{"id":"{n+2}","text":"Good food","icon":"fas fa-utensils","children":[{"id":"{n+3}","text":"Quality ingredients","children":[{"id":"{n+4}","text":"Character","key":"Genus","msg":"{msg}"},{"id":"{n+5}","text":"Fabric","key":"Genus","msg":"{msg}"}]},{"id":"{n+6}","text":"Good recipe","key":"Family","msg":"{msg}"}]},{"id":"{n+7}","text":"Good service","icon":"fas fa-concierge-bell","children":[{"id":"{n+8}","text":"Prompt attention","key":"Order","msg":"{msg}"},{"id":"{n+9}","text":"Professional waiter","key":"Order","children":[{"id":"{n+10}","text":"Others customers","avatar":"https://cdn.vuetifyjs.com/images/lists/2.jpg","children":[{"id":"{n+11}","text":"Conformance to requirements","key":"Phylum"},{"id":"{n+12}","text":"Fitness for use","children":[{"id":"{n+13}","text":"Refers","key":"Expanded","msg":"{msg}"}]},{"id":"{n+14}","text":"Need to care","children":[{"id":"{n+15}","text":"Models","key":"Disables","msg":"{msg}"}]}]}]}]},{"id":"{n+16}","text":"Pleasant surroundings","icon":"fas fa-camera-retro","children":[{"id":"{n+17}","text":"Happy atmosphere","key":"Class","msg":"{msg}"},{"id":"{n+18}","text":"Good table presentation","key":"Class","msg":"{msg}"},{"id":"{n+19}","text":"Pleasing decor","key":"Class","msg":"{msg}"},{"id":"{n+20}","text":"Special experience","key":"Class","msg":"{msg}"}]}]}';
+              function getOneObj(j) {
+                let t = cItems;
+                t = t.replace(new RegExp("{msg}", "g"), msg);
+                for (let i = 1; i <= 20; i++) {
+                  t = t.replace("{n+".concat(i, "}"), "".concat(j + i));
+                }
+                return JSON.parse(t);
+              }
+              let rs = [];
+              for (let j = 0; j < n; j++) {
+                let r = getOneObj(j * 20);
+                rs.push(r);
+              }
+              return rs;
+            })(100000) //1000000, 100000, 1000
+          }
+        },
+        actions: []
+      };
+    },
+    mounted: function() {
+      let vo = this;
+      // setTimeout(() => {
+      //     vo.WTree.option.selections = [
+      //         { 'id': 5 },
+      //         { 'id': 9 },
+      //         { 'id': 18 },
+      //     ]
+      //     console.log('vo.WTree.option.items', vo.WTree.option.items)
+      //     console.log('vo.WTree.option.selections', vo.WTree.option.selections)
+      // }, 2000)
+    },
+    computed: {},
+    methods: {
+      showSelection: function(selections) {
+        let ss = {};
+        for (let i = 0; i < selections.length; i++) {
+          let s = JSON.parse(JSON.stringify(selections[i]));
+          delete s.msg;
+          let id = parseInt(s.id, 10); //原本為字串, 轉成整數
+          ss[id] = s;
+        }
+        let t = [];
+        Object.keys(ss)
+          .sort(function(a, b) {
+            return a - b;
+          })
+          .forEach(function(key) {
+            t.push(ss[key]);
+          });
+        return t;
+      },
+      mouseenter: function(msg) {
+        console.log("mouseenter", msg);
+        msg.ele.style.transition = "all 0.3s";
+        msg.ele.style.background = "#f0f0f0";
+        //msg.ele.style.color = '#fff'
+      },
+      mouseleave: function(msg) {
+        console.log("mouseleave", msg);
+        msg.ele.style.background = "rgba(255, 255, 255, 0)";
+        //msg.ele.style.color = 'black'
+      },
+      click: function(msg) {
+        console.log("click", msg);
+      },
+      render: function(msg) {
+        console.log("render", msg);
+      },
+      clickActive: function(msg) {
+        console.log("clickActive", msg);
+      },
+      funActive: function(msg) {
+        console.log("funActive", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
+      changeData: function(msg) {
+        console.log("changeData", msg);
+      },
+      changeSelections: function(msg) {
+        console.log("changeSelections", msg);
+      },
+      changeViewItems: function(msg) {
+        console.log("changeViewItems", msg);
+      },
+      changeHeightOfItems: function(msg) {
+        console.log("changeHeightOfItems", msg);
+      },
+      changeItem: function(msg) {
+        console.log("changeItem", msg);
+      },
+      funOperateItem: function(msg) {
+        console.log("funOperateItem", msg);
+        return !Array.isArray(msg.item.children); //children非陣列代表沒有所屬節點
+      },
+      clickOperateItem: function(msg) {
+        console.log("clickOperateItem", msg);
+        //fun, 僅處理並回傳新項目, 不處理其他項目
+        let fun = function() {
+          return new Promise(function(resolve, reject) {
+            let id = Math.floor(Math.random() * 1000);
+            let text = "node-" + id; //msg.rowItem.row.item.text + '-' + msg.opItem.key
+            let dataNew = {
+              id,
+              text
+            };
+            resolve(dataNew);
+          });
+        };
+        //targetInd
+        let targetInd = msg.rowItem.index;
+        //operateItem
+        msg.operateItem(targetInd, msg.opItem.key, fun);
+      },
+      modifyText: function(msg) {
+        console.log("modifyText", msg);
+        //setDataByPathAndValue
+        let setDataByPathAndValue = msg.props.setDataByPathAndValue;
+        //path add keyText
+        let path = msg.props.data.nk;
+        path.push(msg.props.keyText);
+        //value
+        let value = msg.value;
+        //data
+        let data = msg.data;
+        //setDataByPathAndValue
+        setDataByPathAndValue(data, path, value);
+      },
+      funFilter: function(item, kws) {
+        console.log("funFilter", item, kws);
+        let c = item.text.toLowerCase();
+        let b = false;
+        for (let i = 0; i < kws.length; i++) {
+          let kw = kws[i];
+          b = b || c.indexOf(kw) >= 0;
+        }
+        return b;
+      },
+      toggleItemsByFun: function(ind, toUnfolding) {
+        console.log("toggleItemsByFun", ind, toUnfolding);
+        let vo = this;
+        //toggleItemsByFun
+        let cb = rows => {
+          console.log("toggleItemsByFun cb rows", rows);
+          return {
+            row: rows[ind],
+            toUnfolding
+          };
+        };
+        vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(cb);
+      },
+      toggleItemsAll: function(toUnfolding, toLevel) {
+        console.log("toggleItemsAll", toUnfolding, toLevel);
+        let vo = this;
+        //toggleItemsAll
+        vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding, toLevel);
+      },
+      filterByFun: function(mode) {
+        console.log("filterByFun", mode);
+        let vo = this;
+        //filterByFun
+        let cb = async item => {
+          console.log("filterByFun cb item", item);
+          if (mode === "all") {
+            return true;
+          } else if (mode.indexOf("id=") >= 0) {
+            let id = mode.replace("id=", "");
+            id = parseInt(id);
+            return item.id === id;
+          } else {
+            return item.text.indexOf(mode) >= 0;
+          }
+        };
+        vo.$refs.ref_filterByFun.filterByFun(cb);
+      }
+    }
+  });
+    </script>
+</body>
+</html>