w-component-vue 2.1.80 → 2.1.81

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.7</a> on Sun Mar 06 2022 12:41:28 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.7</a> on Sun Mar 06 2022 20:30:17 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.1.80",
+  "version": "2.1.81",
   "author": "yuda-lyu(semisphere)",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/AppZoneWPanelScrolly.vue

@@ -35,6 +35,7 @@
                     @scroll-infor="(msg)=>{getEvents('scroll-infor',msg)}"
                     @resize="(msg)=>{getEvents('resize',msg)}"
                     @mutation="(msg)=>{getEvents('mutation',msg)}"
+                    @visible="(msg)=>{getEvents('visible',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>

package/src/components/WDrawer.vue

@@ -42,14 +42,14 @@
             <div
                 :style="`position:${effOverlayPosition}; ${effDrawerDetectLoction} top:0px; right:0px; bottom:0px; z-index:${effDrawerZIndex+1}; width:${effDrawerDetectWidth}; height:100%; overflow:hidden;`"
                 @click="(ev)=>{ckToggle(ev,false)}"
-                v-if="showOverlay2Detect"
+                v-show="showOverlay2Detect"
             >
 
                 <!-- drawer平移層 -->
                 <div
-                    class="ts"
+                    _class="ts"
                     :style="`height:100%; display:flex; justify-content:${ isAtLeft ? 'start' : 'end' };`"
-                    v-if="showOverlay4Translate"
+                    _v-show="showOverlay4Translate"
                 >
 
                     <div
@@ -138,7 +138,7 @@ export default {
             // effOverlay3Shadow: false,
 
             timerOverlay4Translate: null,
-            showOverlay4Translate: false,
+            // showOverlay4Translate: false,
             effOverlay4Translate: false,
 
         }
@@ -279,7 +279,7 @@ export default {
 
             let sec
 
-            //fsm
+            //check
             if (value) {
                 // vo.fsmShowOverlay.showOverlay()
                 // vo.fsmShowStateOverlay.showOverlay()
@@ -302,7 +302,7 @@ export default {
 
                 // showOverlay4Translate: false,
                 // effOverlay4Translate: false,
-                vo.showOverlay4Translate = true
+                // vo.showOverlay4Translate = true
                 vo.timerOverlay4Translate = setTimeout(() => {
                     vo.effOverlay4Translate = true
                 }, sec)
@@ -335,9 +335,9 @@ export default {
                 // showOverlay4Translate: false,
                 // effOverlay4Translate: false,
                 vo.effOverlay4Translate = false
-                vo.timerOverlay4Translate = setTimeout(() => {
-                    vo.showOverlay4Translate = false
-                }, sec)
+                // vo.timerOverlay4Translate = setTimeout(() => {
+                //     vo.showOverlay4Translate = false
+                // }, sec)
 
             }
 

package/src/components/WListVertical.vue

@@ -245,9 +245,15 @@ export default {
                 footerHeight = eleFooter.offsetHeight
             }
 
-
             //listHeight
-            vo.listHeight = vo.panelHeight - headerHeight - footerHeight
+            let listHeight = vo.panelHeight - headerHeight - footerHeight
+            // console.log('vo.panelHeight', vo.panelHeight, 'headerHeight', headerHeight, 'footerHeight', footerHeight)
+            // console.log('listHeight',  listHeight)
+
+            //check
+            if (listHeight > 0 && vo.listHeight !== listHeight) {
+                vo.listHeight = listHeight
+            }
 
         },
 

package/src/components/WPanelScrollyCore.vue

@@ -36,6 +36,8 @@
                     :style="``"
                     v-dommutation
                     @dommutation="mutation"
+                    v-domvisible
+                    @domvisible="visible"
                 >
                     <slot></slot>
                 </div>
@@ -71,6 +73,7 @@ import waitFun from 'wsemi/src/waitFun.mjs'
 import debounce from 'wsemi/src/debounce.mjs'
 import domResize from '../js/domResize.mjs'
 import domMutation from '../js/domMutation.mjs'
+import domVisible from '../js/domVisible.mjs'
 
 
 /**
@@ -83,6 +86,7 @@ export default {
     directives: {
         domresize: domResize(),
         dommutation: domMutation(),
+        domvisible: domVisible(),
     },
     components: {
     },
@@ -217,8 +221,8 @@ export default {
             if (divContent) {
                 // console.log('resizeShell divContent.offsetHeight', divContent.offsetHeight)
 
-                //save
-                if (vo.contentHeight !== divContent.offsetHeight) {
+                //check, 若為隱藏則不偵測與更新
+                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {
                     // console.log('resizeShell 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)
                     vo.contentHeight = divContent.offsetHeight
                 }
@@ -246,13 +250,11 @@ export default {
 
             //divContent
             let divContent = get(vo, '$refs.divContent')
-
-            //check
             if (divContent) {
                 // console.log('mutation divContent.offsetHeight', divContent.offsetHeight)
 
-                //save
-                if (vo.contentHeight !== divContent.offsetHeight) {
+                //check, 若為隱藏則不偵測與更新
+                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {
                     // console.log('mutation 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)
                     vo.contentHeight = divContent.offsetHeight
                 }
@@ -267,6 +269,32 @@ export default {
 
         },
 
+        visible: function(v) {
+            // console.log('methods visible', v)
+
+            let vo = this
+
+            //divContent
+            let divContent = get(vo, '$refs.divContent')
+            if (divContent) {
+                // console.log('visible divContent.offsetHeight', divContent.offsetHeight)
+
+                //check, 若為隱藏則不偵測與更新
+                if (divContent.offsetHeight !== 0 && vo.contentHeight !== divContent.offsetHeight) {
+                    // console.log('visible 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)
+                    vo.contentHeight = divContent.offsetHeight
+                }
+
+            }
+
+            //updateRatio
+            vo.updateRatio()
+
+            //emit
+            vo.triggerEvent('visible', { visible: v, from: 'content' })
+
+        },
+
         updateRatio: function() {
             // console.log('methods updateRatio')
 

package/src/js/domVisible.mjs

@@ -0,0 +1,86 @@
+
+import domIsVisible from 'wsemi/src/domIsVisible.mjs'
+import genID from 'wsemi/src/genID.mjs'
+
+
+function domVisible() {
+    let kpDv = {}
+
+    function emit(vnode, name, data) {
+        let handlers = (vnode.data && vnode.data.on) || (vnode.componentOptions && vnode.componentOptions.listeners)
+        if (handlers && handlers[name]) {
+            handlers[name].fns(data)
+        }
+    }
+
+    function bind(el, binding, vnode) {
+        //console.log('bind', 'el', el, 'binding', binding, 'vnode', vnode)
+
+        //id
+        let id = `r${genID()}`
+        el.setAttribute('ev-visible', id)
+
+        //visible
+        let visible = false
+
+        //timer
+        let timer = setInterval(() => {
+
+            //domIsVisible
+            domIsVisible(el)
+                .then((v) => {
+
+                    //check
+                    if (visible === v) {
+                        return
+                    }
+
+                    //update
+                    visible = v
+
+                    //emit
+                    emit(vnode, 'domvisible', v)
+
+                })
+                .catch(() => {})
+
+        }, 20)
+
+        //save timer
+        kpDv[id] = timer
+
+    }
+
+    function unbind(el) {
+        //console.log('unbind', 'el', el)
+
+        //id
+        let id = el.getAttribute('ev-visible')
+
+        //remove attr
+        el.setAttribute('ev-visible', null)
+
+        //clear
+        if (kpDv[id]) {
+
+            //clear
+            clearInterval(kpDv[id])
+
+            //set null
+            kpDv[id] = null
+
+            //delete
+            delete kpDv[id]
+
+        }
+
+    }
+
+    return {
+        bind,
+        unbind,
+    }
+}
+
+
+export default domVisible