w-component-vue 2.1.73 → 2.1.76

package/src/components/WButtonCircle.vue

@@ -16,7 +16,7 @@
                 <!-- v-tooltip下第1層dom會無法拖曳, 點擊事件於這層觸發, 且組件內tabindex不能重複, 故本層設定為0 -->
                 <div
                     v-on="on"
-                    :style="`position:relative; transition:all 0.3s; border-radius:50%; ${usePadding} background:${useBackgroundColor}; ${editable?'cursor:pointer;':''} outline:none; user-select:none; box-shadow:${useShadow};`"
+                    :style="`position:relative; transition:all 0.3s; ${usePadding} border-radius:50%; border:${borderWidth}px solid ${useBorderColor}; background:${useBackgroundColor}; ${editable&&cursorPointer?'cursor:pointer;':''} outline:none; user-select:none; box-shadow:${useShadow};`"
                     tabindex="0"
                     @mouseenter="hoverTrans=true;$emit('mouseenter',$event)"
                     @mouseleave="hoverTrans=false;$emit('mouseleave',$event)"
@@ -90,6 +90,10 @@ import WIconLoading from './WIconLoading.vue'
  * @vue-prop {String} [iconColor='grey darken-1'] 輸入按鈕圖標顏色字串，預設'grey darken-1'
  * @vue-prop {String} [iconColorHover='grey darken-2'] 輸入滑鼠移入時按鈕圖標顏色字串，預設'grey darken-2'
  * @vue-prop {String} [iconColorFocus='grey darken-3'] 輸入取得焦點時按鈕圖標顏色字串，預設'grey darken-3'
+ * @vue-prop {Number} [borderWidth=0] 輸入框線寬度數字，單位為px，預設0
+ * @vue-prop {String} [borderColor='transparent'] 輸入按鈕框線顏色字串，預設'transparent'
+ * @vue-prop {String} [borderColorHover='transparent'] 輸入滑鼠移入時按鈕框線顏色字串，預設'transparent'
+ * @vue-prop {String} [borderColorFocus='transparent'] 輸入取得焦點時按鈕框線顏色字串，預設'transparent'
  * @vue-prop {String} [backgroundColor='rgb(241,241,241)'] 輸入按鈕背景顏色字串，預設'rgb(241,241,241)'
  * @vue-prop {String} [backgroundColorHover='rgb(236,236,236)'] 輸入滑鼠移入時按鈕背景顏色字串，預設'rgb(236,236,236)'
  * @vue-prop {String} [backgroundColorFocus='rgb(230,230,230)'] 輸入取得焦點時按鈕背景顏色字串，預設'rgb(230,230,230)'
@@ -97,6 +101,7 @@ import WIconLoading from './WIconLoading.vue'
  * @vue-prop {Object} [paddingStyle={v:4,h:4}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:4,h:4}
  * @vue-prop {Boolean} [shadow=true] 輸入是否為陰影模式，預設true
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
+ * @vue-prop {Boolean} [cursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式，預設false
  * @vue-prop {String} [loadingColor='grey darken-2'] 輸入載入圖標顏色字串，預設'grey darken-2'
  * @vue-prop {Boolean} [promiseUnlock=false] 輸入是否點擊後自動設定為loading為true並需使用promise解鎖布林值，預設false
@@ -134,6 +139,22 @@ export default {
             type: String,
             default: 'grey darken-3',
         },
+        borderWidth: {
+            type: Number,
+            default: 0,
+        },
+        borderColor: {
+            type: String,
+            default: 'transparent',
+        },
+        borderColorHover: {
+            type: String,
+            default: 'transparent',
+        },
+        borderColorFocus: {
+            type: String,
+            default: 'transparent',
+        },
         backgroundColor: {
             type: String,
             default: 'rgb(241,241,241)',
@@ -169,6 +190,10 @@ export default {
                 }
             },
         },
+        cursorPointer: {
+            type: Boolean,
+            default: true,
+        },
         loading: {
             type: Boolean,
             default: false,
@@ -245,6 +270,34 @@ export default {
             return r
         },
 
+        effBorderColor: function() {
+            let vo = this
+            return color2hex(vo.borderColor)
+        },
+
+        effBorderColorHover: function() {
+            let vo = this
+            return color2hex(vo.borderColorHover)
+        },
+
+        effBorderColorFocus: function() {
+            let vo = this
+            return color2hex(vo.borderColorFocus)
+        },
+
+        useBorderColor: function() {
+            let vo = this
+            let r
+            if (vo.loadingTrans) {
+                return vo.effBorderColor
+            }
+            r = vo.focusTrans ? vo.effBorderColorFocus : vo.hoverTrans ? vo.effBorderColorHover : vo.effBorderColor
+            if (!vo.editable) {
+                r = vo.focusTrans ? vo.effBorderColorFocus : vo.effBorderColor
+            }
+            return r
+        },
+
         effBackgroundColor: function() {
             let vo = this
             return color2hex(vo.backgroundColor)

package/src/components/WComponentVue.vue

@@ -8,6 +8,7 @@ import WCheckbox from './WCheckbox.vue'
 import WCkeditorVueDyn from './WCkeditorVueDyn.vue'
 import WConfirm from './WConfirm.vue'
 import WDialog from './WDialog.vue'
+import WDrawer from './WDrawer.vue'
 import WDropfiles from './WDropfiles.vue'
 import WDynamicList from './WDynamicList.vue'
 import WEchartsVueDyn from './WEchartsVueDyn.vue'
@@ -77,6 +78,7 @@ let WComponentVue = {
         Vue.component('w-ckeditor-vue-dyn', WCkeditorVueDyn)
         Vue.component('w-confirm', WConfirm)
         Vue.component('w-dialog', WDialog)
+        Vue.component('w-drawer', WDrawer)
         Vue.component('w-dropfiles', WDropfiles)
         Vue.component('w-dynamic-list', WDynamicList)
         Vue.component('w-echarts-vue-dyn', WEchartsVueDyn)

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/WDynamicList.vue

@@ -570,7 +570,7 @@ export default {
 
                     //fun
                     if (isfun(fun)) {
-                        fun('diff-new', index, h)
+                        fun(index, h)
                     }
 
                     //標記為高度有更新
@@ -604,10 +604,7 @@ export default {
             let n = size(items)
 
             //changeHeight, syncItemsHeight
-            vo.changeHeight = vo.syncItemsHeight(items, (mode, index, h) => {
-                if (mode !== 'diff-new') {
-                    return
-                }
+            vo.changeHeight = vo.syncItemsHeight(items, (index, h) => {
                 // console.log('修改高度', 'index', index, items[index].height, '->', h)
                 items[index].height = h
             })
@@ -795,6 +792,9 @@ export default {
                         //更新itemsHeight
                         vo.itemsHeight = itemsHeight
 
+                        //emit change-height-of-items
+                        vo.$emit('change-height-of-items', { height: itemsHeight })
+
                     }
 
                 }

package/src/components/WJsonView.vue

@@ -18,6 +18,8 @@
             :defItemHeight="defItemHeight"
             :itemsPreload="itemsPreload"
             :show="show"
+            @change-view-items="(msg)=>{$emit('change-view-items',msg)}"
+            @change-height-of-items="(msg)=>{$emit('change-height-of-items',msg)}"
         >
             <template v-slot:head="props">
 

package/src/components/WTree.vue

@@ -16,7 +16,8 @@
             :noResultsText="noResultsText"
             :searchingText="searchingText"
             :show="show"
-            @change-view-items="changeViewItems"
+            @change-view-items="(msg)=>{$emit('change-view-items',msg)}"
+            @change-height-of-items="(msg)=>{$emit('change-height-of-items',msg)}"
         >
             <template v-slot="props">
 
@@ -156,9 +157,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'">
@@ -1864,16 +1865,6 @@ export default {
 
         },
 
-        changeViewItems: function(msg) {
-            // console.log('methods changeViewItems', msg)
-
-            let vo = this
-
-            //emit
-            vo.$emit('change-view-items', msg)
-
-        },
-
         deleteItem: function (data, nk) {
             //console.log('methods deleteItem', data, nk)
             //刪除節點, 因會使用nk操作, 故需確保節點順序問題

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
+// }

package/toolg/gDistApp.mjs

@@ -15,7 +15,7 @@ let opt = {
     <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" rel="stylesheet">
 
     <!-- mdi, 各組件使用mdi/js故不需引用 -->
-    <link _href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" rel="stylesheet">
+    <link _href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css" rel="stylesheet">
 
     <!-- google, 各組件使用mdi/js故不需引用 -->
     <link _href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">