npm - w-component-vue - Versions diffs - 2.3.0 → 2.3.2 - Mend

w-component-vue 2.3.0 → 2.3.2

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

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

@@ -0,0 +1,700 @@
+<!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@5.15.4/css/all.min.css"
+        rel="stylesheet"
+    />
+    <!-- mdi, 各組件使用mdi/js會於轉單頁時改為mdi icon, 故需引用mdi/css -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/@mdi/font@7.2.96/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.20/res/data/dataAAPL.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataUSD2EUR.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataTemperature.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataHousePriceArea.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataFlare.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataRain.js"
+    ></script>
+    <script
+        src="https://cdn.jsdelivr.net/npm/w-demores@1.0.20/res/data/dataRainClip.js"
+    ></script>
+    <script>
+  //save in window
+  window.dataAAPL = dataAAPL;
+  window.dataUSD2EUR = dataUSD2EUR;
+  window.dataTemperature = dataTemperature;
+  window.dataHousePriceArea = dataHousePriceArea;
+  window.dataFlare = dataFlare;
+  window.dataRain = dataRain;
+  window.dataRainClip = dataRainClip;
+    </script>
+    <!-- w-component-vue -->
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.3.2/dist/w-component-vue.umd.js"></script>
+    <style>
+  .v-application--wrap {
+    /* width與max-width fix for IE11, 其外不能使用padding或margin避免失效 */
+    width: 100vw;
+    max-width: 100vw;
+    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 {
+    margin: 0px;
+    padding: 0px 0px 20px 0px;
+    font-size: 2.5rem;
+  }
+  .bk {
+    vertical-align: top;
+    padding: 10px 0px 60px 0px;
+  }
+  @media screen and (min-width: 1000px) {
+    /* 寬版 */
+    .bk {
+      display: inline-block;
+      margin: 0px 80px 0px 0px;
+    }
+  }
+    </style>
+</head>
+<body
+    style="font-family:'Microsoft JhengHei','Avenir','Helvetica'; padding:0px; margin:0px;"
+>
+    <v-app id="app" style="font-family:inherit; padding:0px 30px;">
+        <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"
+            >operatable &amp; operateItemIconForRename &amp; operateItemIconForInsertBefore &amp; operateItemIconForInsertChild &amp; operateItemIconForInsertAfter &amp; operateItemIconForDelete</div>
+            <div
+                style="margin-bottom:5px; color:#f26; font-size:0.8rem;"
+            >* Disable show and hide nodes when using operatable</div>
+            <w-tree
+                style="width:350px; border:1px solid #ddd;"
+                :data.sync="WTree.option.items"
+                :operatable="true"
+                :operate-item-icon-for-rename="'mdi-comment-edit-outline'"
+                :operate-item-icon-for-insert-before="'mdi-chevron-double-up'"
+                :operate-item-icon-for-insert-child="'mdi-chevron-double-right'"
+                :operate-item-icon-for-insert-after="'mdi-chevron-double-down'"
+                :operate-item-icon-for-delete="'mdi-delete-variant'"
+                @click-operate-item="clickOperateItem"
+            ></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: [
+              { 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() {
+      return {};
+    },
+    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);
+      },
+      filterFunction: function(item, kws) {
+        console.log("filterFunction", 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
+        vo.$refs.ref_toggleItemsByFun.toggleItemsByFun(rows => {
+          console.log("toggleItemsByFun rows", rows);
+          return {
+            row: rows[ind],
+            toUnfolding
+          };
+        });
+      },
+      toggleItemsAll: function(toUnfolding, toLevel) {
+        console.log("toggleItemsAll", toUnfolding, toLevel);
+        let vo = this;
+        //toggleItemsAll
+        vo.$refs.ref_toggleItemsAll.toggleItemsAll(toUnfolding, toLevel);
+      }
+    }
+  });
+    </script>
+</body>
+</html>