w-component-vue 2.1.71 → 2.1.74

package/src/components/WDrawer.vue

@@ -0,0 +1,361 @@
+<template>
+    <div
+        style=""
+        :changeValue="changeValue"
+    >
+
+        <div style="position:relative; height:100%;">
+
+            <div style="width:100%; height:100%; display:flex;">
+
+                <!-- 撐開區, 需使用min-width避免被壓縮 -->
+                <div
+                    class="ts"
+                    :style="`width:${virtualZoneWidth}px; min-width:${virtualZoneWidth}px;`"
+                    v-if="isAtLeft"
+                ></div>
+
+                <div style="width:100%; height:100%;">
+
+                    <slot name="content"></slot>
+
+                </div>
+
+                <!-- 撐開區, 需使用min-width避免被壓縮 -->
+                <div
+                    class="ts"
+                    :style="`width:${virtualZoneWidth}px; min-width:${virtualZoneWidth}px;`"
+                    v-if="!isAtLeft"
+                ></div>
+
+            </div>
+
+            <!-- overlay半透明灰色層 -->
+            <div
+                class="ts"
+                :style="`position:${effOverlayPosition}; ${effDrawerDetectLoction} top:0px; right:0px; bottom:0px; z-index:${effDrawerZIndex}; width:${effDrawerDetectWidth}; height:100%; opacity:${effOverlayOpacity}; background:${effOverlayColor};`"
+                v-if="showOverlay1Basic"
+            >
+            </div>
+
+            <!-- overlay關閉事件監聽層, 與隱藏內層之向外陰影 -->
+            <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"
+            >
+
+                <!-- drawer平移層 -->
+                <div
+                    class="ts"
+                    :style="`height:100%; display:flex; justify-content:${ isAtLeft ? 'start' : 'end' };`"
+                    v-if="showOverlay4Translate"
+                >
+
+                    <div
+                        ref="divDrawer"
+                        :class="`ts ${effDrawerClassShadow}`"
+                        :style="`width:${drawerWidth}px; height:100%; background:#fff; transform:translateX(${effDrawerTranslateX}%);`"
+                    >
+
+                        <slot name="drawer"></slot>
+
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import color2hex from '../js/vuetifyColor.mjs'
+
+
+/**
+ * @vue-prop {Boolean} [value=false] 輸入是否顯示布林值，預設false
+ * @vue-prop {String} [mode='from-left'] 輸入抽屜顯示位置字串，可使用'from-left'與'from-right'，預設'from-left'
+ * @vue-prop {Number} [drawerWidth=200] 輸入抽屜寬度數字，單位為px，預設200
+ * @vue-prop {Boolean} [afloat=false] 輸入是否為浮動顯示布林值，設為true時浮在內容區上故不壓縮內容區寬度，預設false
+ * @vue-prop {Boolean} [afloatByFix=false] 輸入浮動顯示時是否使用fixed使能具有滿版配置布林值，預設false
+ * @vue-prop {Number} [overlayOpacity=0.45] 輸入浮動顯示時抽屜外側陰影層之透明度數字，預設0.45
+ * @vue-prop {String} [overlayColor='grey darken-2'] 輸入浮動顯示時抽屜外側陰影層背景顏色字串，預設'grey darken-2'
+ * @vue-prop {Number} [drawerZIndex=1] 輸入浮動顯示時抽屜使用z-index數字，預設1
+ */
+export default {
+    directives: {
+    },
+    props: {
+        value: {
+            type: Boolean,
+            default: false,
+        },
+        mode: {
+            type: String,
+            default: 'from-left', //from-left, from-right
+        },
+        drawerWidth: {
+            type: Number,
+            default: 200,
+        },
+        afloat: {
+            type: Boolean,
+            default: false,
+        },
+        afloatByFix: {
+            type: Boolean,
+            default: false,
+        },
+        overlayOpacity: {
+            type: Number,
+            default: 0.45,
+        },
+        overlayColor: {
+            type: String,
+            default: 'grey darken-2',
+        },
+        drawerZIndex: {
+            type: Number,
+            default: 1,
+        },
+    },
+    data: function() {
+        return {
+
+            timerOverlay1Basic: null,
+            showOverlay1Basic: false,
+            effOverlay1Basic: false,
+
+            timerOverlay2Detect: null,
+            showOverlay2Detect: false,
+            // effOverlay2Detect: false,
+
+            timerOverlay3Shadow: null,
+            showOverlay3Shadow: false,
+            // effOverlay3Shadow: false,
+
+            timerOverlay4Translate: null,
+            showOverlay4Translate: false,
+            effOverlay4Translate: false,
+
+        }
+    },
+    computed: {
+
+        changeValue: function () {
+            // console.log('computed changeValue')
+
+            let vo = this
+
+            //trigger
+            let value = vo.value
+
+            //toggleValue
+            vo.toggleValue(value)
+
+            return ''
+        },
+
+        virtualZoneWidth: function() {
+            if (!this.value) {
+                return 0
+            }
+            if (this.afloat) {
+                return 0
+            }
+            return this.drawerWidth
+        },
+
+        isAtLeft: function() {
+            return this.mode !== 'from-right'
+        },
+
+        effDrawerZIndex: function() {
+            let i = this.drawerZIndex
+            if (this.afloat) {
+                i += 1000
+            }
+            if (this.afloatByFix) {
+                i += 10000
+            }
+            return i
+        },
+
+        effOverlayColor: function() {
+            if (!this.afloat) {
+                return 'transparent'
+            }
+            return color2hex(this.overlayColor)
+        },
+
+        effOverlayPosition: function() {
+            return this.afloatByFix ? 'fixed' : 'absolute'
+        },
+
+        effOverlayOpacity: function() {
+            if (!this.afloat) {
+                return 0
+            }
+            return this.effOverlay1Basic ? this.overlayOpacity : 0
+        },
+
+        effDrawerTranslateX: function() {
+            if (this.effOverlay4Translate) {
+                return 0
+            }
+            let s0 = this.isAtLeft ? -100 : 100
+            return s0
+        },
+
+        effDrawerDetectLoction: function() {
+            if (this.isAtLeft) {
+                return 'left:0px;'
+            }
+            return 'right:0px;'
+        },
+
+        effDrawerDetectWidth: function() {
+            if (this.afloat) {
+                return '100%'
+            }
+            return `${this.drawerWidth}px`
+        },
+
+        effDrawerClassShadow: function() {
+            return this.afloat && this.showOverlay3Shadow ? 'bs' : ''
+        },
+
+    },
+    methods: {
+
+        ckToggle: function(ev, value) {
+            // console.log('methods ckToggle', ev, value)
+
+            let vo = this
+
+            //check, 固定時(非浮動)禁止關閉
+            if (!vo.afloat) {
+                return
+            }
+
+            //偵測點擊為抽屜slot區之外
+            let b = false
+            try {
+                b = !vo.$refs.divDrawer.contains(ev.target)
+            }
+            catch (err) {}
+            // console.log('vo.$refs.divDrawer', vo.$refs.divDrawer)
+            // console.log('ev.target', ev.target)
+            // console.log(vo.$refs.divDrawer.contains(ev.target))
+
+            //check
+            if (b) {
+
+                //toggleValue
+                vo.toggleValue(value)
+
+            }
+
+        },
+
+        toggleValue: function (value) {
+            // console.log('methods toggleValue', value)
+
+            let vo = this
+
+            // //check, 不可編輯時跳出
+            // if (!vo.editable) {
+            //     return
+            // }
+
+            //clearTimeout
+            clearTimeout(vo.timerOverlay1Basic)
+            clearTimeout(vo.timerOverlay2Detect)
+            clearTimeout(vo.timerOverlay3Shadow)
+            clearTimeout(vo.timerOverlay4Translate)
+
+            let sec
+
+            //fsm
+            if (value) {
+                // vo.fsmShowOverlay.showOverlay()
+                // vo.fsmShowStateOverlay.showOverlay()
+                sec = 20
+
+                // showOverlay1Basic: false,
+                // effOverlay1Basic: false,
+                vo.showOverlay1Basic = true
+                vo.timerOverlay1Basic = setTimeout(() => {
+                    vo.effOverlay1Basic = true
+                }, sec)
+
+                // showOverlay2Detect: false,
+                // effOverlay2Detect: false,
+                vo.showOverlay2Detect = true
+
+                // showOverlay3Shadow: false,
+                // effOverlay3Shadow: false,
+                vo.showOverlay3Shadow = true
+
+                // showOverlay4Translate: false,
+                // effOverlay4Translate: false,
+                vo.showOverlay4Translate = true
+                vo.timerOverlay4Translate = setTimeout(() => {
+                    vo.effOverlay4Translate = true
+                }, sec)
+
+            }
+            else {
+                // vo.fsmShowOverlay.hideOverlay()
+                // vo.fsmShowStateOverlay.hideOverlay()
+                sec = 300
+
+                // showOverlay1Basic: false,
+                // effOverlay1Basic: false,
+                vo.effOverlay1Basic = false
+                vo.timerOverlay1Basic = setTimeout(() => {
+                    vo.showOverlay1Basic = false
+                }, sec)
+
+                // showOverlay2Detect: false,
+                // effOverlay2Detect: false,
+                vo.timerOverlay2Detect = setTimeout(() => {
+                    vo.showOverlay2Detect = false
+                }, sec)
+
+                // showOverlay3Shadow: false,
+                // effOverlay3Shadow: false,
+                vo.timerOverlay3Shadow = setTimeout(() => {
+                    vo.showOverlay3Shadow = false
+                }, sec / 2) //提前隱藏陰影
+
+                // showOverlay4Translate: false,
+                // effOverlay4Translate: false,
+                vo.effOverlay4Translate = false
+                vo.timerOverlay4Translate = setTimeout(() => {
+                    vo.showOverlay4Translate = false
+                }, sec)
+
+            }
+
+            //emit
+            vo.$emit('input', value)
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.ts {
+    transition:all 0.3s cubic-bezier(.25,.8,.5,1);
+}
+.bs {
+    box-shadow:rgba(0, 0, 0, 0.3) 0px 8px 2px -8px, rgba(0, 0, 0, 0.3) 0px 16px 24px 2px, rgba(0, 0, 0, 0.3) 0px 6px 30px 5px;
+}
+</style>
+

package/src/components/WJsonView.vue

@@ -12,7 +12,9 @@
             :iconToggleBackgroundColorHover="iconToggleBackgroundColorHover"
             :filterKeywords="filterKeywords"
             :filterFunction="filterFunction"
+            :loadingText="loadingText"
             :noResultsText="lockFromSetData?'':noResultsText"
+            :searchingText="searchingText"
             :defItemHeight="defItemHeight"
             :itemsPreload="itemsPreload"
             :show="show"
@@ -111,7 +113,9 @@ import WTree from './WTree.vue'
  * @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 {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
  * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
+ * @vue-prop {String} [searchingText='Searching...'] 輸入搜索中字串，預設'Searching...'
  * @vue-prop {Number} [defItemHeight=24] 輸入按需顯示時各項目預設高度值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設24
  * @vue-prop {Number} [itemsPreload=5] 輸入上下方預先載入元素數量，預設5
  * @vue-prop {String} [keyColor='grey darken-2'] 輸入鍵值顏色字串，預設'grey darken-2'
@@ -178,6 +182,10 @@ export default {
             type: String,
             default: 'No results',
         },
+        searchingText: {
+            type: String,
+            default: 'Searching...',
+        },
         defItemHeight: {
             type: Number,
             default: 24,

package/src/components/WPanelScrollyCore.vue

@@ -8,10 +8,10 @@
         :changeScrollTop="changeScrollTop"
     >
 
-        <!-- 計算nativeBarWidth -->
+        <!-- 計算nativeBarWidth, 需使用overflow:scroll否則firefox無法順利顯示右側捲軸 -->
         <div style="position:relative; width:0px; height:0px; opacity:0;">
             <div style="position:absolute; left:0; top:0;">
-                <div ref="divDetect" style="width:50px; height:50px; overflow:auto;">
+                <div ref="divDetect" style="width:50px; height:50px; overflow:scroll;">
                     <div style="width:100px; height:100px;"></div>
                 </div>
             </div>
@@ -21,10 +21,11 @@
             :style="`position:relative; width:100%; overflow-x:hidden;`"
         >
 
+            <!-- 因瀏覽器計算誤差100%+nativeBarWidth仍會出現捲軸邊界, 故需+1px使捲軸能完全隱藏 -->
             <div
                 ref="divShell"
                 _class="sb"
-                :style="`position:relative; width:calc( 100% + ${nativeBarWidth}px ); height:${panelHeight}px; box-sizing:content-box; overflow-x:hidden; overflow-y:scroll;`"
+                :style="`position:relative; width:calc( 100% + ${nativeBarWidth+1}px ); height:${panelHeight}px; box-sizing:content-box; overflow-x:hidden; overflow-y:scroll;`"
                 v-domresize
                 @domresize="resizeShell"
                 @scroll="scrollShell"
@@ -178,9 +179,10 @@ export default {
             if (divDetect) {
 
                 //save nativeBarWidth
-                if (vo.nativeBarWidth !== divDetect.offsetWidth - divDetect.clientWidth) {
-                    // console.log('resizePanel 需更新nativeBarWidth', divDetect.offsetWidth - divDetect.clientWidth, '<-', vo.nativeBarWidth)
-                    vo.nativeBarWidth = divDetect.offsetWidth - divDetect.clientWidth
+                let w = divDetect.offsetWidth - divDetect.clientWidth
+                if (vo.nativeBarWidth !== w) {
+                    // console.log('resizePanel 需更新nativeBarWidth', w, '<-', vo.nativeBarWidth)
+                    vo.nativeBarWidth = w
                 }
 
             }

package/src/components/WTextSuggest.vue

@@ -55,7 +55,9 @@
                     :expansionIconSize="expansionIconSize"
                     :expansionIconColor="expansionIconColor"
                     :placeholder="placeholder"
+                    :loadingText="loadingText"
                     :noResultsText="noResultsText"
+                    :searchingText="searchingText"
                     :distY="useDistY"
                     :defItemHeight="defItemHeight"
                     :editable="editable"
@@ -136,7 +138,9 @@ import WTextSuggestCore from './WTextSuggestCore.vue'
  * @vue-prop {Number} [expansionIconSize=18] 輸入右側圖標尺寸數字，單位為px，預設18
  * @vue-prop {String} [expansionIconColor='grey'] 輸入右側圖標顏色字串，預設'grey'
  * @vue-prop {String} [placeholder=''] 輸入無文字時的替代字符字串，預設''
+ * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
  * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
+ * @vue-prop {String} [searchingText='Searching...'] 輸入搜索中字串，預設'Searching...'
  * @vue-prop {Number} [defItemHeight=43] 輸入按需顯示時各項目預設高度值數字，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設43
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
  * @vue-prop {Boolean} [focused=false] 輸入是否為取得焦點狀態布林值，預設false
@@ -313,10 +317,18 @@ export default {
             type: String,
             default: '',
         },
+        loadingText: {
+            type: String,
+            default: 'Loading...',
+        },
         noResultsText: {
             type: String,
             default: 'No results',
         },
+        searchingText: {
+            type: String,
+            default: 'Searching...',
+        },
         defItemHeight: {
             type: Number,
             default: 43,

package/src/components/WTextSuggestCore.vue

@@ -75,7 +75,9 @@
                     :filterKeywords="mode==='suggest'?valueTrans:''"
                     :viewHeightMax="maxHeight"
                     :itemMinHeight="defItemHeight"
+                    :loadingText="loadingText"
                     :noResultsText="noResultsText"
+                    :searchingText="searchingText"
                     :show="showPanelTrans"
                 >
                     <template v-slot="props">
@@ -148,7 +150,9 @@ import WIcon from './WIcon.vue'
  * @vue-prop {Number} [maxWidth=null] 輸入最大寬度，單位為px，預設null
  * @vue-prop {Number} [distY=5] 輸入彈窗距離觸發元素底部的距離數字，單位為px，預設5
  * @vue-prop {String} [placeholder=''] 輸入無文字時的替代字符字串，預設''
+ * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
  * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
+ * @vue-prop {String} [searchingText='Searching...'] 輸入搜索中字串，預設'Searching...'
  * @vue-prop {Number} [defItemHeight=43] 輸入按需顯示時各項目預設高度數字，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設43
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
  * @vue-prop {Boolean} [focused=false] 輸入是否為取得焦點狀態布林值，預設false
@@ -255,10 +259,18 @@ export default {
             type: String,
             default: '',
         },
+        loadingText: {
+            type: String,
+            default: 'Loading...',
+        },
         noResultsText: {
             type: String,
             default: 'No results',
         },
+        searchingText: {
+            type: String,
+            default: 'Searching...',
+        },
         defItemHeight: {
             type: Number,
             default: 43,

package/src/components/WTree.vue

@@ -12,7 +12,9 @@
             :viewHeightMax="viewHeightMax"
             :itemMinHeight="defItemHeight"
             :itemsPreload="itemsPreload"
+            :loadingText="loadingText"
             :noResultsText="noResultsText"
+            :searchingText="searchingText"
             :show="show"
             @change-view-items="changeViewItems"
         >
@@ -154,9 +156,9 @@
             </template>
         </WDynamicList>
 
+        <!-- 需使用pointer-events:none;禁用事件, 避免拖曳時因接觸此元素時出現enter與leave -->
         <div
             :style="`position:absolute; z-index:1; pointer-events:none; left:${dgTipLeft}px; top:${dgTipTop}px;`"
-            :msg="`需使用pointer-events:none;禁用事件, 避免拖曳時因接觸此元素時出現enter與leave`"
             v-if="dgTipMode!==''"
         >
             <template v-if="dgTipMode==='lineTop'">
@@ -256,7 +258,9 @@ let gm = globalMemory()
  * @vue-prop {String} [iconCheckedPartiallyDisabledColor='grey'] 輸入禁用部份勾選時(子節點任一有勾選但非全部勾選)顏色字串，預設'grey'
  * @vue-prop {String} [filterKeywords=''] 輸入過濾關鍵字字串，多關鍵字用空白分隔，預設''
  * @vue-prop {Function} [filterFunction=null] 輸入過濾時呼叫處理函數，傳入為各項目物件資料，回傳布林值代表項目內是否含有關鍵字，預設null
+ * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
  * @vue-prop {String} [noResultsText='No results'] 輸入無過濾結果字串，預設'No results'
+ * @vue-prop {String} [searchingText='Searching...'] 輸入搜索中字串，預設'Searching...'
  * @vue-prop {Number} [defItemHeight=34] 輸入按需顯示時各項目預設高度值，給越準或給大部分項目的高度則渲染速度越快，單位為px，預設34
  * @vue-prop {Number} [itemsPreload=5] 輸入上下方預先載入元素數量，預設5
  * @vue-prop {Boolean} [draggable=false] 輸入是否為可拖曳編輯模式，若draggable設定true，此時所有節點皆為展開顯示並且禁止顯隱節點功能，也就是defaultDisplayLevel強制設定為null，此外也不提供過濾功能，也就是filterKeywords強制清空。開啟draggable僅適用小規模數據。draggable預設false
@@ -404,10 +408,18 @@ export default {
             type: Function,
             default: null,
         },
+        loadingText: {
+            type: String,
+            default: 'Loading...',
+        },
         noResultsText: {
             type: String,
             default: 'No results',
         },
+        searchingText: {
+            type: String,
+            default: 'Searching...',
+        },
         defItemHeight: {
             type: Number,
             default: 34,

package/src/js/statesRela.mjs

@@ -0,0 +1,125 @@
+// import get from 'lodash/get'
+// import each from 'lodash/each'
+// import isestr from 'wsemi/src/isestr.mjs'
+// import isearr from 'wsemi/src/isearr.mjs'
+// import isfun from 'wsemi/src/isfun.mjs'
+// import ispm from 'wsemi/src/ispm.mjs'
+// import evem from 'wsemi/src/evem.mjs'
+
+
+// function fsm(opt) {
+
+//     //ev
+//     let ev = evem()
+
+//     //emit
+//     let emit = (name, msg) => {
+//         setTimeout(() => {
+//             ev.emit(name, msg)
+//         }, 1)
+//     }
+
+//     //state
+//     let state = get(opt, 'initial', '')
+
+//     // //check
+//     // if (!isestr(state)) {
+//     //     throw new Error(`opt.initial is not an effective string`)
+//     // }
+
+//     //update state
+//     emit('initial', {
+//         state,
+//     })
+
+//     //transitions
+//     let transitions = get(opt, 'transitions', [])
+
+//     //check
+//     if (!isearr(transitions)) {
+//         throw new Error(`opt.transitions is not an effective array`)
+//     }
+
+//     //transitions
+//     each(transitions, (v) => {
+
+//         //action
+//         let action = get(v, 'action', '')
+//         if (!isestr(action)) {
+//             return true //跳出換下一個
+//         }
+
+//         //from
+//         let from = get(v, 'from', '')
+//         // if (!isestr(from)) {
+//         //     return true //跳出換下一個
+//         // }
+
+//         //to
+//         let to = get(v, 'to', '')
+//         // if (!isestr(to)) {
+//         //     return true //跳出換下一個
+//         // }
+
+//         //fun
+//         let fun = get(v, 'fun')
+
+//         //transit
+//         let transit = async () => {
+
+//             //check state
+//             if (state !== from) {
+//                 emit('error', {
+//                     action,
+//                     state,
+//                     from,
+//                     to,
+//                     msg: `transit error: state[${state}] !== from[${from}]`,
+//                 })
+//             }
+
+//             emit('before', {
+//                 action,
+//                 state,
+//                 from,
+//                 to,
+//             })
+
+//             //fun
+//             if (isfun(fun)) {
+
+//                 //toTemp by fun
+//                 let toTemp = fun(state, action, from, to)
+
+//                 //check promise
+//                 if (ispm(toTemp)) {
+//                     toTemp = await toTemp
+//                 }
+
+//                 //update
+//                 state = toTemp
+
+//             }
+//             else {
+
+//                 //update
+//                 state = to
+
+//             }
+
+//             emit('after', {
+//                 action,
+//                 state,
+//                 from,
+//                 to,
+//             })
+
+//         }
+
+//         //save
+//         ev[action] = transit
+
+//     })
+
+//     return ev
+// }