w-component-vue 2.2.32 → 2.2.35

package/src/components/WJsonView.vue

@@ -10,7 +10,7 @@
             :iconToggleColor="iconToggleColor"
             :iconToggleBackgroundColor="iconToggleBackgroundColor"
             :iconToggleBackgroundColorHover="iconToggleBackgroundColorHover"
-            :iconVerticalAlign="'top'"
+            :itemRippleColor="rippleColor"
             :filterKeywords="filterKeywords"
             :filterFunction="filterFunction"
             :loadingText="loadingText"
@@ -24,7 +24,7 @@
         >
             <template v-slot:head="props">
 
-                <div :style="`min-width:${lineNumberWidth}px; height:${iconSize}px; display:flex; align-items:center; justify-content:end;`">
+                <div :style="`${useItemHeightMin} min-width:${lineNumberWidth}px; display:flex; align-items:center; justify-content:end;`">
                     <div :style="`font-size:0.8rem; padding-top:1px; color:#f26; user-select:none;`">{{props.index+1}}</div>
                 </div>
 
@@ -32,7 +32,7 @@
 
             <template v-slot:item="props">
 
-                <div style="display:flex; align-items:center;">
+                <div :style="`${useItemHeightMin} display:flex; align-items:center;`">
 
                     <div style="display:flex;">
                         <div :style="`padding-right:5px; color:${useColors.keyColor};`" v-if="getKey(props.data)!==''">
@@ -129,6 +129,7 @@ import WTree from './WTree.vue'
  * @vue-prop {String} [bolColor='#ab0d90'] 輸入值為布林值時的顏色字串，預設'#ab0d90'
  * @vue-prop {String} [funColor='purple accent-2'] 輸入值為函數時的顏色字串，預設'purple accent-2'
  * @vue-prop {String} [defaultColor='grey darken-4'] 輸入值為其他類型時的顏色字串，預設'grey darken-4'
+ * @vue-prop {String} [rippleColor='rgba(200,200,200,0.4)'] 輸入ripple效果顏色字串，預設'rgba(200,200,200,0.4)'
  * @vue-prop {Boolean} [show=true] 輸入是否為顯示模式，預設true，供組件嵌入popup時, 因先初始化但尚未顯示不需渲染, 可給予show=false避免無限偵測與重算高度問題
  */
 export default {
@@ -226,6 +227,10 @@ export default {
             type: String,
             default: 'grey darken-4',
         },
+        rippleColor: {
+            type: String,
+            default: 'rgba(200,200,200,0.4)',
+        },
         show: {
             type: Boolean,
             default: true,
@@ -301,6 +306,14 @@ export default {
         //     return ft
         // },
 
+        useItemHeightMin: function() {
+            //console.log('computed useItemHeightMin')
+
+            let vo = this
+
+            return `min-height:${Math.max(vo.iconSize, vo.defItemHeight)}px;`
+        },
+
     },
     methods: {
 
@@ -550,6 +563,14 @@ export default {
             return vo.$refs.wt.toggleItemsByFun(cb)
         },
 
+        toggleItemsAll: function(toUnfolding) {
+            // console.log('methods toggleItemsAll', toUnfolding)
+
+            let vo = this
+
+            return vo.$refs.wt.toggleItemsAll(toUnfolding)
+        },
+
     },
 }
 </script>

package/src/components/WLeafletVueDyn.vue

@@ -103,7 +103,7 @@ export default {
             type: Array,
             default: () => [
                 //現在w-leaflet-vue已依賴w-component-vue故為循環引用, 但使用dyn則為脫勾, 故仍需人工更新此處版本
-                'https://cdn.jsdelivr.net/npm/w-leaflet-vue@1.0.24/dist/w-leaflet-vue.umd.js',
+                'https://cdn.jsdelivr.net/npm/w-leaflet-vue@1.0.28/dist/w-leaflet-vue.umd.js',
             ],
         },
         opt: {

package/src/components/WListExpandItem.vue

@@ -25,7 +25,7 @@
 
                 <slot
                     name="header"
-                    :mouseEnter="mouseEnter"
+                    :isHover="mouseEnter"
                     :isActive="active"
                 >
 
@@ -52,7 +52,7 @@
 
                 <slot
                     name="content"
-                    :mouseEnter="mouseEnter"
+                    :isHover="mouseEnter"
                     :isActive="active"
                 >
                 </slot>
@@ -83,7 +83,7 @@ import WIcon from './WIcon.vue'
 /**
  * @vue-prop {String} [text=''] 輸入文字字串，預設''
  * @vue-prop {String} [textFontSize='1rem'] 輸入文字字型大小字串，預設'1rem'
- * @vue-prop {Boolean} [active=false] 輸入是否為主動模式，預設false
+ * @vue-prop {Boolean} [active=false] 輸入是否為主動模式布林值，預設false
  * @vue-prop {Object} [paddingStyle={v:10,h:12}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:10,h:12}
  * @vue-prop {String} [backgroundColor='white'] 輸入背景顏色字串，預設'white'
  * @vue-prop {String} [backgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.2)'

package/src/components/WListHorizontal.vue

@@ -41,6 +41,8 @@
                         :iconColorHover="itemIconColorHover"
                         :iconColorActive="itemIconColorActive"
                         :rippleColor="itemRippleColor"
+                        :clickable="itemClickable"
+                        :cursorPointer="itemCursorPointer"
                         @click="ckItem(item)"
                     >
 
@@ -71,7 +73,6 @@ import size from 'lodash/size'
 import each from 'lodash/each'
 import every from 'lodash/every'
 import isEqual from 'lodash/isEqual'
-import cloneDeep from 'lodash/cloneDeep'
 import isobj from 'wsemi/src/isobj.mjs'
 import domResize from '../js/domResize.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
@@ -80,8 +81,8 @@ import WListItem from './WListItem.vue'
 
 /**
  * @vue-prop {Array} [items=[]] 輸入項目的字串陣列或物件陣列，預設[]
- * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態，預設false
- * @vue-prop {String|Object} [itemActive=null] 輸入活耀項目物件，預設null
+ * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態布林值，預設false
+ * @vue-prop {String|Object} [itemActive=null] 輸入活耀項目字串或物件，預設null
  * @vue-prop {String} [itemTextFontSize='1rem'] 輸入文字字型大小字串，預設'1rem'
  * @vue-prop {String} [keyText='text'] 輸入項目為物件時，存放顯示文字之欄位字串，預設'text'
  * @vue-prop {String} [keyIcon='icon'] 輸入項目為物件時，存放圖標之欄位字串，預設'icon'
@@ -99,6 +100,8 @@ import WListItem from './WListItem.vue'
  * @vue-prop {String} [itemIconColorHover='#222'] 輸入滑鼠移入時圖標顏色字串，預設'#222'
  * @vue-prop {String} [itemIconColorActive='orange darken-3'] 輸入主動模式時圖標顏色字串，預設'orange darken-3'
  * @vue-prop {String} [itemRippleColor='rgba(245,124,0,0.4)'] 輸入ripple效果顏色字串，預設'rgba(245,124,0,0.4)'
+ * @vue-prop {Boolean} [itemClickable=true] 輸入是否為可點擊模式布林值，預設true
+ * @vue-prop {Boolean} [itemCursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  * @vue-prop {Boolean} [borderBottom=true] 輸入主動模式時是否於項目底部顯示高亮線條，預設true
  * @vue-prop {Number} [borderBottomSize=2] 輸入底部高亮線條尺寸(高度)數字，單位px，預設2
  * @vue-prop {String} [borderBottomColor='rgba(245,124,0,0.8)'] 輸入底部高亮線條顏色字串，預設'rgba(245,124,0,0.8)'
@@ -196,6 +199,14 @@ export default {
             type: String,
             default: 'rgba(245,124,0,0.4)',
         },
+        itemClickable: {
+            type: Boolean,
+            default: true,
+        },
+        itemCursorPointer: {
+            type: Boolean,
+            default: true,
+        },
         borderBottom: {
             type: Boolean,
             default: true,
@@ -383,16 +394,11 @@ export default {
             //save itemActiveTrans
             vo.itemActiveTrans = item
 
-            //nextTick
-            vo.$nextTick(() => {
-
-                //emit
-                vo.$emit('click', cloneDeep(item))
+            //emit
+            vo.$emit('click', { ...item })
 
-                //emit
-                vo.$emit('update:itemActive', cloneDeep(item))
-
-            })
+            //emit
+            vo.$emit('update:itemActive', { ...item })
 
         },
 

package/src/components/WListItem.vue

@@ -1,28 +1,33 @@
 <template>
     <div
-        :style="`transition:all 0.3s; border-top-left-radius:${borderRadius}px; border-top-right-radius:${borderRadius}px; ${usePadding} background:${useBackgroundColor}; cursor:pointer;`"
+        :style="`transition:all 0.3s; border-top-left-radius:${borderRadius}px; border-top-right-radius:${borderRadius}px; ${usePadding} background:${useBackgroundColor}; ${clickable&&cursorPointer?'cursor:pointer;':''}`"
         v-domripple="{color:rippleColor}"
         @mouseenter="mouseEnter=true"
         @mouseleave="mouseEnter=false"
-        @click="$emit('click',{icon,text})"
+        @click="clickItem"
     >
-        <div style="display:flex; align-items:center;">
+        <!-- 文字顏色與字型大小放在slot外, 使組件設定能於slot內收到預設影響 -->
+        <div :style="`transition:all 0.3s; color:${useTextColor}; ${useTextFontSize}`">
 
             <slot
-                :mouseEnter="mouseEnter"
+                :isHover="mouseEnter"
                 :isActive="active"
             >
 
-                <WIcon
-                    style="margin-right:8px;"
-                    :icon="icon"
-                    :color="useIconColor"
-                    :size="iconSize"
-                    v-if="hasIcon"
-                ></WIcon>
+                <div style="display:flex; align-items:center;">
+
+                    <WIcon
+                        style="margin-right:8px;"
+                        :icon="icon"
+                        :color="useIconColor"
+                        :size="iconSize"
+                        v-if="hasIcon"
+                    ></WIcon>
+
+                    <div>
+                        {{text}}
+                    </div>
 
-                <div :style="`transition:all 0.3s; color:${useTextColor}; ${useTextFontSize}`">
-                    {{text}}
                 </div>
 
             </slot>
@@ -32,7 +37,6 @@
 </template>
 
 <script>
-import get from 'lodash/get'
 import replace from 'wsemi/src/replace.mjs'
 import domRipple from '../js/domRipple.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
@@ -43,7 +47,7 @@ import WIcon from './WIcon.vue'
 /**
  * @vue-prop {String} [text=''] 輸入文字字串，預設''
  * @vue-prop {String} [textFontSize='1rem'] 輸入文字字型大小字串，預設'1rem'
- * @vue-prop {Boolean} [active=false] 輸入是否為主動模式，預設false
+ * @vue-prop {Boolean} [active=false] 輸入是否為主動模式布林值，預設false
  * @vue-prop {Object} [paddingStyle={v:10,h:12}] 輸入內寬距離設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:10,h:12}
  * @vue-prop {Number} [borderRadius=0] 輸入框圓角度數字，單位為px，預設0
  * @vue-prop {String} [backgroundColor='white'] 輸入背景顏色字串，預設'white'
@@ -58,6 +62,8 @@ import WIcon from './WIcon.vue'
  * @vue-prop {String} [iconColorHover='#222'] 輸入滑鼠移入時圖標顏色字串，預設'#222'
  * @vue-prop {String} [iconColorActive='white'] 輸入主動模式時圖標顏色字串，預設'white'
  * @vue-prop {String} [rippleColor='rgba(255,255,255,0.4)'] 輸入ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
+ * @vue-prop {Boolean} [clickable=true] 輸入是否為可點擊模式布林值，預設true
+ * @vue-prop {Boolean} [cursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  */
 export default {
     directives: {
@@ -140,6 +146,14 @@ export default {
             type: String,
             default: 'rgba(255,255,255,0.4)',
         },
+        clickable: {
+            type: Boolean,
+            default: true,
+        },
+        cursorPointer: {
+            type: Boolean,
+            default: true,
+        },
     },
     data: function() {
         return {
@@ -247,15 +261,19 @@ export default {
     },
     methods: {
 
-        getIcon: function(item) {
-            return get(item, 'icon', '')
-        },
+        clickItem: function() {
+            // console.log('clickItem')
+
+            let vo = this
 
-        getText: function(item) {
-            let t = get(item, 'text', '')
-            if (t === '') {
-                return item
+            //check
+            if (!vo.clickable) {
+                return
             }
+
+            //emit
+            vo.$emit('click', { icon: vo.icon, text: vo.text })
+
         },
 
     }

package/src/components/WListVertical.vue

@@ -39,6 +39,8 @@
                         :iconColorHover="itemIconColorHover"
                         :iconColorActive="itemIconColorActive"
                         :rippleColor="itemRippleColor"
+                        :clickable="itemClickable"
+                        :cursorPointer="itemCursorPointer"
                         @click="ckItem(item)"
                     >
 
@@ -47,7 +49,9 @@
                         >
                             <slot
                                 name="item"
-                                :item="{...item,...props}"
+                                :item="item"
+                                :isHover="props.isHover"
+                                :isActive="props.isActive"
                             >
                             </slot>
                         </template>
@@ -72,7 +76,6 @@ import get from 'lodash/get'
 import size from 'lodash/size'
 import every from 'lodash/every'
 import isEqual from 'lodash/isEqual'
-import cloneDeep from 'lodash/cloneDeep'
 import isEle from 'wsemi/src/isEle.mjs'
 import isobj from 'wsemi/src/isobj.mjs'
 import domResize from '../js/domResize.mjs'
@@ -82,8 +85,8 @@ import WListItem from './WListItem.vue'
 
 /**
  * @vue-prop {Array} [items=[]] 輸入項目的字串陣列或物件陣列，預設[]
- * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態，預設false
- * @vue-prop {String|Object} [itemActive=null] 輸入活耀項目物件，預設null
+ * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態布林值，預設false
+ * @vue-prop {String|Object} [itemActive=null] 輸入活耀項目字串或物件，預設null
  * @vue-prop {String} [itemTextFontSize='1rem'] 輸入文字字型大小字串，預設'1rem'
  * @vue-prop {String} [keyText='text'] 輸入項目為物件時，存放顯示文字之欄位字串，預設'text'
  * @vue-prop {String} [keyIcon='icon'] 輸入項目為物件時，存放圖標之欄位字串，預設'icon'
@@ -99,6 +102,8 @@ import WListItem from './WListItem.vue'
  * @vue-prop {String} [itemIconColorHover='#222'] 輸入滑鼠移入時圖標顏色字串，預設'#222'
  * @vue-prop {String} [itemIconColorActive='white'] 輸入主動模式時圖標顏色字串，預設'white'
  * @vue-prop {String} [itemRippleColor='rgba(255,255,255,0.4)'] 輸入ripple效果顏色字串，預設'rgba(255,255,255,0.4)'
+ * @vue-prop {Boolean} [itemClickable=true] 輸入是否為可點擊模式布林值，預設true
+ * @vue-prop {Boolean} [itemCursorPointer=true] 輸入是否滑鼠移入顯示pointer樣式，預設true
  */
 export default {
     directives: {
@@ -186,6 +191,14 @@ export default {
             type: String,
             default: 'rgba(255,255,255,0.4)',
         },
+        itemClickable: {
+            type: Boolean,
+            default: true,
+        },
+        itemCursorPointer: {
+            type: Boolean,
+            default: true,
+        },
     },
     data: function() {
         return {
@@ -292,16 +305,11 @@ export default {
             //save itemActiveTrans
             vo.itemActiveTrans = item
 
-            //nextTick
-            vo.$nextTick(() => {
-
-                //emit
-                vo.$emit('click', cloneDeep(item))
+            //emit
+            vo.$emit('click', { ...item })
 
-                //emit
-                vo.$emit('update:itemActive', cloneDeep(item))
-
-            })
+            //emit
+            vo.$emit('update:itemActive', { ...item })
 
         },
 

package/src/components/WPanelDivideHorizontal.vue

@@ -2,7 +2,7 @@
     <div
         :changeParam="changeParam"
         v-domresize
-        @domresize="updatePanelSize"
+        @domresize="resizePanel"
     >
 
         <div
@@ -41,6 +41,7 @@
 </template>
 
 <script>
+import isNumber from 'lodash/isNumber'
 import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
 import domResize from '../js/domResize.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
@@ -48,8 +49,12 @@ import color2hex from '../js/vuetifyColor.mjs'
 
 /**
  * @vue-prop {Number} [ratio=0.5] 輸入分隔條位置比例數字，範圍為0~1，預設0.5
- * @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 {Number} [ratioMin=0] 輸入分隔條位置最小比例數字，範圍為0~1，需小於ratioMax，若ratioMin大於ratioMax則由ratioMin主導，預設0
+ * @vue-prop {Number} [ratioMax=1] 輸入分隔條位置最大比例數字，範圍為0~1，需大於ratioMin，若ratioMin大於ratioMax則由ratioMin主導，預設1
+ * @vue-prop {Number} [leftWidthMin=null] 輸入左側區最小寬度數字，處理優先權大於ratioMin與ratioMax，預設null
+ * @vue-prop {Number} [leftWidthMax=null] 輸入左側區最大寬度數字，處理優先權大於ratioMin與ratioMax，預設null
+ * @vue-prop {Number} [rightWidthMin=null] 輸入右側區最小寬度數字，處理優先權大於ratioMin、ratioMax、leftWidthMin與leftWidthMax，預設null
+ * @vue-prop {Number} [rightWidthMax=null] 輸入右側區最大寬度數字，處理優先權大於ratioMin、ratioMax、leftWidthMin與leftWidthMax，預設null
  * @vue-prop {String} [barColor='#ddd'] 輸入分隔條顏色字串，預設'#ddd'
  * @vue-prop {Number} [barSize=2] 輸入分隔條尺寸數字，為分隔條寬度，單位為px，預設2
  * @vue-prop {String} [barBorderColor='transparent'] 輸入分隔條框線顏色字串，預設'transparent'
@@ -64,14 +69,30 @@ export default {
             type: Number,
             default: 0.5, //0~1
         },
-        min: {
+        ratioMin: {
             type: Number,
             default: 0,
         },
-        max: {
+        ratioMax: {
             type: Number,
             default: 1,
         },
+        leftWidthMin: {
+            type: Number,
+            default: null,
+        },
+        leftWidthMax: {
+            type: Number,
+            default: null,
+        },
+        rightWidthMin: {
+            type: Number,
+            default: null,
+        },
+        rightWidthMax: {
+            type: Number,
+            default: null,
+        },
         barColor: {
             type: String,
             default: '#ddd',
@@ -124,16 +145,15 @@ export default {
     computed: {
 
         changeParam: function() {
-            //console.log('computed changeParam')
+            // console.log('computed changeParam')
 
             let vo = this
 
             //ratio
             let r = vo.ratio
 
-            //min, max
-            r = Math.min(r, vo.max)
-            r = Math.max(r, vo.min)
+            //limitRatio
+            r = vo.limitRatio(r)
 
             //save
             vo.r = r
@@ -160,8 +180,8 @@ export default {
     },
     methods: {
 
-        updatePanelSize: function(msg) {
-            //console.log('methods updatePanelSize', msg)
+        resizePanel: function(msg) {
+            //console.log('methods resizePanel', msg)
 
             let vo = this
 
@@ -174,11 +194,63 @@ export default {
 
         },
 
+        limitRatio: function(r) {
+            // console.log('methods limitRatio', r)
+
+            let vo = this
+
+            //ratioMin, ratioMax
+            r = Math.min(r, vo.ratioMax)
+            r = Math.max(r, vo.ratioMin)
+
+            //check
+            if (vo.panelWidth > 0) {
+
+                //leftWidth
+                let leftWidth = (r) * vo.panelWidth
+
+                //check leftWidthMin
+                if (isNumber(vo.leftWidthMin)) {
+                    if (leftWidth < vo.leftWidthMin) {
+                        r = vo.leftWidthMin / vo.panelWidth
+                    }
+                }
+
+                //check leftWidthMax
+                if (isNumber(vo.leftWidthMax)) {
+                    if (leftWidth > vo.leftWidthMax) {
+                        r = vo.leftWidthMax / vo.panelWidth
+                    }
+                }
+
+                //rightWidth
+                let rightWidth = (1 - r) * vo.panelWidth
+
+                //check rightWidthMin
+                if (isNumber(vo.rightWidthMin)) {
+                    if (rightWidth < vo.rightWidthMin) {
+                        r = -(vo.rightWidthMin / vo.panelWidth - 1)
+                    }
+                }
+
+                //check rightWidthMax
+                if (isNumber(vo.rightWidthMax)) {
+                    if (rightWidth > vo.rightWidthMax) {
+                        r = -(vo.rightWidthMax / vo.panelWidth - 1)
+                    }
+                }
+
+            }
+
+            return r
+        },
+
         dragBar: function({ clientX }) {
             //console.log('methods dragBar', clientX)
 
             let vo = this
 
+            //r
             let bd = vo.$el.getBoundingClientRect()
             let x = clientX
             let w = vo.$el.offsetWidth
@@ -187,9 +259,8 @@ export default {
                 r = (x - bd.left) / w //clientX需扣除元件的left位置
             }
 
-            //min, max
-            r = Math.min(r, vo.max)
-            r = Math.max(r, vo.min)
+            //limitRatio
+            r = vo.limitRatio(r)
 
             //save
             vo.r = r