w-component-vue 2.2.7 → 2.2.8

package/src/AppZoneWListExpand.vue

@@ -48,7 +48,7 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-list-expand'"
-                    :casename="'keyText & keyIcon'"
+                    :casename="'keyText & keyIcon & keyDsp'"
                 ></demolink>
 
                 <div style="display:inline-block; border:1px dashed #ddd;">
@@ -57,6 +57,7 @@
                         :items="WListExpand.itemsObjForKey"
                         :keyText="'name'"
                         :keyIcon="'path'"
+                        :keyDsp="'message'"
                     >
                     </w-list-expand>
                 </div>
@@ -422,32 +423,32 @@ export default {
                     {
                         name: 'Real-Time',
                         path: mdiStackOverflow,
-                        dsp: 'Lorem ipsum dolor sit amet, id nec quod persius patrioque. Quaestio antiopam sea ex. Ius no illud mucius admodum, ea nonumes habemus interpretaris sit, eu ius suavitate definitionem.',
+                        message: 'Lorem ipsum dolor sit amet, id nec quod persius patrioque. Quaestio antiopam sea ex. Ius no illud mucius admodum, ea nonumes habemus interpretaris sit, eu ius suavitate definitionem.',
                     },
                     {
                         name: 'Audience',
                         path: mdiBookMusicOutline,
-                        dsp: 'Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix.',
+                        message: 'Ad est alii munere indoctum, ei partiendo assentior vituperatoribus his. Per cu dicunt indoctum qualisque. Eam eu honestatis complectitur, iuvaret democritum interpretaris ad vix.',
                     },
                     {
                         name: 'Conversions',
                         path: mdiCharity,
-                        dsp: 'Etiam appellantur pri te, percipit atomorum consequat et mei, et pro liber ubique ceteros. Est at vocent instructior consequuntur.',
+                        message: 'Etiam appellantur pri te, percipit atomorum consequat et mei, et pro liber ubique ceteros. Est at vocent instructior consequuntur.',
                     },
                     {
                         name: 'Management',
                         path: mdiLightbulbGroupOutline,
-                        dsp: 'Qui oratio partem percipit ex, brute omittantur eum no, id his iriure splendide voluptatum. Ei his etiam vivendo adversarium, nam iusto ridens ei, meis disputationi eos eu. Meis accumsan mea et, ut ubique deserunt dignissim vix. Duo ex dicant detracto tacimates.',
+                        message: 'Qui oratio partem percipit ex, brute omittantur eum no, id his iriure splendide voluptatum. Ei his etiam vivendo adversarium, nam iusto ridens ei, meis disputationi eos eu. Meis accumsan mea et, ut ubique deserunt dignissim vix. Duo ex dicant detracto tacimates.',
                     },
                     {
                         name: 'Settings',
                         path: mdiMessageCogOutline,
-                        dsp: 'Sed et nisi maximus, aliquet justo in, consequat nisl.',
+                        message: 'Sed et nisi maximus, aliquet justo in, consequat nisl.',
                     },
                     {
                         name: 'Actions',
                         path: mdiGestureDoubleTap,
-                        dsp: 'Morbi mi lectus, semper vitae dolor eget, venenatis pellentesque purus. Phasellus sollicitudin mattis molestie. Nunc felis mauris.',
+                        message: 'Morbi mi lectus, semper vitae dolor eget, venenatis pellentesque purus. Phasellus sollicitudin mattis molestie. Nunc felis mauris.',
                     },
                 ],
                 'itemActive': {

package/src/AppZoneWPanelBulge.vue

@@ -78,7 +78,7 @@
                     :casename="'with grey outer'"
                 ></demolink>
 
-                <div style="background-color:#bbb; padding:40px;">
+                <div style="background:#bbb; padding:40px;">
                     <w-panel-bulge
                         style="min-width:500px;"
                         :headerText="WPanelBulge.title"
@@ -95,7 +95,7 @@
                     :casename="'no headerShadow & no contentShadow, with green outer'"
                 ></demolink>
 
-                <div style="background-color:#8FF4B1; padding:40px;">
+                <div style="background:#8FF4B1; padding:40px;">
                     <w-panel-bulge
                         style="min-width:500px;"
                         :headerText="WPanelBulge.title"

package/src/AppZoneWPanelScale.vue

@@ -118,7 +118,7 @@
                         :scale="WPanelScale.scale"
                     >
 
-                        <select style="padding:0px 10px; background-color:rgba(200,200,200,0.1); color:#000; border:1px solid rgba(200,200,200,0.5); border-radius:30px; outline:none;">
+                        <select style="padding:0px 10px; background:rgba(200,200,200,0.1); color:#000; border:1px solid rgba(200,200,200,0.5); border-radius:30px; outline:none;">
                             <option style="color:#000;" value="0">Select Fruit</option>
                             <option style="color:#000;" value="1">Apple</option>
                             <option style="color:#000;" value="2">Orange</option>

package/src/AppZoneWPanelStripe.vue

@@ -161,7 +161,7 @@
                     :casename="'with grey outer'"
                 ></demolink>
 
-                <div style="background-color:#bbb; padding:40px;">
+                <div style="background:#bbb; padding:40px;">
 
                     <w-panel-stripe
                         style="width:520px;"
@@ -202,7 +202,7 @@
                     :casename="'no shadow, with crimson outer'"
                 ></demolink>
 
-                <div style="background-color:#a77; padding:40px;">
+                <div style="background:#a77; padding:40px;">
 
                     <w-panel-stripe
                         style="width:520px;"
@@ -362,8 +362,8 @@
 
                     <template v-slot:footer>
                         <div style="display:flex; justify-content:flex-end;">
-                            <button style="margin-left:15px; padding:5px 10px; background-color:#ddd; border-radius:10px; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);">離開</button>
-                            <button style="margin-left:15px; padding:5px 10px; background-color:#ddd; border-radius:10px; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);">儲存</button>
+                            <button style="margin-left:15px; padding:5px 10px; background:#ddd; border-radius:10px; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);">離開</button>
+                            <button style="margin-left:15px; padding:5px 10px; background:#ddd; border-radius:10px; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);">儲存</button>
                         </div>
                     </template>
 

package/src/AppZoneWTableDyn.vue

@@ -188,7 +188,7 @@
                     @error="evError"
                 >
                     <template v-slot:btns="props">
-                        <select style="padding:0px 10px; background-color:rgba(255,255,255,0.1); color:#666; font-size:0.7rem; border:1px solid rgba(0,0,0,0.3); border-radius:30px; outline:none;">
+                        <select style="padding:0px 10px; background:rgba(255,255,255,0.1); color:#666; font-size:0.7rem; border:1px solid rgba(0,0,0,0.3); border-radius:30px; outline:none;">
                             <option style="color:#666; font-size:0.7rem;" value="0">Select Item</option>
                             <option style="color:#666; font-size:0.7rem;" value="1">Quisquam</option>
                             <option style="color:#666; font-size:0.7rem;" value="2">Dolorem</option>
@@ -413,7 +413,7 @@
                     @error="evError"
                 >
                     <template v-slot:btns="props">
-                        <select style="padding:0px 10px; background-color:rgba(255,255,255,0.1); color:#666; font-size:0.7rem; border:1px solid rgba(0,0,0,0.3); border-radius:30px; outline:none;">
+                        <select style="padding:0px 10px; background:rgba(255,255,255,0.1); color:#666; font-size:0.7rem; border:1px solid rgba(0,0,0,0.3); border-radius:30px; outline:none;">
                             <option style="color:#666; font-size:0.7rem;" value="0">Select Item</option>
                             <option style="color:#666; font-size:0.7rem;" value="1">Quisquam</option>
                             <option style="color:#666; font-size:0.7rem;" value="2">Dolorem</option>

package/src/components/WDrawer.vue

@@ -2,11 +2,12 @@
     <div
         style=""
         :changeValue="changeValue"
+        :changeDrawerWidth="changeDrawerWidth"
     >
 
-        <div style="position:relative; height:100%;">
+        <div ref="divPanel" style="position:relative; height:100%;">
 
-            <div style="width:100%; height:100%; display:flex;">
+            <div style="width:100%; height:100%; display:flex; overflow-x:hidden;">
 
                 <!-- 撐開區, 需使用min-width避免被壓縮 -->
                 <div
@@ -15,7 +16,7 @@
                     v-if="isAtLeft"
                 ></div>
 
-                <div style="width:100%; height:100%;">
+                <div :style="`width:100%; height:100%;`">
 
                     <slot name="content"></slot>
 
@@ -33,32 +34,48 @@
             <!-- 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};`"
+                :style="`position:${effOverlayPosition}; ${effDrawerDetectLoction} top:0px; bottom:0px; z-index:${effDrawerZIndex+1}; 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;`"
+                :style="`position:${effOverlayPosition}; ${effDrawerDetectLoction} top:0px; bottom:0px; z-index:${effDrawerZIndex+2}; width:${effDrawerDetectWidth}; height:100%; overflow:hidden;`"
                 @click="(ev)=>{ckToggle(ev,false)}"
                 v-show="showOverlay2Detect"
             >
 
                 <!-- drawer平移層 -->
                 <div
-                    _class="ts"
                     :style="`height:100%; display:flex; justify-content:${ isAtLeft ? 'start' : 'end' };`"
-                    _v-show="showOverlay4Translate"
                 >
 
                     <div
                         ref="divDrawer"
                         :class="`ts ${effDrawerClassShadow}`"
-                        :style="`width:${drawerWidth}px; height:100%; background:#fff; transform:translateX(${effDrawerTranslateX}%);`"
+                        :style="`width:${drawerWidthTrans}px; height:100%; background:#fff; transform:translateX(${effDrawerTranslateX}%);`"
                     >
 
-                        <slot name="drawer"></slot>
+                        <div
+                            class="ts"
+                            :style="`width:${drawerWidthTrans}px; height:100%; display:flex;`"
+                        >
+
+                            <div :style="`padding-left:${drawerBarSize/2}px;`" v-if="dragDrawerWidth && !isAtLeft"></div>
+
+                            <div
+                                class="ts"
+                                :style="`width:${drawerWidthTrans-drawerBarSize/2}px;`"
+                            >
+
+                                <slot name="drawer"></slot>
+
+                            </div>
+
+                            <div :style="`padding-left:${drawerBarSize/2}px;`" v-if="dragDrawerWidth && isAtLeft"></div>
+
+                        </div>
 
                     </div>
 
@@ -66,12 +83,29 @@
 
             </div>
 
+            <!-- 拖曳寬度bar, z-index需大於drawer區, 否則多層drawer開啟拖曳寬度bar時會被遮蔽 -->
+            <!-- 延遲至抽屜出現後才通過opacity=1顯示, 否則於浮動模式時會在外側陰影層馬上看到拖曳寬度bar, 使用者體驗不佳 -->
+            <div
+                ref="divBar"
+                :style="`position:${effOverlayPosition}; z-index:${effDrawerZIndex+3}; top:0px; ${isAtLeft?'left':'right'}:${drawerWidthTrans-bw/2}px; width:${bw}px; height:100%; border-left:${drawerBarBorderSize}px solid ${effDrawerBarBorderColor}; border-right:${drawerBarBorderSize}px solid ${effDrawerBarBorderColor}; opacity:${showOverlay5DragDrawerBar?1:0}; cursor:col-resize; user-select:none;`"
+                v-show="value && dragDrawerWidth"
+            >
+                <div :style="`width:${drawerBarSize}px; height:100%; background:${effDrawerBarColor};`"></div>
+            </div>
+
         </div>
 
     </div>
 </template>
 
 <script>
+import get from 'lodash/get'
+import filter from 'lodash/filter'
+import min from 'lodash/min'
+import isNumber from 'lodash/isNumber'
+import isnum from 'wsemi/src/isnum.mjs'
+import cdbl from 'wsemi/src/cdbl.mjs'
+import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
 
 
@@ -79,11 +113,18 @@ 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 {Number} [drawerWidthMin=null] 輸入使用拖曳抽屜寬度分隔條(dragDrawerWidth=true)時，拖曳抽屜寬度分隔條最小值數字，預設null
+ * @vue-prop {Number} [drawerWidthMax=null] 輸入使用拖曳抽屜寬度分隔條(dragDrawerWidth=true)時，拖曳抽屜寬度分隔條最大值數字，預設null
  * @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
+ * @vue-prop {Boolean} [dragDrawerWidth=false] 輸入是否使用拖曳抽屜寬度分隔條布林值，預設false
+ * @vue-prop {String} [drawerBarColor='#ddd'] 輸入分隔條顏色字串，預設'#ddd'
+ * @vue-prop {Number} [drawerBarSize=2] 輸入分隔條尺寸數字，為分隔條寬度，單位為px，預設2
+ * @vue-prop {String} [drawerBarBorderColor='transparent'] 輸入分隔條框線顏色字串，預設'transparent'
+ * @vue-prop {Number} [drawerBarBorderSize=3] 輸入分隔條框線寬度數字，單位為px，預設3，通常配合barBorderColor='transparent'使可拖曳區加大又不遮蔽可視區
  */
 export default {
     directives: {
@@ -101,6 +142,14 @@ export default {
             type: Number,
             default: 200,
         },
+        drawerWidthMin: {
+            type: Number,
+            default: null,
+        },
+        drawerWidthMax: {
+            type: Number,
+            default: null,
+        },
         afloat: {
             type: Boolean,
             default: false,
@@ -121,10 +170,34 @@ export default {
             type: Number,
             default: 1,
         },
+        dragDrawerWidth: {
+            type: Boolean,
+            default: false,
+        },
+        drawerBarColor: {
+            type: String,
+            default: '#ddd',
+        },
+        drawerBarSize: {
+            type: Number,
+            default: 2,
+        },
+        drawerBarBorderColor: {
+            type: String,
+            default: 'transparent',
+        },
+        drawerBarBorderSize: {
+            type: Number,
+            default: 3, //抽屜內捲軸通常是WPanelScrolly的捲軸故寬度是8px, 而拖曳寬度bar邊寬是雙向展開, 故不能超過此8px
+        },
     },
     data: function() {
         return {
 
+            das: null,
+
+            drawerWidthTrans: 200,
+
             timerOverlay1Basic: null,
             showOverlay1Basic: false,
             effOverlay1Basic: false,
@@ -141,7 +214,34 @@ export default {
             // showOverlay4Translate: false,
             effOverlay4Translate: false,
 
+            timerOverlay5DragDrawerBar: null,
+            showOverlay5DragDrawerBar: false,
+
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //das
+        let das = domDragBarAndScroll(vo.$refs.divPanel, vo.$refs.divBar, { useTouchDragForPanel: false })
+        das.on('dragBar', vo.dragBar)
+
+        //save
+        vo.das = das
+
+    },
+    beforeDestroy: function() {
+        //console.log('beforeDestroy')
+
+        let vo = this
+
+        //clear
+        if (vo.das) {
+            vo.das.clear()
         }
+
     },
     computed: {
 
@@ -159,6 +259,12 @@ export default {
             return ''
         },
 
+        changeDrawerWidth: function() {
+            let vo = this
+            vo.drawerWidthTrans = vo.drawerWidth
+            return ''
+        },
+
         virtualZoneWidth: function() {
             if (!this.value) {
                 return 0
@@ -166,7 +272,7 @@ export default {
             if (this.afloat) {
                 return 0
             }
-            return this.drawerWidth
+            return this.drawerWidthTrans
         },
 
         isAtLeft: function() {
@@ -221,13 +327,29 @@ export default {
             if (this.afloat) {
                 return '100%'
             }
-            return `${this.drawerWidth}px`
+            return `${this.drawerWidthTrans}px`
         },
 
         effDrawerClassShadow: function() {
             return this.afloat && this.showOverlay3Shadow ? 'bs' : ''
         },
 
+        bw: function() {
+            //console.log('computed changeParam')
+
+            let vo = this
+
+            return vo.drawerBarSize + vo.drawerBarBorderSize * 2
+        },
+
+        effDrawerBarColor: function() {
+            return color2hex(this.drawerBarColor)
+        },
+
+        effDrawerBarBorderColor: function() {
+            return color2hex(this.drawerBarBorderColor)
+        },
+
     },
     methods: {
 
@@ -276,11 +398,14 @@ export default {
             clearTimeout(vo.timerOverlay2Detect)
             clearTimeout(vo.timerOverlay3Shadow)
             clearTimeout(vo.timerOverlay4Translate)
+            clearTimeout(vo.timerOverlay5DragDrawerBar)
 
             let sec
 
             //check
             if (value) {
+                //顯示
+
                 // vo.fsmShowOverlay.showOverlay()
                 // vo.fsmShowStateOverlay.showOverlay()
                 sec = 20
@@ -307,8 +432,14 @@ export default {
                     vo.effOverlay4Translate = true
                 }, sec)
 
+                vo.timerOverlay5DragDrawerBar = setTimeout(() => {
+                    vo.showOverlay5DragDrawerBar = true
+                }, 300)
+
             }
             else {
+                //隱藏
+
                 // vo.fsmShowOverlay.hideOverlay()
                 // vo.fsmShowStateOverlay.hideOverlay()
                 sec = 300
@@ -339,6 +470,8 @@ export default {
                 //     vo.showOverlay4Translate = false
                 // }, sec)
 
+                vo.showOverlay5DragDrawerBar = false
+
             }
 
             //emit
@@ -346,6 +479,100 @@ export default {
 
         },
 
+        dragBar: function({ clientX }) {
+            // console.log('methods dragBar', clientX)
+
+            let vo = this
+
+            //check dragDrawerWidth
+            if (!vo.dragDrawerWidth) {
+                return
+            }
+
+            //check value
+            if (!vo.value) {
+                return
+            }
+
+            //getWindowWidth
+            let getWindowWidth = () => {
+                let w1 = get(window, 'innerWidth')
+                // console.log('window.innerWidth', window.innerWidth)
+                let w2 = get(document, 'documentElement.clientWidth')
+                // console.log('document.documentElement.clientWidth', document.documentElement.clientWidth)
+                let w3 = get(document, 'body.clientWidth')
+                // console.log('document.body.clientWidth', document.body.clientWidth)
+                let ws = [w1, w2, w3]
+                ws = filter(ws, isNumber)
+                let w = min(ws)
+                return w
+            }
+
+            //getWindowWidth
+            let windowWidth = getWindowWidth()
+
+            //bd
+            let bd = null
+            if (!vo.afloatByFix) {
+                //抽屜浮動於組件panel
+                bd = vo.$el.getBoundingClientRect()
+            }
+            else {
+                //抽屜浮動於body
+                bd = {
+                    left: 0,
+                    width: windowWidth,
+                }
+            }
+
+            let x = clientX
+
+            //dw
+            let dw = null
+            if (vo.isAtLeft) {
+                //抽屜在左
+                dw = x - bd.left
+            }
+            else {
+                //抽屜在右
+                dw = bd.width - (x - bd.left)
+            }
+            // console.log(bd, 'x', x, 'dw', dw)
+
+            //dwMax
+            let dwMax = null
+            if (!vo.afloatByFix) {
+                //抽屜浮動於組件panel
+                dwMax = vo.$el.offsetWidth
+            }
+            else {
+                //抽屜浮動於body
+                dwMax = windowWidth
+            }
+            if (isnum(vo.drawerWidthMax)) {
+                dwMax = cdbl(vo.drawerWidthMax)
+            }
+            // console.log('dwMax', dwMax, 'windowWidth', windowWidth)
+
+            //dwMin
+            let dwMin = 0
+            if (isnum(vo.drawerWidthMin)) {
+                dwMin = cdbl(vo.drawerWidthMin)
+            }
+
+            //min, max
+            dw = Math.min(dw, dwMax)
+            dw = Math.max(dw, dwMin)
+
+            //update
+            vo.drawerWidthTrans = dw
+            // console.log('dw', dw)
+
+            //emit
+            vo.$emit('update:drawerWidth', dw)
+
+        },
+
     },
 }
 </script>

package/src/components/WImageCascadingDyn.vue

@@ -602,7 +602,7 @@ export default {
     margin: 0;
     padding: 0;
     display: block;
-    background-color: transparent;
+    background: transparent;
     border-style: none;
 }
 .inp:focus {

package/src/components/WListExpandItem.vue

@@ -37,7 +37,7 @@
                         v-if="hasIcon"
                     ></WIcon>
 
-                    <div :style="`color:${useTextColor}; ${useTextFontSize}`">
+                    <div :style="`transition:all 0.3s; color:${useTextColor}; ${useTextFontSize}`">
                         {{text}}
                     </div>
 

package/src/components/WListVerticalItem.vue

@@ -21,7 +21,7 @@
                     v-if="hasIcon"
                 ></WIcon>
 
-                <div :style="`color:${useTextColor}; ${useTextFontSize}`">
+                <div :style="`transition:all 0.3s; color:${useTextColor}; ${useTextFontSize}`">
                     {{text}}
                 </div>
 

package/src/components/WPanelDivideHorizontal.vue

@@ -21,9 +21,9 @@
 
             <div
                 ref="divBar"
-                :style="`position:absolute; z-index:1; left:${(r)*panelWidth-bw/2}px; width:${bw}px; height:${panelHeight}px; border-left:${barBorderSize}px solid ${barBorderColor}; border-right:${barBorderSize}px solid ${barBorderColor}; cursor:col-resize; user-select:none;`"
+                :style="`position:absolute; z-index:1; left:${(r)*panelWidth-bw/2}px; width:${bw}px; height:${panelHeight}px; border-left:${barBorderSize}px solid ${useBarBorderColor}; border-right:${barBorderSize}px solid ${useBarBorderColor}; cursor:col-resize; user-select:none;`"
             >
-                <div :style="`width:${barSize}px; height:${panelHeight}px; background-color:${barColor};`"></div>
+                <div :style="`width:${barSize}px; height:${panelHeight}px; background:${useBarColor};`"></div>
             </div>
 
             <div ref="right" :style="`width:${(1-r)*panelWidth}px; height:${panelHeight}px;`">
@@ -43,6 +43,7 @@
 <script>
 import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
 import domResize from '../js/domResize.mjs'
+import color2hex from '../js/vuetifyColor.mjs'
 
 
 /**
@@ -50,8 +51,8 @@ import domResize from '../js/domResize.mjs'
  * @vue-prop {Number} [min=0] 輸入分隔條位置最小比例數字，範圍為0~1，需小於max，若min大於max則由min主導，預設0
  * @vue-prop {Number} [max=1] 輸入分隔條位置最大比例數字，範圍為0~1，需大於min，若min大於max則由min主導，預設1
  * @vue-prop {String} [barColor='#ddd'] 輸入分隔條顏色字串，預設'#ddd'
- * @vue-prop {String} [barBorderColor='transparent'] 輸入分隔條框線顏色字串，預設'transparent'
  * @vue-prop {Number} [barSize=2] 輸入分隔條尺寸數字，為分隔條寬度，單位為px，預設2
+ * @vue-prop {String} [barBorderColor='transparent'] 輸入分隔條框線顏色字串，預設'transparent'
  * @vue-prop {Number} [barBorderSize=3] 輸入分隔條框線寬度數字，單位為px，預設3，通常配合barBorderColor='transparent'使可拖曳區加大又不遮蔽可視區
  */
 export default {
@@ -75,14 +76,14 @@ export default {
             type: String,
             default: '#ddd',
         },
-        barBorderColor: {
-            type: String,
-            default: 'transparent',
-        },
         barSize: {
             type: Number,
             default: 2,
         },
+        barBorderColor: {
+            type: String,
+            default: 'transparent',
+        },
         barBorderSize: {
             type: Number,
             default: 3,
@@ -148,6 +149,14 @@ export default {
             return vo.barSize + vo.barBorderSize * 2
         },
 
+        useBarColor: function() {
+            return color2hex(this.barColor)
+        },
+
+        useBarBorderColor: function() {
+            return color2hex(this.barBorderColor)
+        },
+
     },
     methods: {
 

package/src/components/WPanelDivideVertical.vue

@@ -21,9 +21,9 @@
 
             <div
                 ref="divBar"
-                :style="`position:absolute; z-index:1; top:${(r)*panelHeight-bw/2}px; width:${panelWidth}px; height:${barSize}px; border-top:${barBorderSize}px solid ${barBorderColor}; border-bottom:${barBorderSize}px solid ${barBorderColor}; cursor:row-resize; user-select:none;`"
+                :style="`position:absolute; z-index:1; top:${(r)*panelHeight-bw/2}px; width:${panelWidth}px; height:${barSize}px; border-top:${barBorderSize}px solid ${useBarBorderColor}; border-bottom:${barBorderSize}px solid ${useBarBorderColor}; cursor:row-resize; user-select:none;`"
             >
-                <div :style="`width:${panelWidth}px; height:${barSize}px; background-color:${barColor};`"></div>
+                <div :style="`width:${panelWidth}px; height:${barSize}px; background:${useBarColor};`"></div>
             </div>
 
             <div ref="bottom" :style="`width:${panelWidth}px; height:${(1-r)*panelHeight}px;`">
@@ -43,6 +43,7 @@
 <script>
 import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
 import domResize from '../js/domResize.mjs'
+import color2hex from '../js/vuetifyColor.mjs'
 
 
 /**
@@ -148,6 +149,14 @@ export default {
             return vo.barSize + vo.barBorderSize * 2
         },
 
+        useBarColor: function() {
+            return color2hex(this.barColor)
+        },
+
+        useBarBorderColor: function() {
+            return color2hex(this.barBorderColor)
+        },
+
     },
     methods: {
 

package/src/components/WPanelScrollyCore.vue

@@ -567,7 +567,7 @@ export default {
     background: transparent;
 }
 .sb::-webkit-scrollbar-thumb {
-    background-color: rgba(0,0,0,0.3);
+    background: rgba(0,0,0,0.3);
     border-radius: 20px;
     border: 3px solid transparent;
 }