w-component-vue 2.3.35 → 2.3.37

package/src/components/WListCheck.vue

@@ -111,7 +111,7 @@
                     :uncheckedIconColorHover="props.isActive?itemCheckIconUncheckedIconColorActive:itemCheckIconUncheckedIconColorHover"
                     :uncheckedIconColorDisabled="itemCheckIconUncheckedIconColorDisabled"
                     :editable="getEditable(props.item.data)"
-                    :value="itemsCheck[props.kitem]"
+                    :value="getCheck(props.item.data)"
                 ></WCheckbox>
 
                 <div :style="`padding-right:${spaceBetweenCheckboxAndContent}px;`"></div>
@@ -155,11 +155,13 @@ import isEqual from 'lodash/isEqual'
 import cloneDeep from 'lodash/cloneDeep'
 import isestr from 'wsemi/src/isestr.mjs'
 import isobj from 'wsemi/src/isobj.mjs'
+import iseobj from 'wsemi/src/iseobj.mjs'
 import isearr from 'wsemi/src/isearr.mjs'
 import arrHas from 'wsemi/src/arrHas.mjs'
 import sep from 'wsemi/src/sep.mjs'
 import o2j from 'wsemi/src/o2j.mjs'
 import cstr from 'wsemi/src/cstr.mjs'
+import strleft from 'wsemi/src/strleft.mjs'
 import domResize from '../js/domResize.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
 import parseSpace from '../js/parseSpace.mjs'
@@ -561,8 +563,7 @@ export default {
             panelHeight: 0,
 
             itemsTrans: [],
-            itemsCheck: [],
-            // itemsShow: [],
+            kpCheck: {},
 
             queryTrans: '',
             queryFocusedTrans: false,
@@ -640,19 +641,51 @@ export default {
 
         },
 
-        getCheck: function (v, value) {
-            // console.log('getCheck', v, value)
-
+        getItem: function(v) {
+            // console.log('getItem', v)
             let vo = this
-
-            //vt
-            let vt = null
+            let r = null
             if (vo.isObjValue && isestr(vo.keyPickForObjItem)) {
-                vt = get(v, vo.keyPickForObjItem)
+                r = get(v, vo.keyPickForObjItem)
             }
             else {
-                vt = v
+                r = v
+            }
+            return r
+        },
+
+        getKeyFromItemAndInd: function(v, k) {
+            // console.log('getKeyFromItemAndInd', v, k)
+            let vo = this
+            let vt = vo.getItem(v)
+            if (iseobj(vt)) {
+                vt = JSON.stringify(vt)
+                vt = strleft(vt, 20)
             }
+            let r = `${k}|${vt}`
+            return r
+        },
+
+        getKeyFromItem: function(v) {
+            // console.log('getKeyFromItem', v)
+            let vo = this
+            let vk = null
+            each(vo.items, (_v, k) => {
+                if (isEqual(_v, v)) {
+                    vk = vo.getKeyFromItemAndInd(v, k)
+                    return false //跳出
+                }
+            })
+            return vk
+        },
+
+        judgeItem: function (v, value) {
+            // console.log('judgeItem', v, value)
+
+            let vo = this
+
+            //vt
+            let vt = vo.getItem(v)
 
             //check
             let check = null
@@ -660,7 +693,7 @@ export default {
                 check = arrHas(value, vt)
             }
             else {
-                check = isEqual(vt, value)
+                check = isEqual(value, vt)
             }
 
             return check
@@ -720,25 +753,27 @@ export default {
 
             let vo = this
 
-            //itemsCheck
-            let kLast = -1
-            let itemsCheck = map(vo.items, (v, k) => {
-                let check = vo.getCheck(v, value)
+            //kpCheck
+            let kLast = null
+            let kpCheck = {}
+            each(vo.items, (v, k) => {
+                let vk = vo.getKeyFromItemAndInd(v, k) //k為真實ind
+                let check = vo.judgeItem(v, value)
+                kpCheck[vk] = check
                 if (check) {
-                    kLast = k
+                    kLast = vk
                 }
-                return check
             })
-            // console.log('itemsCheck', itemsCheck)
+            // console.log('kpCheck', kpCheck)
             // console.log('kLast', kLast)
 
             //單選時僅允許最後核選為有效值
-            if (!vo.multiCheck && kLast >= 0) {
-                itemsCheck = map(itemsCheck, (v) => {
-                    return false
+            if (!vo.multiCheck && kLast !== null) {
+                each(kpCheck, (v, k) => {
+                    kpCheck[k] = false
                 })
-                itemsCheck[kLast] = true
-                // console.log('itemsCheck(single)', itemsCheck)
+                kpCheck[kLast] = true
+                // console.log('kpCheck(single)', kpCheck)
             }
 
             //itemsTrans
@@ -767,7 +802,7 @@ export default {
 
             //save
             vo.itemsTrans = itemsTrans
-            vo.itemsCheck = itemsCheck
+            vo.kpCheck = kpCheck
 
         },
 
@@ -782,51 +817,49 @@ export default {
             }
 
             //cloneDeep
-            let itemsCheck = cloneDeep(vo.itemsCheck)
+            let kpCheck = cloneDeep(vo.kpCheck)
+            // console.log('kpCheck(cloneDeep)', kpCheck)
+
+            //vk
+            let vk = vo.getKeyFromItem(item) //kitem可能受list query影響, 為非真實ind
+            // console.log('vk', vk)
 
             //modify
             if (vo.multiCheck) {
                 //多選
-                itemsCheck[kitem] = !itemsCheck[kitem]
+                kpCheck[vk] = !kpCheck[vk]
             }
             else {
                 //單選
-                if (!itemsCheck[kitem]) {
-                    each(itemsCheck, (v, k) => {
-                        if (k === kitem) {
-                            itemsCheck[k] = true
-                        }
-                        else {
-                            itemsCheck[k] = false
-                        }
+                if (!kpCheck[kitem]) {
+                    each(kpCheck, (v, k) => {
+                        kpCheck[k] = false
                     })
+                    kpCheck[vk] = true
                 }
                 // else { //不提供單選時點擊已勾選能取消機制
-                //     itemsCheck[kitem] = !itemsCheck[kitem]
+                //     kpCheck[kitem] = !kpCheck[kitem]
                 // }
             }
-            // console.log('itemsCheck', itemsCheck)
+            // console.log('kpCheck', kpCheck)
 
             //value
             let value = []
-            each(itemsCheck, (b, k) => {
+            each(vo.items, (v, k) => {
+
+                //vk
+                let vk = vo.getKeyFromItemAndInd(v, k)
+
+                //check
+                let check = kpCheck[vk]
 
                 //check
-                if (!b) {
+                if (!check) {
                     return true //跳出換下一個
                 }
 
-                //v
-                let v = cloneDeep(vo.items[k])
-
                 //vt
-                let vt = null
-                if (vo.isObjValue && isestr(vo.keyPickForObjItem)) {
-                    vt = get(v, vo.keyPickForObjItem)
-                }
-                else {
-                    vt = v
-                }
+                let vt = vo.getItem(v)
 
                 //push
                 value.push(vt)
@@ -837,14 +870,15 @@ export default {
                 value = get(value, 0, null)
                 // console.log('value(single)', value)
             }
+            // console.log('value', value)
 
             //save
-            vo.itemsCheck = itemsCheck
-            // console.log('itemsCheck', itemsCheck)
+            vo.kpCheck = kpCheck
+            // console.log('kpCheck', kpCheck)
 
             //emit
             vo.$emit('click', {
-                check: itemsCheck[kitem],
+                check: kpCheck[vk],
                 item: cloneDeep(vo.items[kitem]),
                 kitem,
             })
@@ -882,7 +916,22 @@ export default {
 
         },
 
+        getCheck: function(item) {
+            // console.log('methods getCheck', item)
+
+            let vo = this
+
+            //vk
+            let vk = vo.getKeyFromItem(item)
+
+            //b
+            let b = vo.kpCheck[vk]
+
+            return b
+        },
+
         getEditable: function(item) {
+            // console.log('methods getEditable', item)
             // let vo = this
             let b = get(item, 'editable', true)
             return b

package/src/components/WSegmentsVertical.vue

@@ -5,6 +5,13 @@
 
             <div :style="`position:relative; width:${plotWidth}px; height:${plotHeight}px; border-left:1px solid ${useAxisColor};`">
 
+                <div
+                    :style="`position:absolute; top:50%; left:0%; width:${100}px; color:${useTitleColor}; font-size:${titleFontSize}; text-align:center; transform-origin:center; transform:translate(-50%,-50%) rotate(-90deg) translateY(${useTitleShift}px);`"
+                    v-if="title"
+                >
+                    {{title}}
+                </div>
+
                 <div
                     :style="`position:absolute; top:${l.y}px; left:0px; transform:translate( calc( ${getLabelShift(l.align)} ), -50% );`"
                     :key="'label'+kl"
@@ -24,13 +31,27 @@
                 </div>
 
                 <div
-                    :style="`position:absolute; top:${s.y}px; left:-${segmentSize/2}px; width:${segmentSize}px; height:${s.height}px; background:${getSegmentBackgroundColor(ks)}; border:1px solid ${getSegmentBorderColor(ks)}; ${useSegmentCursor}`"
+                    :style="`position:absolute; top:${s.y}px; left:-${segmentSize/2}px; width:${segmentSize}px; height:${s.height}px; ${getSegmentBackground(ks)} ${getSegmentBorder(ks)} ${useSegmentCursor}`"
                     :key="'sample-block'+ks"
                     v-for="(s,ks) in useSamplesLocs"
                     @click="(ev)=>{clickSegment(ev,s.data)}"
                 >
                 </div>
 
+                <div :style="`position:absolute; top:0px; left:0px; transform:translateX(-${paddingLeft}px);`">
+                    <slot
+                        name="support-left"
+                        :convertValueToY="convertValueToY"
+                    ></slot>
+                </div>
+
+                <div :style="`position:absolute; top:0px; left:${useTickOuter}px;`">
+                    <slot
+                        name="support-right"
+                        :convertValueToY="convertValueToY"
+                    ></slot>
+                </div>
+
                 <div
                     :style="`position:absolute; top:${s.yc}px; left:${useTextShift}px;`"
                     :key="'sample-text'+ks"
@@ -134,9 +155,12 @@ import values from 'lodash/values'
 import isestr from 'wsemi/src/isestr.mjs'
 import isfun from 'wsemi/src/isfun.mjs'
 import isnum from 'wsemi/src/isnum.mjs'
+import isobj from 'wsemi/src/isobj.mjs'
 import cdbl from 'wsemi/src/cdbl.mjs'
+import replace from 'wsemi/src/replace.mjs'
 import WPopup from './WPopup.vue'
 import parseSpace from '../js/parseSpace.mjs'
+import parseDirection from '../js/parseDirection.mjs'
 import color2hex from '../js/vuetifyColor.mjs'
 
 
@@ -150,6 +174,10 @@ import color2hex from '../js/vuetifyColor.mjs'
  * @vue-prop {String} [keyText='text'] 輸入項目物件存放顯示文字之欄位字串，預設'text'
  * @vue-prop {Number} [valueMin=null] 輸入項目陣列內全部值之最小值數字，預設null
  * @vue-prop {Number} [valueMax=null] 輸入項目陣列內全部值之最大值數字，預設null
+ * @vue-prop {String} [title='left'] 輸入軸標題文字字串，可選'left'與'right'，預設'left'
+ * @vue-prop {String} [titleColor='#444'] 輸入軸標題文字顏色字串，預設'#444'
+ * @vue-prop {String} [titleFontSize='1rem'] 輸入軸標題文字字型大小字串，預設'1rem'
+ * @vue-prop {Number} [titleShift=null] 輸入軸標題與左側軸距離數字，單位為px，若給null則自動使用值為-paddingStyle.left+12，預設null
  * @vue-prop {String} [alignStart='left'] 輸入項目起始值刻度文字對齊字串，可選'left'與'right'，預設'left'
  * @vue-prop {String} [alignEnd='right'] 輸入項目結束值刻度文字對齊字串，可選'left'與'right'，預設'right'
  * @vue-prop {Function} [funFormatTickValue=null] 輸入處理項目數據之刻度值用以顯示函數，預設null
@@ -158,9 +186,13 @@ import color2hex from '../js/vuetifyColor.mjs'
  * @vue-prop {Number} [tickSize=5] 輸入刻度尺寸(為單側寬度)數字，單位為px，預設5
  * @vue-prop {String} [tickLabelColor='#666'] 輸入刻度文字顏色字串，預設'#666'
  * @vue-prop {String} [tickLabelFontSize='0.7rem'] 輸入刻度文字字型大小字串，預設'0.7rem'
+ * @vue-prop {String} [segmentBackgroundType='color'] 輸入區塊背景類型字串，可選'color'或'image'，預設'color'
+ * @vue-prop {String} [segmentBackgroundImage=''] 輸入區塊背景圖片字串，通過background-image:url(...)設定，預設''
+ * @vue-prop {Function} [funSegmentBackgroundImage=null] 輸入處理項目數據之區塊背景圖片函數，預設null
+ * @vue-prop {String} [segmentBackgroundImageSize='75%'] 輸入區塊背景圖片尺寸字串，預設'75%'
  * @vue-prop {String} [segmentBackgroundColor='#FFB74D'] 輸入區塊背景顏色字串，預設'#FFB74D'
  * @vue-prop {Function} [funSegmentBackgroundColor=null] 輸入處理項目數據之區塊背景函數，預設null
- * @vue-prop {String} [segmentBorderColor='#FFB74D'] 輸入區塊邊框顏色字串，預設'#FB8C00'
+ * @vue-prop {String|Object} [segmentBorderColor='#FFB74D'] 輸入區塊邊框顏色字串或物件，給予物件時可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，預設'#FB8C00'
  * @vue-prop {Function} [funSegmentBorderColor=null] 輸入處理項目數據之區塊邊框函數，預設null
  * @vue-prop {Number} [segmentSize=6] 輸入區塊尺寸(為兩側總寬度)數字，單位為px，預設6
  * @vue-prop {Boolean} [textWithPopup=false] 輸入項目文字是否可點擊顯示popup彈窗布林值，預設false
@@ -169,7 +201,7 @@ import color2hex from '../js/vuetifyColor.mjs'
  * @vue-prop {String} [textBackgroundColor='#ddd'] 輸入項目文字區之背景顏色字串，預設'#ddd'
  * @vue-prop {Number} [textTriangularSize=15] 輸入項目文字區之箭頭長度數字，單位為px，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設15
  * @vue-prop {Number} [textTriangularRatio=1.5] 輸入項目文字區之箭頭長寬比值數字，若textTriangularSize/textTriangularRatio*2小於項目文字區高度時則會破圖，預設1.5
- * @vue-prop {Number} [textShift=null] 輸入項目文字區與左側軸距離數字，單位為px，若給null則自動使用paddingStyle.left值，預設null
+ * @vue-prop {Number} [textShift=null] 輸入項目文字區與左側軸距離數字，單位為px，若給null則自動使用值為1+segmentSize/2+paddingStyle.left，預設null
  * @vue-prop {Boolean} [textCanClick=false] 輸入項目文字是否可點擊布林值，預設false
  * @vue-prop {Boolean} [segmentCanClick=false] 輸入區塊是否可點擊布林值，預設false
  */
@@ -221,6 +253,22 @@ export default {
             type: Number,
             default: null,
         },
+        title: {
+            type: String,
+            default: '',
+        },
+        titleColor: {
+            type: String,
+            default: '#444',
+        },
+        titleFontSize: {
+            type: String,
+            default: '1rem',
+        },
+        titleShift: {
+            type: Number,
+            default: null,
+        },
         alignStart: {
             type: String,
             default: 'left',
@@ -253,6 +301,10 @@ export default {
             type: String,
             default: '0.7rem',
         },
+        segmentBackgroundType: {
+            type: String,
+            default: 'color', //color image
+        },
         segmentBackgroundColor: {
             type: String,
             default: '#FFB74D',
@@ -261,8 +313,20 @@ export default {
             type: Function,
             default: null,
         },
-        segmentBorderColor: {
+        segmentBackgroundImage: {
             type: String,
+            default: '',
+        },
+        funSegmentBackgroundImage: {
+            type: Function,
+            default: null,
+        },
+        segmentBackgroundImageSize: {
+            type: String,
+            default: '75%',
+        },
+        segmentBorderColor: {
+            type: [String, Object],
             default: '#FB8C00',
         },
         funSegmentBorderColor: {
@@ -479,6 +543,14 @@ export default {
             return r
         },
 
+        userValueRange: function() {
+            let vo = this
+
+            let r = vo.useValueMax - vo.useValueMin
+
+            return r
+        },
+
         useItems: function() {
             let vo = this
 
@@ -572,14 +644,11 @@ export default {
         useLabelsLocs: function() {
             let vo = this
 
-            //range
-            let range = vo.useValueMax - vo.useValueMin
-
             //locs
             let locs = map(vo.useLabels, (v) => {
 
                 //y
-                let y = (v.value - vo.useValueMin) / range * vo.plotHeight
+                let y = vo.convertValueToY(v.value)
 
                 //label
                 let label = v.value
@@ -632,6 +701,11 @@ export default {
             return locs
         },
 
+        useTitleColor: function() {
+            let vo = this
+            return color2hex(vo.titleColor)
+        },
+
         useAxisColor: function() {
             let vo = this
             return color2hex(vo.axisColor)
@@ -653,6 +727,29 @@ export default {
             return b ? 'cursor:pointer;' : ''
         },
 
+        useTitleShift: function() {
+            let vo = this
+
+            //titleShift
+            if (isNumber(vo.titleShift)) {
+                return vo.titleShift
+            }
+
+            //自動計算
+            let s = -vo.paddingLeft + 12
+
+            return s
+        },
+
+        useTickOuter: function() {
+            let vo = this
+
+            let s = vo.tickSize
+            s += 4
+
+            return s
+        },
+
         useTextShift: function() {
             let vo = this
 
@@ -661,7 +758,7 @@ export default {
                 return vo.textShift
             }
 
-            //給予paddingLeft
+            //自動計算
             let s = 1 + vo.segmentSize / 2
             if (vo.useAlignStart === 'right' || vo.useAlignEnd === 'right') {
                 s += vo.paddingLeft
@@ -689,6 +786,14 @@ export default {
     },
     methods: {
 
+        convertValueToY: function(v) {
+            let vo = this
+
+            let y = (v - vo.useValueMin) / vo.userValueRange * vo.plotHeight
+
+            return y
+        },
+
         getLabelShift: function(align) {
             let vo = this
 
@@ -696,13 +801,31 @@ export default {
             if (align === 'left') {
                 t = '-100% - '
             }
-            let s = Math.max(vo.tickSize, 0)
-            s += 4
+            let s = vo.useTickOuter
             let c = `${t}${s}px`
 
             return c
         },
 
+        getSegmentBackground: function(k) {
+            let vo = this
+
+            let bg = ''
+            if (vo.segmentBackgroundType === 'color') {
+                bg = `background:${vo.getSegmentBackgroundColor(k)};`
+            }
+            else if (vo.segmentBackgroundType === 'image') {
+                let segmentBackgroundImageSize = vo.segmentBackgroundImageSize
+                segmentBackgroundImageSize = replace(segmentBackgroundImageSize, ';', '')
+                bg = `background-image:url('${vo.getSegmentBackgroundImage(k)}'); background-size:${segmentBackgroundImageSize}; background-repeat:repeat;`
+            }
+            else {
+                throw new Error(`segmentBackgroundType[${vo.segmentBackgroundType}] need to set 'color' or 'image'`)
+            }
+
+            return bg
+        },
+
         getSegmentBackgroundColor: function(k) {
             let vo = this
 
@@ -716,28 +839,67 @@ export default {
                 let item = get(vo, `useItems.${k}.data`, {})
 
                 //funSegmentBackgroundColor
-                c = vo.funSegmentBackgroundColor(item, c)
+                c = vo.funSegmentBackgroundColor(item)
 
             }
 
             return c
         },
 
-        getSegmentBorderColor: function(k) {
+        getSegmentBackgroundImage: function(k) {
             let vo = this
 
-            //color2hex
-            let c = color2hex(vo.segmentBorderColor)
+            //img
+            let img = vo.segmentBackgroundImage
 
             //check
-            if (isfun(vo.funSegmentBorderColor)) {
+            if (isfun(vo.funSegmentBackgroundImage)) {
 
                 //item
                 let item = get(vo, `useItems.${k}.data`, {})
 
-                //funSegmentBorderColor
-                c = vo.funSegmentBorderColor(item, c)
+                //funSegmentBackgroundImage
+                img = vo.funSegmentBackgroundImage(item)
+
+            }
+
+            return img
+        },
+
+        getSegmentBorder: function(k) {
+            let vo = this
 
+            //cv
+            let cv = (color) => {
+
+                //color2hex
+                let c = color2hex(color)
+
+                //check
+                if (isfun(vo.funSegmentBorderColor)) {
+
+                    //item
+                    let item = get(vo, `useItems.${k}.data`, {})
+
+                    //funSegmentBorderColor
+                    c = vo.funSegmentBorderColor(item)
+
+                }
+
+                return c
+            }
+
+            let c
+            if (isobj(vo.segmentBorderColor)) {
+                let r = parseDirection(vo.segmentBorderColor, { def: '', type: 'text' })
+                let cl = cv(r.left)
+                let cr = cv(r.right)
+                let ct = cv(r.top)
+                let cb = cv(r.bottom)
+                c = `border-left:1px solid ${cl}; border-right:1px solid ${cr}; border-top:1px solid ${ct}; border-bottom:1px solid ${cb};`
+            }
+            else {
+                c = `border:1px solid ${cv(vo.segmentBorderColor)};`
             }
 
             return c

package/src/js/parseDirection.mjs

@@ -0,0 +1,59 @@
+import isNumber from 'lodash/isNumber'
+import get from 'lodash/get'
+import isstr from 'wsemi/src/isstr.mjs'
+
+
+function parseDirection(obj, opt = {}) {
+
+    //def
+    let def = get(opt, 'def', '')
+
+    //type
+    let type = get(opt, 'type', '')
+    if (type !== 'num' && type !== 'text') {
+        type = 'num'
+    }
+
+    //ck
+    let ck
+    if (type === 'num') {
+        ck = isNumber
+    }
+    else if (type === 'text') {
+        ck = isstr
+    }
+
+    //四方向
+    let left = def
+    let right = def
+    let top = def
+    let bottom = def
+    if (ck(get(obj, 'h'))) {
+        left = get(obj, 'h')
+        right = left
+    }
+    if (ck(get(obj, 'v'))) {
+        top = get(obj, 'v')
+        bottom = top
+    }
+    if (ck(get(obj, 'left'))) {
+        left = get(obj, 'left')
+    }
+    if (ck(get(obj, 'right'))) {
+        right = get(obj, 'right')
+    }
+    if (ck(get(obj, 'top'))) {
+        top = get(obj, 'top')
+    }
+    if (ck(get(obj, 'bottom'))) {
+        bottom = get(obj, 'bottom')
+    }
+
+    //r
+    let r = { left, right, top, bottom }
+
+    return r
+}
+
+
+export default parseDirection