w-component-vue 2.1.69 → 2.1.73

package/src/AppZoneWGroupTags.vue

@@ -117,14 +117,14 @@
             <div class="bk" style="display:block;">
                 <demolink
                     :kbname="'w-group-tags'"
-                    :casename="'suggests & placeholder & searchEmpty'"
+                    :casename="'suggests & placeholder & noResultsText'"
                 ></demolink>
 
                 <w-group-tags
                     v-model="WGroupTags.strings"
                     :suggests="WGroupTags.suggests"
                     :placeholder="'請輸入關鍵字'"
-                    :searchEmpty="'無符合項目'"
+                    :noResultsText="'無符合項目'"
                 ></w-group-tags>
             </div>
 

package/src/AppZoneWJsonView.vue

@@ -22,21 +22,6 @@
             </div>
 
 
-            <div class="bk dz">
-                <demolink
-                    :kbname="'w-json-view'"
-                    :casename="'valueStyleBreakAll'"
-                ></demolink>
-
-                <w-json-view
-                    style="border:1px solid #ddd;"
-                    :valueStyleBreakAll="true"
-                    :data="WJsonView.data2"
-                ></w-json-view>
-
-            </div>
-
-
             <div class="bk dz">
                 <demolink
                     :kbname="'w-json-view'"
@@ -55,7 +40,7 @@
             <div class="bk dz">
                 <demolink
                     :kbname="'w-json-view'"
-                    :casename="'filterKeywords & searchEmpty'"
+                    :casename="'filterKeywords & noResultsText'"
                 ></demolink>
 
                 <div style="margin-bottom:10px;">
@@ -69,7 +54,7 @@
                 <w-json-view
                     style="border:1px solid #ddd;"
                     :filterKeywords="WJsonView.keywords"
-                    :searchEmpty="'There are no items to show...'"
+                    :noResultsText="'There are no items to show...'"
                     :data="WJsonView.data3"
                 ></w-json-view>
 
@@ -100,7 +85,7 @@
             <div class="bk" style="display:block; margin:0px 10px 0px 0px;">
                 <demolink
                     :kbname="'w-json-view'"
-                    :casename="'large data (100,000 lines)'"
+                    :casename="'large data (15,500 lines)'"
                 ></demolink>
 
                 <w-json-view
@@ -202,17 +187,20 @@ export default {
         return {
             'WJsonView': {
                 'keywords': 'pow ci uadn',
-                'data1': { 'squadName': 'Super hero squad', 'fun': function() {}, 'homeTown': 'Metro City', 'formed': 2016, 'secretBase': 'Super tower', 'active': true, 'arrayEmpth': [], 'members': [{ 'name': 'There are many variations of passages of Lorem Ipsum available', 'age': 29, 'secretIdentity': 'Dan Jukes', 'powers': ['Radiation resistance', 'Turning tiny', 'Radiation blast'] }, { 'name': 'Madame Uppercut', 'age': 39, 'secretIdentity': 'Jane Wilson', 'powers': ['Million tonne punch', 'Damage resistance', 'Superhuman reflexes'] }, { 'name': 'Eternal Flame', 'age': 1000000, 'secretIdentity': 'Unknown', 'powers': ['Immortality', 'Heat Immunity', 'Inferno', 'Teleportation', 'Interdimensional travel'] }] },
-                'data2': { 'cookie': 'username-localhost-8888="2|1:0|10:1624431350|23:username-localhost-8888|44:ZmMxYzkwOGI0ODYxNDY1M2ExY2VhOGE3MmFhNWE4M2Y=|f8840028a36433a4e69e67f7eae6d188994203da2f54fe8af55d3e815f5cad0f', 'fun': function() {}, 'homeTown': 'Metro City', 'formed': 2016, 'secretBase': 'Super tower', 'active': true, 'arrayEmpth': [], 'members': [{ 'name': 'There are many variations of passages of Lorem Ipsum available', 'age': 29, 'secretIdentity': 'Dan Jukes', 'powers': ['Radiation resistance', 'Turning tiny', 'Radiation blast'] }, { 'name': 'Madame Uppercut', 'age': 39, 'secretIdentity': 'Jane Wilson', 'powers': ['Million tonne punch', 'Damage resistance', 'Superhuman reflexes'] }, { 'name': 'Eternal Flame', 'age': 1000000, 'secretIdentity': 'Unknown', 'powers': ['Immortality', 'Heat Immunity', 'Inferno', 'Teleportation', 'Interdimensional travel'] }] },
-                'data3': ['squadName', 123, 45.678, 'Super hero squad', function() { }, { 'homeTown': 'Metro City', 'formed': 2016, 'powers': ['Immortality', 'Heat Immunity', 'Inferno', 'Teleportation', 'Interdimensional travel'], 'members': { 'name': 'Molecule Man', 'age': 29, 'secretIdentity': 'Dan Jukes' } }],
+                'data1': { 'squadName': 'Super hero squad', 'homeTown': 'Metro City', 'formed': 2016, 'secretBase': 'Super tower', 'active': true, 'arrayEmpth': [], 'members': [{ 'name': 'There are many variations of passages of Lorem Ipsum available', 'age': 29, 'secretIdentity': 'Dan Jukes', 'powers': ['Radiation resistance', 'Turning tiny', 'Radiation blast'] }, { 'name': 'Madame Uppercut', 'age': 39, 'secretIdentity': 'Jane Wilson', 'powers': ['Million tonne punch', 'Damage resistance', 'Superhuman reflexes'] }, { 'name': 'Eternal Flame', 'age': 1000000, 'secretIdentity': 'Unknown', 'powers': ['Immortality', 'Heat Immunity', 'Inferno', 'Teleportation', 'Interdimensional travel'] }] },
+                'data2': { 'cookie': 'username-localhost-8888="2|1:0|10:1624431350|23:username-localhost-8888|44:ZmMxYzkwOGI0ODYxNDY1M2ExY2VhOGE3MmFhNWE4M2Y=|f8840028a36433a4e69e67f7eae6d188994203da2f54fe8af55d3e815f5cad0f', 'homeTown': 'Metro City', 'formed': 2016, 'secretBase': 'Super tower', 'active': true, 'arrayEmpth': [], 'members': [{ 'name': 'There are many variations of passages of Lorem Ipsum available', 'age': 29, 'secretIdentity': 'Dan Jukes', 'powers': ['Radiation resistance', 'Turning tiny', 'Radiation blast'] }, { 'name': 'Madame Uppercut', 'age': 39, 'secretIdentity': 'Jane Wilson', 'powers': ['Million tonne punch', 'Damage resistance', 'Superhuman reflexes'] }, { 'name': 'Eternal Flame', 'age': 1000000, 'secretIdentity': 'Unknown', 'powers': ['Immortality', 'Heat Immunity', 'Inferno', 'Teleportation', 'Interdimensional travel'] }] },
+                'data3': ['squadName', 123, 45.678, 'Super hero squad', '[system::callfunc]abc', { 'homeTown': 'Metro City', 'formed': 2016, 'powers': ['Immortality', 'Heat Immunity', 'Inferno', 'Teleportation', 'Interdimensional travel'], 'members': { 'name': 'Molecule Man', 'age': 29, 'secretIdentity': 'Dan Jukes' } }],
                 'data4': (function(a) {
-                    a /= 200; a = Math.max(a, 1); let b = { ph1_a: 123, ph1_b: 45.67, ph1_c: '123.456', ph1_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph1_e: !0, ph1_g: function() {}, ph1_h: [], ph1_j: {}, ph1_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph1_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph1_z: { ph2_a: 123, ph2_b: 45.67, ph2_c: '123.456', ph2_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph2_e: !0, ph2_g: function() {}, ph2_h: [], ph2_j: {}, ph2_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph2_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph2_z: { ph3_a: 123, ph3_b: 45.67, ph3_c: '123.456', ph3_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph3_e: !0, ph3_g: function() {}, ph3_h: [], ph3_j: {}, ph3_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph3_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph3_z: { ph4_a: 123, ph4_b: 45.67, ph4_c: '123.456', ph4_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph4_e: !0, ph4_g: function() {}, ph4_h: [], ph4_j: {}, ph4_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph4_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph4_z: { ph5_a: 123, ph5_b: 45.67, ph5_c: '123.456', ph5_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph5_e: !0, ph5_f: !1, ph5_g: function() {}, ph5_h: [], ph5_j: {}, ph5_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, function() {}, { a: 321, b: 76.54, c: '654.321', d: '321 zyx' }] } } } } }; let c = []; for (let d = 0; d < a; d++)c.push(b); return c
-                })(100000), //9000000 100000 1000
+                    a /= 200; a = Math.max(a, 1); let b = { ph1_a: 123, ph1_b: 45.67, ph1_c: '123.456', ph1_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph1_e: !0, ph1_g: '[system::callfunc]abc', ph1_h: [], ph1_j: {}, ph1_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph1_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, '[system::callfunc]abc', { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph1_z: { ph2_a: 123, ph2_b: 45.67, ph2_c: '123.456', ph2_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph2_e: !0, ph2_g: '[system::callfunc]abc', ph2_h: [], ph2_j: {}, ph2_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph2_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, '[system::callfunc]abc', { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph2_z: { ph3_a: 123, ph3_b: 45.67, ph3_c: '123.456', ph3_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph3_e: !0, ph3_g: '[system::callfunc]abc', ph3_h: [], ph3_j: {}, ph3_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph3_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, '[system::callfunc]abc', { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph3_z: { ph4_a: 123, ph4_b: 45.67, ph4_c: '123.456', ph4_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph4_e: !0, ph4_g: '[system::callfunc]abc', ph4_h: [], ph4_j: {}, ph4_k: { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }, ph4_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, '[system::callfunc]abc', { a: 321, b: 76.54, c: '654.321', d: '321 zyx', e: !0, f: [], g: {} }], ph4_z: { ph5_a: 123, ph5_b: 45.67, ph5_c: '123.456', ph5_d: 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', ph5_e: !0, ph5_f: !1, ph5_g: '[system::callfunc]abc', ph5_h: [], ph5_j: {}, ph5_l: [123, 45.67, '123.456', 'Integer porttitor urna ultricies justo iaculis vulputate ac non neque. Etiam iaculis est quis urna consequat ornare. Suspendisse a augue sit amet urna tincidunt rhoncus sed non tellus. Mauris ultricies lectus sit amet tellus egestas, in interdum elit rhoncus. Nullam viverra lectus mattis felis semper, in vulputate lorem tincidunt. Suspendisse dapibus arcu id nunc blandit, ut egestas nisi pulvinar.', !0, !1, '[system::callfunc]abc', { a: 321, b: 76.54, c: '654.321', d: '321 zyx' }] } } } } }; let c = []; for (let d = 0; d < a; d++)c.push(b); return c
+                })(20000), //9000000 100000 50000 20000 10000 5000 1000 100 10
             },
             'actions': [
             ],
         }
     },
+    // mounted: function() {
+    //     console.log('WJsonView.data4', this.WJsonView.data4)
+    // },
     methods: {
     },
 }

package/src/AppZoneWPanelScrolly.vue

@@ -16,7 +16,6 @@
 
                 <w-panel-scrolly
                     style="width:240px; height:200px;"
-                    @scroll="scroll"
                 >
                     <table :style="WPanelScrolly.tableStyle"><tbody><tr><td :style="WPanelScrolly.tdStyle">11</td><td :style="WPanelScrolly.tdStyle">12</td><td :style="WPanelScrolly.tdStyle">13</td><td :style="WPanelScrolly.tdStyle">14</td></tr><tr><td :style="WPanelScrolly.tdStyle">21</td><td :style="WPanelScrolly.tdStyle">22</td><td :style="WPanelScrolly.tdStyle">23</td><td :style="WPanelScrolly.tdStyle">24</td></tr><tr><td :style="WPanelScrolly.tdStyle">31</td><td :style="WPanelScrolly.tdStyle">32</td><td :style="WPanelScrolly.tdStyle">33</td><td :style="WPanelScrolly.tdStyle">34</td></tr><tr><td :style="WPanelScrolly.tdStyle">41</td><td :style="WPanelScrolly.tdStyle">42</td><td :style="WPanelScrolly.tdStyle">43</td><td :style="WPanelScrolly.tdStyle">44</td></tr><tr><td :style="WPanelScrolly.tdStyle">51</td><td :style="WPanelScrolly.tdStyle">52</td><td :style="WPanelScrolly.tdStyle">53</td><td :style="WPanelScrolly.tdStyle">54</td></tr></tbody></table>
                 </w-panel-scrolly>
@@ -27,12 +26,16 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-panel-scrolly'"
-                    :casename="'scrollDelta'"
+                    :casename="'events'"
                 ></demolink>
 
                 <w-panel-scrolly
                     style="width:240px; height:200px;"
-                    :scrollDelta="200"
+                    @scroll="(msg)=>{getEvents('scroll',msg)}"
+                    @scroll-infor="(msg)=>{getEvents('scroll-infor',msg)}"
+                    @resize="(msg)=>{getEvents('resize',msg)}"
+                    @mutation="(msg)=>{getEvents('mutation',msg)}"
+                    @update:scrollTop="(msg)=>{getEvents('update:scrollTop',msg)}"
                 >
                     <table :style="WPanelScrolly.tableStyle"><tbody><tr><td :style="WPanelScrolly.tdStyle">11</td><td :style="WPanelScrolly.tdStyle">12</td><td :style="WPanelScrolly.tdStyle">13</td><td :style="WPanelScrolly.tdStyle">14</td></tr><tr><td :style="WPanelScrolly.tdStyle">21</td><td :style="WPanelScrolly.tdStyle">22</td><td :style="WPanelScrolly.tdStyle">23</td><td :style="WPanelScrolly.tdStyle">24</td></tr><tr><td :style="WPanelScrolly.tdStyle">31</td><td :style="WPanelScrolly.tdStyle">32</td><td :style="WPanelScrolly.tdStyle">33</td><td :style="WPanelScrolly.tdStyle">34</td></tr><tr><td :style="WPanelScrolly.tdStyle">41</td><td :style="WPanelScrolly.tdStyle">42</td><td :style="WPanelScrolly.tdStyle">43</td><td :style="WPanelScrolly.tdStyle">44</td></tr><tr><td :style="WPanelScrolly.tdStyle">51</td><td :style="WPanelScrolly.tdStyle">52</td><td :style="WPanelScrolly.tdStyle">53</td><td :style="WPanelScrolly.tdStyle">54</td></tr></tbody></table>
                 </w-panel-scrolly>
@@ -43,13 +46,13 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-panel-scrolly'"
-                    :casename="'barColor & barColorHover'"
+                    :casename="'barOpacity & barOpacityHover'"
                 ></demolink>
 
                 <w-panel-scrolly
                     style="width:240px; height:200px;"
-                    :barColor="'transparent'"
-                    :barColorHover="'rgba(0,0,0,0.2)'"
+                    :barOpacity="0"
+                    :barOpacityHover="0.8"
                 >
                     <table :style="WPanelScrolly.tableStyle"><tbody><tr><td :style="WPanelScrolly.tdStyle">11</td><td :style="WPanelScrolly.tdStyle">12</td><td :style="WPanelScrolly.tdStyle">13</td><td :style="WPanelScrolly.tdStyle">14</td></tr><tr><td :style="WPanelScrolly.tdStyle">21</td><td :style="WPanelScrolly.tdStyle">22</td><td :style="WPanelScrolly.tdStyle">23</td><td :style="WPanelScrolly.tdStyle">24</td></tr><tr><td :style="WPanelScrolly.tdStyle">31</td><td :style="WPanelScrolly.tdStyle">32</td><td :style="WPanelScrolly.tdStyle">33</td><td :style="WPanelScrolly.tdStyle">34</td></tr><tr><td :style="WPanelScrolly.tdStyle">41</td><td :style="WPanelScrolly.tdStyle">42</td><td :style="WPanelScrolly.tdStyle">43</td><td :style="WPanelScrolly.tdStyle">44</td></tr><tr><td :style="WPanelScrolly.tdStyle">51</td><td :style="WPanelScrolly.tdStyle">52</td><td :style="WPanelScrolly.tdStyle">53</td><td :style="WPanelScrolly.tdStyle">54</td></tr></tbody></table>
                 </w-panel-scrolly>
@@ -60,66 +63,15 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-panel-scrolly'"
-                    :casename="'barColor & barColorHover & barBackgroundColor & barBackgroundColorHover'"
+                    :casename="'scrollTop'"
                 ></demolink>
 
-                <w-panel-scrolly
-                    style="width:240px; height:200px;"
-                    :barColor="'rgba(250,255,255,0.4)'"
-                    :barColorHover="'rgba(250,255,255,0.8)'"
-                    :barBackgroundColor="'rgba(0,0,0,0.02)'"
-                    :barBackgroundColorHover="'rgba(0,0,0,0.04)'"
-                >
-                    <table :style="WPanelScrolly.tableStyle"><tbody><tr><td :style="WPanelScrolly.tdStyle">11</td><td :style="WPanelScrolly.tdStyle">12</td><td :style="WPanelScrolly.tdStyle">13</td><td :style="WPanelScrolly.tdStyle">14</td></tr><tr><td :style="WPanelScrolly.tdStyle">21</td><td :style="WPanelScrolly.tdStyle">22</td><td :style="WPanelScrolly.tdStyle">23</td><td :style="WPanelScrolly.tdStyle">24</td></tr><tr><td :style="WPanelScrolly.tdStyle">31</td><td :style="WPanelScrolly.tdStyle">32</td><td :style="WPanelScrolly.tdStyle">33</td><td :style="WPanelScrolly.tdStyle">34</td></tr><tr><td :style="WPanelScrolly.tdStyle">41</td><td :style="WPanelScrolly.tdStyle">42</td><td :style="WPanelScrolly.tdStyle">43</td><td :style="WPanelScrolly.tdStyle">44</td></tr><tr><td :style="WPanelScrolly.tdStyle">51</td><td :style="WPanelScrolly.tdStyle">52</td><td :style="WPanelScrolly.tdStyle">53</td><td :style="WPanelScrolly.tdStyle">54</td></tr></tbody></table>
-                </w-panel-scrolly>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-scrolly'"
-                    :casename="'barWidth'"
-                ></demolink>
-
-                <w-panel-scrolly
-                    style="width:240px; height:200px;"
-                    :barWidth="6"
-                >
-                    <table :style="WPanelScrolly.tableStyle"><tbody><tr><td :style="WPanelScrolly.tdStyle">11</td><td :style="WPanelScrolly.tdStyle">12</td><td :style="WPanelScrolly.tdStyle">13</td><td :style="WPanelScrolly.tdStyle">14</td></tr><tr><td :style="WPanelScrolly.tdStyle">21</td><td :style="WPanelScrolly.tdStyle">22</td><td :style="WPanelScrolly.tdStyle">23</td><td :style="WPanelScrolly.tdStyle">24</td></tr><tr><td :style="WPanelScrolly.tdStyle">31</td><td :style="WPanelScrolly.tdStyle">32</td><td :style="WPanelScrolly.tdStyle">33</td><td :style="WPanelScrolly.tdStyle">34</td></tr><tr><td :style="WPanelScrolly.tdStyle">41</td><td :style="WPanelScrolly.tdStyle">42</td><td :style="WPanelScrolly.tdStyle">43</td><td :style="WPanelScrolly.tdStyle">44</td></tr><tr><td :style="WPanelScrolly.tdStyle">51</td><td :style="WPanelScrolly.tdStyle">52</td><td :style="WPanelScrolly.tdStyle">53</td><td :style="WPanelScrolly.tdStyle">54</td></tr></tbody></table>
-                </w-panel-scrolly>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-scrolly'"
-                    :casename="'barHeightMin'"
-                ></demolink>
-
-                <w-panel-scrolly
-                    style="width:240px; height:200px;"
-                    :barHeightMin="20"
-                >
-                    <div style="height:10000px; background-image:linear-gradient(141deg, #4cc5f8 0%, #fae 75%);"></div>
-                </w-panel-scrolly>
-
-            </div>
-
-
-            <div class="bk">
-                <demolink
-                    :kbname="'w-panel-scrolly'"
-                    :casename="'ratio'"
-                ></demolink>
-
-                <div style="font-size:0.8rem; color:#aaa;">ratio: {{WPanelScrolly.ratio}}</div>
+                <div style="font-size:0.8rem; color:#aaa;">scrollTop: {{WPanelScrolly.scrollTop}}</div>
 
                 <w-panel-scrolly
                     style="width:240px; height:200px;"
-                    :ratio.sync="WPanelScrolly.ratio"
-                    @update:ratio="updateRatio"
+                    :scrollTop.sync="WPanelScrolly.scrollTop"
+                    @update:scrollTop="updateScrollTop"
                 >
                     <table :style="WPanelScrolly.tableStyle"><tbody><tr><td :style="WPanelScrolly.tdStyle">11</td><td :style="WPanelScrolly.tdStyle">12</td><td :style="WPanelScrolly.tdStyle">13</td><td :style="WPanelScrolly.tdStyle">14</td></tr><tr><td :style="WPanelScrolly.tdStyle">21</td><td :style="WPanelScrolly.tdStyle">22</td><td :style="WPanelScrolly.tdStyle">23</td><td :style="WPanelScrolly.tdStyle">24</td></tr><tr><td :style="WPanelScrolly.tdStyle">31</td><td :style="WPanelScrolly.tdStyle">32</td><td :style="WPanelScrolly.tdStyle">33</td><td :style="WPanelScrolly.tdStyle">34</td></tr><tr><td :style="WPanelScrolly.tdStyle">41</td><td :style="WPanelScrolly.tdStyle">42</td><td :style="WPanelScrolly.tdStyle">43</td><td :style="WPanelScrolly.tdStyle">44</td></tr><tr><td :style="WPanelScrolly.tdStyle">51</td><td :style="WPanelScrolly.tdStyle">52</td><td :style="WPanelScrolly.tdStyle">53</td><td :style="WPanelScrolly.tdStyle">54</td></tr></tbody></table>
                 </w-panel-scrolly>
@@ -150,18 +102,18 @@ export default {
             'WPanelScrolly': {
                 'tableStyle': 'border-collapse:collapse; background-image:linear-gradient(141deg, #4cc5f8 0%, #3fd8eb 75%);',
                 'tdStyle': 'padding:50px 22px; color:white; border:1px solid rgba(255,255,255,0.5); font-size:0.8rem;',
-                'ratio': 0.5,
+                'scrollTop': 100,
             },
             'actions': [
             ],
         }
     },
     methods: {
-        scroll: function(v) {
-            //console.log('scroll', v)
+        getEvents: function(evName, msg) {
+            console.log('getEvents', evName, msg)
         },
-        updateRatio: function(v) {
-            //console.log('updateRatio', v)
+        updateScrollTop: function(msg) {
+            console.log('updateScrollTop', msg)
         },
     },
 }

package/src/AppZoneWTextSuggest.vue

@@ -95,12 +95,12 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-text-suggest'"
-                    :casename="'searchEmpty'"
+                    :casename="'noResultsText'"
                 ></demolink>
 
                 <w-text-suggest
                     :items="WTextSuggest.objItems"
-                    :searchEmpty="'無有效項目'"
+                    :noResultsText="'無有效項目'"
                     v-model="WTextSuggest.objValue"
                 ></w-text-suggest>
             </div>
@@ -270,7 +270,7 @@
                     :leftIcon="mdiCheckUnderlineCircle"
                     :items="WTextSuggest.objItemsKeyText"
                     :keyText="'name'"
-                    :searchEmpty="'無有效項目'"
+                    :noResultsText="'無有效項目'"
                     v-model="WTextSuggest.objValueKeyText"
                 ></w-text-suggest>
             </div>
@@ -319,7 +319,7 @@
                 <w-text-suggest
                     :leftIcon="mdiCheckUnderlineCircle"
                     :items="WTextSuggest.objItemsLarge"
-                    :searchEmpty="'無有效項目'"
+                    :noResultsText="'無有效項目'"
                     v-model="WTextSuggest.objValueLarge"
                 ></w-text-suggest>
             </div>
@@ -582,7 +582,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-text-suggest'"
-                    :casename="'border & searchEmpty'"
+                    :casename="'border & noResultsText'"
                 ></demolink>
 
                 <w-text-suggest
@@ -592,7 +592,7 @@
                     :borderColorFocus="'orange darken-2'"
                     :backgroundColorFocus="'orange lighten-5'"
                     :items="WTextSuggest.objItems"
-                    :searchEmpty="'無有效項目'"
+                    :noResultsText="'無有效項目'"
                     v-model="WTextSuggest.objValue"
                 ></w-text-suggest>
             </div>
@@ -839,7 +839,7 @@
                     :leftIcon="mdiCheckUnderlineCircle"
                     :items="WTextSuggest.objItemsKeyText"
                     :keyText="'name'"
-                    :searchEmpty="'無有效項目'"
+                    :noResultsText="'無有效項目'"
                     v-model="WTextSuggest.objValueKeyText"
                 ></w-text-suggest>
             </div>
@@ -903,7 +903,7 @@
                     :backgroundColorFocus="'orange lighten-5'"
                     :leftIcon="mdiCheckUnderlineCircle"
                     :items="WTextSuggest.objItemsLarge"
-                    :searchEmpty="'無有效項目'"
+                    :noResultsText="'無有效項目'"
                     v-model="WTextSuggest.objValueLarge"
                 ></w-text-suggest>
             </div>

package/src/AppZoneWTree.vue

@@ -22,6 +22,37 @@
             </div>
 
 
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'iconHeight'"
+                ></demolink>
+
+                <w-tree
+                    style="border:1px solid #ddd;"
+                    :iconHeight="24"
+                    :data="WTree.option.items"
+                ></w-tree>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'iconHeight & defItemHeight'"
+                ></demolink>
+
+                <w-tree
+                    style="border:1px solid #ddd;"
+                    :iconHeight="24"
+                    :defItemHeight="24"
+                    :data="WTree.option.items"
+                ></w-tree>
+
+            </div>
+
+
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
@@ -52,6 +83,30 @@
             </div>
 
 
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'filterKeywords & noResultsText'"
+                ></demolink>
+
+                <div style="margin-bottom:10px;">
+                    <span style="padding-right:10px;">Search :</span>
+                    <input
+                        style="padding:2px 15px; color:#666; border:1px solid #fca; border-radius:30px; outline:none;"
+                        v-model="WTree.option.keywords"
+                    />
+                </div>
+
+                <w-tree
+                    style="border:1px solid #ddd;"
+                    :filterKeywords="WTree.option.keywords"
+                    :noResultsText="'There are no items to show...'"
+                    :data="WTree.option.items"
+                ></w-tree>
+
+            </div>
+
+
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
@@ -270,37 +325,6 @@
             </div>
 
 
-            <div class="bk dz">
-                <demolink
-                    :kbname="'w-tree'"
-                    :casename="'separatorColor'"
-                ></demolink>
-
-                <w-tree
-                    style="border:1px solid #ddd;"
-                    :separatorColor="'rgba(0,0,0,0.1)'"
-                    :data="WTree.option.items"
-                ></w-tree>
-
-            </div>
-
-
-            <div class="bk dz">
-                <demolink
-                    :kbname="'w-tree'"
-                    :casename="'separatorColor & separatorHeight'"
-                ></demolink>
-
-                <w-tree
-                    style="border:1px solid #ddd;"
-                    :separatorColor="'#f2f2f2'"
-                    :separatorHeight="4"
-                    :data="WTree.option.items"
-                ></w-tree>
-
-            </div>
-
-
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
@@ -394,13 +418,12 @@
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'slot & defItemHeight'"
+                    :casename="'slot'"
                 ></demolink>
 
                 <w-tree
                     style="border:1px solid #ddd;"
                     :data="WTree.option.items"
-                    :defItemHeight="62"
                 >
                     <template v-slot:item="props">
 
@@ -640,7 +663,7 @@
             <div class="bk" style="display:block; margin:0px 10px 0px 0px;">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'filterKeywords & searchEmpty & selectable'"
+                    :casename="'filterKeywords & noResultsText & selectable'"
                 ></demolink>
 
                 <div style="margin-bottom:10px;">
@@ -661,7 +684,7 @@
                             :selectable="true"
                             :selections.sync="WTree.option.selections"
                             :filterKeywords="WTree.option.keywords"
-                            :searchEmpty="'There are no items to show...'"
+                            :noResultsText="'There are no items to show...'"
                             @update:selections="changeSections"
                         >
                             <template v-slot:item="props">
@@ -838,7 +861,7 @@
             <div class="bk" style="display:block; margin:0px 10px 0px 0px;">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'selectable & large data (100,000 items)'"
+                    :casename="'slot & selectable & large data (100,000 items)'"
                 ></demolink>
 
                 <!-- 用:style才能支援IE11因vue會自動把overflow-x:auto轉為-ms-overflow-x:auto -->
@@ -853,7 +876,7 @@
                             @update:selections="changeSections"
                         >
                             <template v-slot:item="props">
-                                <div style="height:100%; display:flex; align-items:center;">
+                                <div style="display:flex; align-items:center; min-height:34px;">
                                     <div style="margin-right:5px;">
                                         {{props.data.text}}
                                     </div>

package/src/components/WComponentVue.vue

@@ -24,7 +24,6 @@ import WIconSvg from './WIconSvg.vue'
 import WImageCascadingDyn from './WImageCascadingDyn.vue'
 import WImageViewerDyn from './WImageViewerDyn.vue'
 import WJsonView from './WJsonView.vue'
-import WJsonViewCore from './WJsonViewCore.vue'
 import WLeafletVueDyn from './WLeafletVueDyn.vue'
 import WListVertical from './WListVertical.vue'
 import WListVerticalItem from './WListVerticalItem.vue'
@@ -94,7 +93,6 @@ let WComponentVue = {
         Vue.component('w-image-cascading-dyn', WImageCascadingDyn)
         Vue.component('w-image-viewer-dyn', WImageViewerDyn)
         Vue.component('w-json-view', WJsonView)
-        Vue.component('w-json-view-core', WJsonViewCore)
         Vue.component('w-leaflet-vue-dyn', WLeafletVueDyn)
         Vue.component('w-list-vertical', WListVertical)
         Vue.component('w-list-vertical-item', WListVerticalItem)