w-component-vue 2.2.15 → 2.2.18

package/docs/module-WTextSelect.html

@@ -434,7 +434,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextSuggest.html

@@ -464,7 +464,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextSuggestCore.html

@@ -368,7 +368,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTextarea.html

@@ -218,7 +218,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeday.html

@@ -332,7 +332,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayCore.html

@@ -230,7 +230,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRange.html

@@ -338,7 +338,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimedayRangeCore.html

@@ -242,7 +242,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminute.html

@@ -368,7 +368,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteCore.html

@@ -272,7 +272,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRange.html

@@ -380,7 +380,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTimeminuteRangeCore.html

@@ -284,7 +284,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTinymceVueDyn.html

@@ -224,7 +224,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTree.html

@@ -266,7 +266,7 @@
         <td>function</td>
         <td><code>null</code></td>
         <td>No</td>
-        <td>輸入過濾時呼叫處理函數，傳入為各項目物件資料，回傳布林值代表項目內是否含有關鍵字，預設null</td>
+        <td>輸入過濾時呼叫處理函數，可使用sync或async函數，傳入為各項目物件資料，若為sync函數回傳布林值，若為async函數等待resolve結果為布林值，代表項目內是否含有關鍵字，預設null</td>
     </tr><tr>
         <td><code>loadingText</code></td>
         <td>String</td>
@@ -626,7 +626,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconCheckbox.html

@@ -248,7 +248,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/module-WTreeIconToggle.html

@@ -224,7 +224,7 @@
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:16 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:33 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/docs/vuetifyColor.mjs.html

@@ -144,7 +144,7 @@ export default color2hex
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Wed May 04 2022 19:31:15 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.10</a> on Sun May 08 2022 21:49:32 GMT+0800 (台北標準時間) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "w-component-vue",
-  "version": "2.2.15",
+  "version": "2.2.18",
   "main": "dist/w-component-vue.umd.js",
   "dependencies": {
     "@mdi/js": "^6.6.96",

package/src/AppZoneWDrawer.vue

@@ -417,8 +417,9 @@
                 >
 
                     <template v-slot:drawer>
+                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                         <w-list-vertical
-                            style="height:100%;"
+                            style="height:100%; background:#fff;"
                             :items="WDrawer.listItems"
                             :itemActive.sync="WDrawer.listItemActive"
                         ></w-list-vertical>
@@ -454,8 +455,9 @@
                 >
 
                     <template v-slot:drawer>
+                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                         <w-list-vertical
-                            style="height:100%;"
+                            style="height:100%; background:#fff;"
                             :items="WDrawer.listItems"
                             :itemActive.sync="WDrawer.listItemActive"
                         ></w-list-vertical>
@@ -491,8 +493,9 @@
                 >
 
                     <template v-slot:drawer>
+                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                         <w-list-vertical
-                            style="height:100%;"
+                            style="height:100%; background:#fff;"
                             :items="WDrawer.listItems"
                             :itemActive.sync="WDrawer.listItemActive"
                         ></w-list-vertical>
@@ -528,8 +531,9 @@
                 >
 
                     <template v-slot:drawer>
+                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                         <w-list-vertical
-                            style="height:100%;"
+                            style="height:100%; background:#fff;"
                             :items="WDrawer.listItems"
                             :itemActive.sync="WDrawer.listItemActive"
                         ></w-list-vertical>
@@ -566,8 +570,9 @@
                 >
 
                     <template v-slot:drawer>
+                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                         <w-list-vertical
-                            style="height:100%;"
+                            style="height:100%; background:#fff;"
                             :items="WDrawer.listItems"
                             :itemActive.sync="WDrawer.listItemActive"
                         ></w-list-vertical>
@@ -603,8 +608,9 @@
                 >
 
                     <template v-slot:drawer>
+                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                         <w-list-vertical
-                            style="height:100%;"
+                            style="height:100%; background:#fff;"
                             :items="WDrawer.listItems"
                             :itemActive.sync="WDrawer.listItemActive"
                         ></w-list-vertical>
@@ -641,8 +647,9 @@
                 >
 
                     <template v-slot:drawer>
+                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                         <w-list-vertical
-                            style="height:100%;"
+                            style="height:100%; background:#fff;"
                             :items="WDrawer.listItems"
                             :itemActive.sync="WDrawer.listItemActive"
                         ></w-list-vertical>
@@ -679,8 +686,9 @@
                 >
 
                     <template v-slot:drawer>
+                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                         <w-list-vertical
-                            style="height:100%;"
+                            style="height:100%; background:#fff;"
                             :items="WDrawer.listItems"
                             :itemActive.sync="WDrawer.listItemActive"
                         ></w-list-vertical>
@@ -718,8 +726,9 @@
                 >
 
                     <template v-slot:drawer>
+                        <!-- afloat模式下list會有透明色, 故需給予背景色避免透視下方 -->
                         <w-list-vertical
-                            style="height:100%;"
+                            style="height:100%; background:#fff;"
                             :items="WDrawer.listItems"
                             :itemActive.sync="WDrawer.listItemActive"
                         ></w-list-vertical>

package/src/AppZoneWDynamicList.vue

@@ -436,11 +436,16 @@ export default {
         processItemsByFun: function() {
             let vo = this
             let opt = {
-                fun: function(items) {
+                fun: function(items) { //可支援sync函數
                     for (let i = 0; i < items.length; i++) {
                         items[i].displayShow = (i % 10 === 0)
                     }
-                }
+                },
+                // fun: async function(items) { //可支援async函數
+                //     for (let i = 0; i < items.length; i++) {
+                //         items[i].displayShow = (i % 10 === 0)
+                //     }
+                // },
             }
             vo.$refs.wdl.processItems(opt)
         },

package/src/AppZoneWJsonView.vue

@@ -109,6 +109,30 @@
             </div>
 
 
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-json-view'"
+                    :casename="'filterKeywords & filterFunction'"
+                ></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="WJsonView.keywords"
+                    />
+                </div>
+
+                <w-json-view
+                    style="border:1px solid #ddd;"
+                    :filterKeywords="WJsonView.keywords"
+                    :filterFunction="filterFunction"
+                    :data="WJsonView.data3"
+                ></w-json-view>
+
+            </div>
+
+
             <div class="bk dz">
                 <demolink
                     :kbname="'w-json-view'"
@@ -235,7 +259,7 @@ export default {
         return {
             'WJsonView': {
                 'viewHeightMaxSync': 400,
-                'keywords': 'pow ci uadn',
+                'keywords': 'ci uadn',
                 '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' } }],
@@ -257,6 +281,19 @@ export default {
         changeHeightOfItems: function(msg) {
             console.log('changeHeightOfItems', msg)
         },
+        filterFunction: function(item, kws) {
+            console.log('filterFunction', item, kws)
+            if (!item.text) { //若無text則跳出, 若要偵測父層節點得要針對key額外處理
+                return false
+            }
+            let c = String(item.text).toLowerCase()
+            let b = false
+            for (let i = 0; i < kws.length; i++) {
+                let kw = kws[i]
+                b = b || c.indexOf(kw) >= 0
+            }
+            return b
+        },
     },
 }
 </script>

package/src/AppZoneWText.vue

@@ -146,12 +146,13 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-text'"
-                    :casename="'leftIcon & leftIconColor & leftIconColorFocus'"
+                    :casename="'leftIcon & leftIconColor & leftIconColorHover & leftIconColorFocus'"
                 ></demolink>
 
                 <w-text
                     :leftIcon="mdiCheckUnderlineCircle"
                     :leftIconColor="'pink lighten-2'"
+                    :leftIconColorHover="'pink lighten-1'"
                     :leftIconColorFocus="'pink'"
                     v-model="WText.text"
                 ></w-text>
@@ -202,12 +203,13 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-text'"
-                    :casename="'rightIcon & rightIconColor & rightIconColorFocus'"
+                    :casename="'rightIcon & rightIconColor & rightIconColorHover & rightIconColorFocus'"
                 ></demolink>
 
                 <w-text
                     :rightIcon="mdiSend"
                     :rightIconColor="'pink lighten-2'"
+                    :rightIconColorHover="'pink lighten-1'"
                     :rightIconColorFocus="'pink'"
                     v-model="WText.text"
                 ></w-text>
@@ -495,7 +497,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-text'"
-                    :casename="'border & leftIcon & leftIconColor & leftIconColorHover & leftIconColorFocus'"
+                    :casename="'border & leftIcon & leftIconColor & leftIconColorHover & leftIconColorFocus & leftIconTooltip'"
                 ></demolink>
 
                 <w-text
@@ -515,6 +517,7 @@
                     :leftIconColor="'indigo lighten-2'"
                     :leftIconColorHover="'indigo lighten-1'"
                     :leftIconColorFocus="'indigo'"
+                    :leftIconTooltip="'Show tooltip'"
                     v-model="WText.text"
                 ></w-text>
             </div>
@@ -523,7 +526,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-text'"
-                    :casename="'border & rightIcon & rightIconColorHover & rightIconColorFocus & rightIconTooltip'"
+                    :casename="'border & rightIcon & rightIconColor & rightIconColorHover & rightIconColorFocus & rightIconTooltip'"
                 ></demolink>
 
                 <w-text
@@ -540,8 +543,9 @@
                     :backgroundColorHover="'rgba(237, 247, 255, 1)'"
                     :backgroundColorFocus="'blue lighten-5'"
                     :rightIcon="mdiSend"
-                    :rightIconColorHover="''"
-                    :rightIconColorFocus="'blue darken-3'"
+                    :rightIconColor="'blue lighten-1'"
+                    :rightIconColorHover="'blue'"
+                    :rightIconColorFocus="'blue darken-2'"
                     :rightIconTooltip="'Send'"
                     v-model="WText.text"
                 ></w-text>

package/src/AppZoneWTree.vue

@@ -159,6 +159,30 @@
             </div>
 
 
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'filterKeywords & filterFunction'"
+                ></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"
+                    :filterFunction="filterFunction"
+                    :data="WTree.option.items"
+                ></w-tree>
+
+            </div>
+
+
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
@@ -1512,6 +1536,16 @@ export default {
             setDataByPathAndValue(data, path, value)
 
         },
+        filterFunction: function(item, kws) {
+            console.log('filterFunction', item, kws)
+            let c = item.text.toLowerCase()
+            let b = false
+            for (let i = 0; i < kws.length; i++) {
+                let kw = kws[i]
+                b = b || c.indexOf(kw) >= 0
+            }
+            return b
+        },
     },
 }
 </script>

package/src/components/WDrawer.vue

@@ -56,7 +56,7 @@
                     <div
                         ref="divDrawer"
                         :class="`ts ${useDrawerClassShadow}`"
-                        :style="`width:${useDrawerWidthTrans}px; height:100%; background:#fff; transform:translateX(${useDrawerTranslateX}%);`"
+                        :style="`width:${useDrawerWidthTrans}px; height:100%; transform:translateX(${useDrawerTranslateX}%);`"
                     >
 
                         <div
@@ -64,18 +64,18 @@
                             :style="`width:${useDrawerWidthTrans}px; height:100%; display:flex;`"
                         >
 
-                            <div :style="`padding-left:${drawerBarSize/2}px;`" v-if="dragDrawerWidth && !isAtLeft"></div>
+                            <div :style="`padding-left:${useDrawerBarSize/2}px;`" v-if="dragDrawerWidth && !isAtLeft"></div>
 
                             <div
                                 class="ts"
-                                :style="`width:${useDrawerWidthTrans-drawerBarSize/2}px;`"
+                                :style="`width:${useDrawerWidthTrans-useDrawerBarSize/2}px;`"
                             >
 
                                 <slot name="drawer"></slot>
 
                             </div>
 
-                            <div :style="`padding-left:${drawerBarSize/2}px;`" v-if="dragDrawerWidth && isAtLeft"></div>
+                            <div :style="`padding-left:${useDrawerBarSize/2}px;`" v-if="dragDrawerWidth && isAtLeft"></div>
 
                         </div>
 
@@ -89,10 +89,10 @@
             <!-- 延遲至抽屜出現後才通過opacity=1顯示, 否則於浮動模式時會在外側陰影層馬上看到拖曳寬度bar, 使用者體驗不佳 -->
             <div
                 ref="divBar"
-                :style="`position:${useOverlayPosition}; z-index:${useDrawerZIndex+3}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-bw/2}px; width:${bw}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; opacity:${showOverlay5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
+                :style="`position:${useOverlayPosition}; z-index:${useDrawerZIndex+3}; top:0px; ${isAtLeft?'left':'right'}:${useDrawerWidthTrans-useDrawerBarWidth/2}px; width:${useDrawerBarWidth}px; height:100%; border-left:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${useDrawerBarBorderColor}; opacity:${showOverlay5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
                 v-show="value && dragDrawerWidth"
             >
-                <div :style="`width:${drawerBarSize}px; height:100%; background:${useDrawerBarColor};`"></div>
+                <div :style="`width:${useDrawerBarSize}px; height:100%; background:${useDrawerBarColor};`"></div>
             </div>
 
         </div>
@@ -365,14 +365,16 @@ export default {
             return this.afloat && this.showOverlay3Shadow ? 'bs' : ''
         },
 
-        bw: function() {
-            //console.log('computed changeParam')
-
+        useDrawerBarWidth: function() {
             let vo = this
-
             return vo.drawerBarSize + vo.drawerBarBorderSize * 2
         },
 
+        useDrawerBarSize: function() {
+            let vo = this
+            return vo.dragDrawerWidth ? vo.drawerBarSize : 0
+        },
+
         useDrawerBarColor: function() {
             return color2hex(this.drawerBarColor)
         },

package/src/components/WDynamicList.vue

@@ -84,6 +84,7 @@ import isint from 'wsemi/src/isint.mjs'
 import isp0int from 'wsemi/src/isp0int.mjs'
 import isbol from 'wsemi/src/isbol.mjs'
 import isEle from 'wsemi/src/isEle.mjs'
+import ispm from 'wsemi/src/ispm.mjs'
 // import haskey from 'wsemi/src/haskey.mjs'
 // import waitFun from 'wsemi/src/waitFun.mjs'
 import arrFilterByKeywords from 'wsemi/src/arrFilterByKeywords.mjs'
@@ -917,7 +918,12 @@ export default {
                 if (isfun(fun)) {
 
                     //呼叫fun, items直接傳入被修改, 因記憶體共用不用回傳覆寫items
-                    fun(items)
+                    let r = fun(items)
+
+                    //check
+                    if (ispm(r)) {
+                        r = await r
+                    }
 
                     //changeDisplay
                     vo.changeDisplay = true
@@ -993,6 +999,10 @@ export default {
 
         },
 
+        setSearchingResults: function(searchingResults) {
+            this.searchingResults = searchingResults
+        },
+
         filterItems: function() {
             //console.log('methods filterItems')
 

package/src/components/WJsonView.vue

@@ -115,7 +115,7 @@ import WTree from './WTree.vue'
  * @vue-prop {String} [iconToggleBackgroundColor='transparent'] 輸入顯隱icon按鈕背景顏色字串，預設'transparent'
  * @vue-prop {String} [iconToggleBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'
  * @vue-prop {String} [filterKeywords=''] 輸入過濾關鍵字字串，多關鍵字用空白分隔，預設''
- * @vue-prop {Function} [filterFunction=null] 輸入過濾時呼叫處理函數，傳入為各項目物件資料，回傳布林值代表項目內是否含有關鍵字，預設null
+ * @vue-prop {Function} [filterFunction=null] 輸入過濾時呼叫處理函數，可使用sync或async函數，傳入為各項目物件資料，若為sync函數回傳布林值，若為async函數等待resolve結果為布林值，代表項目內是否含有關鍵字，預設null
  * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
  * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
  * @vue-prop {String} [searchingText='Searching...'] 輸入搜索中字串，預設'Searching...'