w-component-vue 2.2.2 → 2.2.5

package/docs/examples/w-tree_default.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.2/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.5/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -165,6 +165,9 @@
               { id: 18 }
               //勾選id:18會自動再加入id:19
             ],
+            activeItem: {
+              id: 4
+            },
             items: [
               {
                 id: 1,
@@ -562,18 +565,6 @@
           });
         return t;
       },
-      click: function(msg) {
-        console.log("click", msg);
-      },
-      changeSections: function(msg) {
-        console.log("changeSections", msg);
-      },
-      changeViewItems: function(msg) {
-        console.log("changeViewItems", msg);
-      },
-      changeHeightOfItems: function(msg) {
-        console.log("changeHeightOfItems", msg);
-      },
       mouseenter: function(msg) {
         console.log("mouseenter", msg);
         msg.ele.style.transition = "all 0.3s";
@@ -585,6 +576,28 @@
         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非陣列代表沒有所屬節點
+      },
+      changeSelections: function(msg) {
+        console.log("changeSelections", msg);
+      },
+      changeViewItems: function(msg) {
+        console.log("changeViewItems", msg);
+      },
+      changeHeightOfItems: function(msg) {
+        console.log("changeHeightOfItems", msg);
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 

package/docs/examples/w-tree_defaultDisplayLevel.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.2/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.5/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -169,6 +169,9 @@
               { id: 18 }
               //勾選id:18會自動再加入id:19
             ],
+            activeItem: {
+              id: 4
+            },
             items: [
               {
                 id: 1,
@@ -566,18 +569,6 @@
           });
         return t;
       },
-      click: function(msg) {
-        console.log("click", msg);
-      },
-      changeSections: function(msg) {
-        console.log("changeSections", msg);
-      },
-      changeViewItems: function(msg) {
-        console.log("changeViewItems", msg);
-      },
-      changeHeightOfItems: function(msg) {
-        console.log("changeHeightOfItems", msg);
-      },
       mouseenter: function(msg) {
         console.log("mouseenter", msg);
         msg.ele.style.transition = "all 0.3s";
@@ -589,6 +580,28 @@
         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非陣列代表沒有所屬節點
+      },
+      changeSelections: function(msg) {
+        console.log("changeSelections", msg);
+      },
+      changeViewItems: function(msg) {
+        console.log("changeViewItems", msg);
+      },
+      changeHeightOfItems: function(msg) {
+        console.log("changeHeightOfItems", msg);
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 

package/docs/examples/w-tree_draggable.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.2/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.5/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -173,6 +173,9 @@
               { id: 18 }
               //勾選id:18會自動再加入id:19
             ],
+            activeItem: {
+              id: 4
+            },
             items: [
               {
                 id: 1,
@@ -570,18 +573,6 @@
           });
         return t;
       },
-      click: function(msg) {
-        console.log("click", msg);
-      },
-      changeSections: function(msg) {
-        console.log("changeSections", msg);
-      },
-      changeViewItems: function(msg) {
-        console.log("changeViewItems", msg);
-      },
-      changeHeightOfItems: function(msg) {
-        console.log("changeHeightOfItems", msg);
-      },
       mouseenter: function(msg) {
         console.log("mouseenter", msg);
         msg.ele.style.transition = "all 0.3s";
@@ -593,6 +584,28 @@
         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非陣列代表沒有所屬節點
+      },
+      changeSelections: function(msg) {
+        console.log("changeSelections", msg);
+      },
+      changeViewItems: function(msg) {
+        console.log("changeViewItems", msg);
+      },
+      changeHeightOfItems: function(msg) {
+        console.log("changeHeightOfItems", msg);
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 

package/docs/examples/w-tree_draggable_dgInsertLineColor_dgInsertBackgroundColor_dgBelongBackgroundColor.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.2/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.5/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -178,6 +178,9 @@
               { id: 18 }
               //勾選id:18會自動再加入id:19
             ],
+            activeItem: {
+              id: 4
+            },
             items: [
               {
                 id: 1,
@@ -575,18 +578,6 @@
           });
         return t;
       },
-      click: function(msg) {
-        console.log("click", msg);
-      },
-      changeSections: function(msg) {
-        console.log("changeSections", msg);
-      },
-      changeViewItems: function(msg) {
-        console.log("changeViewItems", msg);
-      },
-      changeHeightOfItems: function(msg) {
-        console.log("changeHeightOfItems", msg);
-      },
       mouseenter: function(msg) {
         console.log("mouseenter", msg);
         msg.ele.style.transition = "all 0.3s";
@@ -598,6 +589,28 @@
         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非陣列代表沒有所屬節點
+      },
+      changeSelections: function(msg) {
+        console.log("changeSelections", msg);
+      },
+      changeViewItems: function(msg) {
+        console.log("changeViewItems", msg);
+      },
+      changeHeightOfItems: function(msg) {
+        console.log("changeHeightOfItems", msg);
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 

package/docs/examples/w-tree_draggable_dgPreviewOpacity_dgPreviewBorderWidth_dgBelongBackgroundColor.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.2/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.5/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -179,6 +179,9 @@
               { id: 18 }
               //勾選id:18會自動再加入id:19
             ],
+            activeItem: {
+              id: 4
+            },
             items: [
               {
                 id: 1,
@@ -576,18 +579,6 @@
           });
         return t;
       },
-      click: function(msg) {
-        console.log("click", msg);
-      },
-      changeSections: function(msg) {
-        console.log("changeSections", msg);
-      },
-      changeViewItems: function(msg) {
-        console.log("changeViewItems", msg);
-      },
-      changeHeightOfItems: function(msg) {
-        console.log("changeHeightOfItems", msg);
-      },
       mouseenter: function(msg) {
         console.log("mouseenter", msg);
         msg.ele.style.transition = "all 0.3s";
@@ -599,6 +590,28 @@
         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非陣列代表沒有所屬節點
+      },
+      changeSelections: function(msg) {
+        console.log("changeSelections", msg);
+      },
+      changeViewItems: function(msg) {
+        console.log("changeViewItems", msg);
+      },
+      changeHeightOfItems: function(msg) {
+        console.log("changeHeightOfItems", msg);
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 

package/docs/examples/w-tree_draggable_dgTextDisabled_dgTextDisabledColor_dgTextDisabledPaddingLeft.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.2/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.5/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -180,6 +180,9 @@
               { id: 18 }
               //勾選id:18會自動再加入id:19
             ],
+            activeItem: {
+              id: 4
+            },
             items: [
               {
                 id: 1,
@@ -577,18 +580,6 @@
           });
         return t;
       },
-      click: function(msg) {
-        console.log("click", msg);
-      },
-      changeSections: function(msg) {
-        console.log("changeSections", msg);
-      },
-      changeViewItems: function(msg) {
-        console.log("changeViewItems", msg);
-      },
-      changeHeightOfItems: function(msg) {
-        console.log("changeHeightOfItems", msg);
-      },
       mouseenter: function(msg) {
         console.log("mouseenter", msg);
         msg.ele.style.transition = "all 0.3s";
@@ -600,6 +591,28 @@
         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非陣列代表沒有所屬節點
+      },
+      changeSelections: function(msg) {
+        console.log("changeSelections", msg);
+      },
+      changeViewItems: function(msg) {
+        console.log("changeViewItems", msg);
+      },
+      changeHeightOfItems: function(msg) {
+        console.log("changeHeightOfItems", msg);
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 

package/docs/examples/w-tree_events.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.2/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.5/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -145,8 +145,12 @@
                 style="border:1px solid #ddd;"
                 :view-height-max="WTree.viewHeightMaxSync"
                 :data="WTree.option.items"
+                @mouseenter="mouseenter"
+                @mouseleave="mouseleave"
+                @click="click"
                 @change-view-items="changeViewItems"
                 @change-height-of-items="changeHeightOfItems"
+                @render="render"
             ></w-tree>
         </div>
     </v-app>
@@ -171,6 +175,9 @@
               { id: 18 }
               //勾選id:18會自動再加入id:19
             ],
+            activeItem: {
+              id: 4
+            },
             items: [
               {
                 id: 1,
@@ -568,18 +575,6 @@
           });
         return t;
       },
-      click: function(msg) {
-        console.log("click", msg);
-      },
-      changeSections: function(msg) {
-        console.log("changeSections", msg);
-      },
-      changeViewItems: function(msg) {
-        console.log("changeViewItems", msg);
-      },
-      changeHeightOfItems: function(msg) {
-        console.log("changeHeightOfItems", msg);
-      },
       mouseenter: function(msg) {
         console.log("mouseenter", msg);
         msg.ele.style.transition = "all 0.3s";
@@ -591,6 +586,28 @@
         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非陣列代表沒有所屬節點
+      },
+      changeSelections: function(msg) {
+        console.log("changeSelections", msg);
+      },
+      changeViewItems: function(msg) {
+        console.log("changeViewItems", msg);
+      },
+      changeHeightOfItems: function(msg) {
+        console.log("changeHeightOfItems", msg);
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 

package/docs/examples/w-tree_filterKeywords_noResultsText.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.2/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.5/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -178,6 +178,9 @@
               { id: 18 }
               //勾選id:18會自動再加入id:19
             ],
+            activeItem: {
+              id: 4
+            },
             items: [
               {
                 id: 1,
@@ -575,18 +578,6 @@
           });
         return t;
       },
-      click: function(msg) {
-        console.log("click", msg);
-      },
-      changeSections: function(msg) {
-        console.log("changeSections", msg);
-      },
-      changeViewItems: function(msg) {
-        console.log("changeViewItems", msg);
-      },
-      changeHeightOfItems: function(msg) {
-        console.log("changeHeightOfItems", msg);
-      },
       mouseenter: function(msg) {
         console.log("mouseenter", msg);
         msg.ele.style.transition = "all 0.3s";
@@ -598,6 +589,28 @@
         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非陣列代表沒有所屬節點
+      },
+      changeSelections: function(msg) {
+        console.log("changeSelections", msg);
+      },
+      changeViewItems: function(msg) {
+        console.log("changeViewItems", msg);
+      },
+      changeHeightOfItems: function(msg) {
+        console.log("changeHeightOfItems", msg);
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 

package/docs/examples/w-tree_filterKeywords_noResultsText_selectable.html

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.2/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.5/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -161,7 +161,7 @@
                         :selections.sync="WTree.option.selections"
                         :filter-keywords="WTree.option.keywords"
                         :no-results-text="'There are no items to show...'"
-                        @update:selections="changeSections"
+                        @update:selections="changeSelections"
                     >
                         <template v-slot:item="props">
                             <div style="display:flex;">
@@ -247,6 +247,9 @@
               { id: 18 }
               //勾選id:18會自動再加入id:19
             ],
+            activeItem: {
+              id: 4
+            },
             items: [
               {
                 id: 1,
@@ -644,18 +647,6 @@
           });
         return t;
       },
-      click: function(msg) {
-        console.log("click", msg);
-      },
-      changeSections: function(msg) {
-        console.log("changeSections", msg);
-      },
-      changeViewItems: function(msg) {
-        console.log("changeViewItems", msg);
-      },
-      changeHeightOfItems: function(msg) {
-        console.log("changeHeightOfItems", msg);
-      },
       mouseenter: function(msg) {
         console.log("mouseenter", msg);
         msg.ele.style.transition = "all 0.3s";
@@ -667,6 +658,28 @@
         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非陣列代表沒有所屬節點
+      },
+      changeSelections: function(msg) {
+        console.log("changeSelections", msg);
+      },
+      changeViewItems: function(msg) {
+        console.log("changeViewItems", msg);
+      },
+      changeHeightOfItems: function(msg) {
+        console.log("changeHeightOfItems", msg);
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);
 

package/docs/examples/{w-tree_iconHeight_defItemHeight.html → w-tree_iconSize(24)_defItemHeight(24).html}

@@ -85,7 +85,7 @@
     </script>
 
     <!-- w-component-vue -->
-    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.2/dist/w-component-vue.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/w-component-vue@2.2.5/dist/w-component-vue.umd.js"></script>
 
     <style>
   .v-application--wrap {
@@ -139,11 +139,11 @@
             >w-tree</span>
         </div>
         <div class="bk dz">
-            <div class="item">iconHeight &amp; defItemHeight</div>
+            <div class="item">iconSize(24) &amp; defItemHeight(24)</div>
 
             <w-tree
                 style="border:1px solid #ddd;"
-                :icon-height="24"
+                :icon-size="24"
                 :def-item-height="24"
                 :data="WTree.option.items"
             ></w-tree>
@@ -170,6 +170,9 @@
               { id: 18 }
               //勾選id:18會自動再加入id:19
             ],
+            activeItem: {
+              id: 4
+            },
             items: [
               {
                 id: 1,
@@ -567,18 +570,6 @@
           });
         return t;
       },
-      click: function(msg) {
-        console.log("click", msg);
-      },
-      changeSections: function(msg) {
-        console.log("changeSections", msg);
-      },
-      changeViewItems: function(msg) {
-        console.log("changeViewItems", msg);
-      },
-      changeHeightOfItems: function(msg) {
-        console.log("changeHeightOfItems", msg);
-      },
       mouseenter: function(msg) {
         console.log("mouseenter", msg);
         msg.ele.style.transition = "all 0.3s";
@@ -590,6 +581,28 @@
         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非陣列代表沒有所屬節點
+      },
+      changeSelections: function(msg) {
+        console.log("changeSelections", msg);
+      },
+      changeViewItems: function(msg) {
+        console.log("changeViewItems", msg);
+      },
+      changeHeightOfItems: function(msg) {
+        console.log("changeHeightOfItems", msg);
+      },
       clickOperateItem: function(msg) {
         console.log("clickOperateItem", msg);