w-component-vue 2.1.69 → 2.1.70

package/src/AppZoneWDynamicList.vue

@@ -70,65 +70,6 @@
             </div>
 
 
-            <div class="bk dz">
-                <demolink
-                    :kbname="'w-dynamic-list'"
-                    :casename="'separatorColor'"
-                ></demolink>
-
-                <w-dynamic-list
-                    style="border:1px solid #ddd;"
-                    :rows="WDynamicList.data1"
-                    :separatorColor="'rgba(0,0,0,0.1)'"
-                >
-                    <template v-slot="props">
-
-                        <div style="display:flex; align-items:flex-start; padding:5px 15px;">
-
-                            <div style="color:#f26;">{{props.index+1}}</div>
-
-                            <div style="padding-right:10px;">:</div>
-
-                            <div style="color:#999;">{{props.row}}</div>
-
-                        </div>
-
-                    </template>
-                </w-dynamic-list>
-
-            </div>
-
-
-            <div class="bk dz">
-                <demolink
-                    :kbname="'w-dynamic-list'"
-                    :casename="'separatorColor & separatorHeight'"
-                ></demolink>
-
-                <w-dynamic-list
-                    style="border:1px solid #ddd;"
-                    :rows="WDynamicList.data1"
-                    :separatorColor="'rgba(255, 150, 200, 0.1)'"
-                    :separatorHeight="8"
-                >
-                    <template v-slot="props">
-
-                        <div style="display:flex; align-items:flex-start; padding:5px 15px; background:#222;">
-
-                            <div style="color:#f26;">{{props.index+1}}</div>
-
-                            <div style="padding-right:10px;">:</div>
-
-                            <div style="color:#999;">{{props.row}}</div>
-
-                        </div>
-
-                    </template>
-                </w-dynamic-list>
-
-            </div>
-
-
             <div class="bk dz">
                 <demolink
                     :kbname="'w-dynamic-list'"
@@ -209,7 +150,7 @@
             <div class="bk dz">
                 <demolink
                     :kbname="'w-dynamic-list'"
-                    :casename="'filterKeywords & searchEmpty'"
+                    :casename="'filterKeywords & noResultsText'"
                 ></demolink>
 
                 <div style="margin-bottom:10px;">
@@ -223,7 +164,7 @@
                 <w-dynamic-list
                     style="border:1px solid #ddd;"
                     :filterKeywords="WDynamicList.keywords"
-                    :searchEmpty="'There are no items to show...'"
+                    :noResultsText="'There are no items to show...'"
                     :rows="WDynamicList.data1"
                 >
                     <template v-slot="props">
@@ -285,20 +226,20 @@
                 >
                     <template v-slot="props">
 
-                        <div style="padding:15px;">
+                        <div style="display:flex; padding:15px;">
 
-                            <div style="display:table-cell; vertical-align:top; padding:5px 20px 0px 0px;">
+                            <div style="padding:5px 20px 0px 0px; max-height:53px;">
                                 <img style="border-radius:50%; width:48px; height:48px;" :src="props.row.avatar" alt="avatar" />
                             </div>
 
-                            <div style="display:table-cell; vertical-align:top;">
+                            <div style="width:100%;">
 
-                                <div style="margin-bottom:5px;">
-                                    <div style="display:inline-block; vertical-align:middle; padding:1px 9px; color:#fff; background-color:#f26; border-radius:10px; font-size:0.6rem;">{{props.index+1}}</div>
-                                    <div style="display:inline-block; vertical-align:middle; font-size:1.1rem; margin-left:7px;">{{props.row.name}}</div>
+                                <div style="padding-bottom:5px;">
+                                    <div style="display:inline-block; vertical-align:middle; padding:1px 9px; color:#fff; background-color:#f26; border-radius:10px; font-size:10px; line-height:14px;">{{props.index+1}}</div>
+                                    <div style="display:inline-block; vertical-align:middle; font-size:14px; line-height:14px; padding-left:7px;">{{props.row.name}}</div>
                                 </div>
 
-                                <div style="font-size:0.8rem; color:#999;">{{props.row.msg}}</div>
+                                <div style="font-size:12px; color:#999;">{{props.row.msg}}</div>
 
                             </div>
 
@@ -328,20 +269,20 @@
                 >
                     <template v-slot="props">
 
-                        <div style="padding:15px;">
+                        <div style="display:flex; padding:15px;">
 
-                            <div style="display:table-cell; vertical-align:top; padding:5px 20px 0px 0px;">
+                            <div style="padding:5px 20px 0px 0px; max-height:53px;">
                                 <img style="border-radius:50%; width:48px; height:48px;" :src="props.row.avatar" alt="avatar" />
                             </div>
 
-                            <div style="display:table-cell; vertical-align:top;">
+                            <div style="width:100%;">
 
-                                <div style="margin-bottom:5px;">
-                                    <div style="display:inline-block; vertical-align:middle; padding:1px 9px; color:#fff; background-color:#f26; border-radius:10px; font-size:0.6rem;">{{props.index+1}}</div>
-                                    <div style="display:inline-block; vertical-align:middle; font-size:1.1rem; margin-left:7px;">{{props.row.name}}</div>
+                                <div style="padding-bottom:5px;">
+                                    <div style="display:inline-block; vertical-align:middle; padding:1px 9px; color:#fff; background-color:#f26; border-radius:10px; font-size:10px; line-height:14px;">{{props.index+1}}</div>
+                                    <div style="display:inline-block; vertical-align:middle; font-size:14px; line-height:14px; padding-left:7px;">{{props.row.name}}</div>
                                 </div>
 
-                                <div style="font-size:0.8rem; color:#999;">{{props.row.msg}}</div>
+                                <div style="font-size:12px; color:#999;">{{props.row.msg}}</div>
 
                             </div>
 
@@ -365,20 +306,20 @@
                 >
                     <template v-slot="props">
 
-                        <div style="padding:15px;">
+                        <div style="display:flex; padding:15px;">
 
-                            <div style="display:table-cell; vertical-align:top; padding:5px 20px 0px 0px;">
+                            <div style="padding:5px 20px 0px 0px; max-height:53px;">
                                 <img style="border-radius:50%; width:48px; height:48px;" :src="props.row.avatar" alt="avatar" />
                             </div>
 
-                            <div style="display:table-cell; vertical-align:top;">
+                            <div style="width:100%;">
 
-                                <div style="margin-bottom:5px;">
-                                    <div style="display:inline-block; vertical-align:middle; padding:1px 9px; color:#fff; background-color:#f26; border-radius:10px; font-size:0.6rem;">{{props.index+1}}</div>
-                                    <div style="display:inline-block; vertical-align:middle; font-size:1.1rem; margin-left:7px;">{{props.row.name}}</div>
+                                <div style="padding-bottom:5px;">
+                                    <div style="display:inline-block; vertical-align:middle; padding:1px 9px; color:#fff; background-color:#f26; border-radius:10px; font-size:10px; line-height:14px;">{{props.index+1}}</div>
+                                    <div style="display:inline-block; vertical-align:middle; font-size:14px; line-height:14px; padding-left:7px;">{{props.row.name}}</div>
                                 </div>
 
-                                <div style="font-size:0.8rem; color:#999;">{{props.row.msg}}</div>
+                                <div style="font-size:12px; color:#999;">{{props.row.msg}}</div>
 
                             </div>
 
@@ -485,7 +426,7 @@ export default {
                 })(100),
                 'data5': (function(a) {
                     a /= 5; let b = [{ name: 'Jason Oner', msg: 'Boost campaign performance by targeting specific user groups.', avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg' }, { name: 'Travis Howard', msg: 'Determine the exact users you\'d like to target with a message or an experiment, based on behavioral data, like watching a video, or abandoning a cart, and demographic data, like age or location.', avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg' }, { name: 'Ali Connors', msg: '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. Examine trends in the movement of guns across different states. Code of Federal Regulations - Alcohol, Tobacco Products and Firearms 1980-2014 November General Election Turnout and Registration. Reported Voting and Registration, by Sex and Single Years of Age: November 2016. Map felon disenfranchisement patterns by state.', avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg' }, { name: 'Cindy Baker', msg: 'Easily build highly personalized messages, and test multiple versions to see what works\u2014all in Mixpanel, no code required.', avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg' }, { name: 'Deborah Lee', msg: 'Set detailed behavioral triggers, sequences, and rate limits for messages, to ensure that each campaign is relevant, timely, and delivered at the right pace.', avatar: 'https://cdn.vuetifyjs.com/images/lists/5.jpg' }]; let c = []; for (let d = 0; d < a; d++) for (let a = 0; a < b.length; a++)c.push(b[a]); return c
-                })(1000000), //20000000 1000000 1000
+                })(1000000), //20000000 1000000 500000 100000 50000 1000
             },
             'actions': [
             ],

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>