w-component-vue 2.1.57

package/src/components/WJsonViewCore.vue

@@ -0,0 +1,163 @@
+<template>
+    <!-- 需設定width:100%, 因ie11的flex內文字會自動撐開版面導致不會換行 -->
+    <div
+        :style="`position:absolute; top:${item.screenY}px; width:100%; opacity:${item.nowShow?1:0.001};`"
+        :index="item.index"
+        :nowShow="item.nowShow"
+        v-if="item.show && item.filterShow"
+    >
+
+        <div :style="`${styleCell} ${styleVerticalAlignTop} ${styleLineNumber}; width:${lineNumberWidth}px;`">{{item.index+1}}</div>
+
+        <div :style="`${styleCell} ${styleVerticalAlignTop} padding-left:${item.paddingLeft}px;`">
+
+            <div style="position:relative;">
+
+                <div style="position:absolute; top:0px; left:0px; transform:translateX(-100%);">
+                    <WTreeIconToggle
+                        style="display:inline-block; width:16px; transform:translateX(-2px);"
+                        :dir="`${item.displayChildren?'bottom':'right'}`"
+                        :iconColor="iconColor"
+                        :iconBackgroundColor="'transparent'"
+                        :iconBackgroundColorHover="'transparent'"
+                        @click="toggleItems(item)"
+                        v-if="item.stateChildren===1"
+                    ></WTreeIconToggle>
+                    <div style="display:inline-block; width:16px;" v-else></div>
+                </div>
+
+                <div style="">
+
+                    <div :style="`${styleCell} ${styleVerticalAlignTop} white-space:pre; color:${useKeyColor};`" v-if="item.key">
+
+                        <span>{{item.key}}</span>
+
+                        <span :style="`margin:0px 10px; color:${usekeyNumbersColor};`" v-if="item.keyNumbers">
+                            <span v-if="item.keyNumbers.type==='arr'">[{{item.keyNumbers.n}}]</span>
+                            <span v-if="item.keyNumbers.type==='obj'"><span>{</span><span>{{item.keyNumbers.n}}</span><span>}</span></span>
+                        </span>
+
+                        <span v-if="!item.displayChildren"><span style="margin-right:10px;">...</span>{{item.valueTail}}</span>
+
+                    </div>
+
+                    <template v-if="item.value">
+
+                        <div :style="`${styleCell} ${styleVerticalAlignTop} color:${item.valueColor}; ${useStyleWord}`">{{item.value}}</div>
+
+                        <div :style="`${styleCell} ${styleVerticalAlignBottom} color:${item.keyColor};`" v-if="item.valueComma">,</div>
+
+                    </template>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import WTreeIconToggle from './WTreeIconToggle.vue'
+import color2hex from '../js/vuetifyColor.mjs'
+
+
+/**
+ * @vue-prop {Object} item 輸入物件
+ * @vue-prop {Number} [lineNumberWidth=0] 輸入列號區寬度，單位為px，預設0
+ * @vue-prop {String} [iconColor='grey'] 輸入顯隱icon按鈕顏色字串，預設'grey'
+ * @vue-prop {String} [keyColor='grey darken-2'] 輸入鍵值顏色字串，預設'grey darken-2'
+ * @vue-prop {String} [keyNumbersColor='grey lighten-1'] 輸入鍵值內含子節點數量顏色字串，預設'grey lighten-1'
+ * @vue-prop {Boolean} [valueStyleBreakAll=false] 輸入值顯示樣式是否使用強迫斷字換行，主要用於超長連續文字可避免暴版，預設false
+ */
+export default {
+    components: {
+        WTreeIconToggle,
+    },
+    props: {
+        item: {
+            type: Object,
+            default: () => {},
+        },
+        lineNumberWidth: {
+            type: Number,
+            default: 0,
+        },
+        iconColor: {
+            type: String,
+            default: 'grey',
+        },
+        keyColor: {
+            type: String,
+            default: 'grey darken-2',
+        },
+        keyNumbersColor: {
+            type: String,
+            default: 'grey lighten-1',
+        },
+        valueStyleBreakAll: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data: function() {
+        return {
+            //line-height = ( 1 / 0.8(font-size) )^2
+            styleLineNumber: `padding-right:10px; text-align:right; font-size:0.8rem; line-height:1.5625rem; color:#f26; user-select:none;`,
+            styleCell: 'display:table-cell;',
+            styleVerticalAlignTop: 'vertical-align:top;',
+            styleVerticalAlignBottom: 'vertical-align:bottom;',
+        }
+    },
+    mounted: function() {
+    },
+    computed: {
+
+        useKeyColor: function() {
+            //console.log('computed useKeyColor')
+
+            let vo = this
+
+            return color2hex(vo.keyColor)
+        },
+
+        usekeyNumbersColor: function() {
+            //console.log('computed usekeyNumbersColor')
+
+            let vo = this
+
+            return color2hex(vo.keyNumbersColor)
+        },
+
+        useStyleWord: function() {
+            //console.log('computed useStyleWord')
+
+            let vo = this
+
+            if (vo.valueStyleBreakAll) {
+                return 'word-break:break-all;'
+            }
+            return ''
+        },
+
+    },
+    methods: {
+
+        toggleItems: function(item) {
+            //console.log('methods toggleItems', item)
+
+            let vo = this
+
+            //emit
+            vo.$emit('toggle-items', item)
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+</style>
+

package/src/components/WLeafletVueDyn.vue

@@ -0,0 +1,146 @@
+<template>
+    <component ref="$self" :is="cmpName" :opt="opt"></component>
+    <!-- ref=$self為供外部存取組件之用 -->
+</template>
+
+<script>
+import importResources from 'wsemi/src/importResources.mjs'
+import WIconLoading from './WIconLoading.vue'
+import getVue from '../js/getVue.mjs'
+
+
+/**
+ * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入ag-grid與w-aggrid-vue組件js檔案位置字串陣列，預設詳見原始碼處props->pathItems->default
+ * @vue-prop {Object} [opt={}] 輸入w-leaflet-vue設定物件，預設{}
+ * @vue-prop {Array} [opt.center=[23.5, 121.1]] 輸入地圖顯示中點陣列，陣列為WGS84[緯度,經度]，預設[23.5, 121.1]
+ * @vue-prop {Number} [opt.zoom=7] 輸入地圖顯示層級整數，預設7
+ * @vue-prop {Object} [opt.panelBackgroundColor='rgba(255,255,255,0.95)'] 輸入各顯示資訊區背景顏色字串，預設'rgba(255,255,255,0.95)'
+ * @vue-prop {Boolean} [opt.panelBaseMaps.show=true] 輸入底圖選擇區是否顯示布林值，預設true
+ * @vue-prop {Array} [opt.panelBaseMaps.baseMaps=詳見程式碼] 輸入底圖選擇清單陣列，各元素為底圖設定物件，需提供欄位為name(底圖名稱字串)、url(底圖連結字串)、visible(是否顯示布林值)，預設值詳見程式碼的defBaseMaps預設值
+ * @vue-prop {String} [opt.panelBaseMaps.position='topleft'] 輸入底圖選擇區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'topleft'
+ * @vue-prop {Boolean} [opt.panelLabels.show=true] 輸入地圖資訊區是否顯示布林值，預設true
+ * @vue-prop {String} [opt.panelLabels.position='topright'] 輸入地圖資訊區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'topright'
+ * @vue-prop {String} [opt.panelLabels.title=''] 輸入地圖資訊區內標題字串，預設''
+ * @vue-prop {String} [opt.panelLabels.lng='Longitude'] 輸入地圖資訊區內標注經度字串，預設'Longitude'
+ * @vue-prop {String} [opt.panelLabels.lat='Latitude'] 輸入地圖資訊區內標注緯度字串，預設'Latitude'
+ * @vue-prop {String} [opt.panelLabels.zoom='Zoom'] 輸入地圖資訊區內標注顯示層級字串，預設'Zoom'
+ * @vue-prop {Array} [opt.panelLabels.useItems=['lng','lat','zoom']] 輸入地圖資訊區內呈現項目陣列，各元素給字串，'lng'代表經度，'lat'代表緯度，'zoom'代表顯示層級，預設['lng','lat','zoom']
+ * @vue-prop {Boolean} [opt.panelZoom.show=true] 輸入縮放按鈕區是否顯示布林值，預設true
+ * @vue-prop {String} [opt.panelZoom.position='bottomleft'] 輸入縮放按鈕區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'bottomleft'
+ * @vue-prop {Boolean} [opt.panelItems.show=true] 輸入圖層顯隱切換區是否顯示布林值，預設true
+ * @vue-prop {String} [opt.panelItems.position='topleft'] 輸入圖層顯隱切換區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'topleft'
+ * @vue-prop {Boolean} [opt.panelItems.show=true] 輸入圖例區是否顯示布林值，預設true
+ * @vue-prop {String} [opt.panelItems.position='bottomright'] 輸入圖例區位置字串，可選'topleft'、'topright'、'bottomleft'、'bottomright'，預設'bottomright'
+ * @vue-prop {Number} [opt.panelItems.maxWidth=300] 輸入圖例區最大寬度數字，單位px，預設300
+ * @vue-prop {Array} [opt.pointSets=[]] 輸入點集合陣列，各元素為物件，預設[]
+ * @vue-prop {String} [opt.pointSets[i].title=''] 輸入第i個點集合的標題字串，預設為''
+ * @vue-prop {String} [opt.pointSets[i].msg=''] 輸入第i個點集合的說明字串，預設為''
+ * @vue-prop {Number} [opt.pointSets[i].order=null] 輸入第i個點集合的排序用數字，預設null
+ * @vue-prop {String} [opt.pointSets[i].iconSrc=詳見程式碼] 輸入第i個點集合的顯示圖標來源字串，可使用base64格式或網址，預設為google map的點圖標，值詳見程式碼
+ * @vue-prop {Array} [opt.pointSets[i].iconSize=[24,40]] 輸入第i個點集合的顯示圖標尺寸陣列，使用[寬,高]，長寬單位px，預設[24,40]
+ * @vue-prop {Array} [opt.pointSets[i].iconAnchor=[iconSize[0]/2,iconSize[1]]] 輸入第i個點集合的顯示圖標的實際定位位置陣列，由圖標左上角代表實際定位點起算，往左移動為+x，往上移動為+y，x與y單位px，需給予[x,y]，預設[iconSize[0]/2,iconSize[1]]
+ * @vue-prop {Array} [opt.pointSets[i].popupAnchor=[0,-iconSize[1]/1.5]] 輸入第i個點集合的顯示popup或tooltip時的指向位置陣列，由實際定位點起算，往右移動為+x，往下移動為+y，x與y單位px，需給予[x,y]，預設[0,-iconSize[1]/1.5]
+ * @vue-prop {Array} [opt.pointSets[i].points=[]] 輸入第i個點集合的各點陣列，各元素為物件或為緯經度(注意非經緯度)陣列，也就是[{p1},{p2},...]或是[[p1lat,p1lng],[p2lat,p2lng],...]，預設為[]
+ * @vue-prop {String} [opt.pointSets[i].points[j].title=''] 輸入第i個點集合的第j個點的標題字串，預設為''
+ * @vue-prop {String} [opt.pointSets[i].points[j].msg=''] 輸入第i個點集合的第j個點的說明字串，預設為''
+ * @vue-prop {Array} [opt.pointSets[i].points[j].latLng=[]] 輸入第i個點集合的第j個點的緯經度(注意非經緯度)座標陣列，也就是給予[lat,lng]，預設[]
+ * @vue-prop {String} [opt.pointSets[i].points[j].iconSrc=詳見程式碼] 輸入第i個點集合的第j個點的顯示圖標來源字串，可使用base64格式或網址，預設為google map的點圖標，值詳見程式碼
+ * @vue-prop {Array} [opt.pointSets[i].points[j].iconSize=[24,40]] 輸入第i個點集合的第j個點的顯示圖標尺寸陣列，使用[寬,高]，長寬單位px，預設[24,40]
+ * @vue-prop {Array} [opt.pointSets[i].points[j].iconAnchor=[iconSize[0]/2,iconSize[1]]] 輸入第i個點集合的第j個點的顯示圖標的實際定位位置陣列，由圖標左上角代表實際定位點起算，往左移動為+x，往上移動為+y，x與y單位px，需給予[x,y]，預設[iconSize[0]/2,iconSize[1]]
+ * @vue-prop {Array} [opt.pointSets[i].points[j].popupAnchor=[0,-iconSize[1]/1.5]] 輸入第i個點集合的第j個點的顯示popup或tooltip時的指向位置陣列，由實際定位點起算，往右移動為+x，往下移動為+y，x與y單位px，需給予[x,y]，預設[0,-iconSize[1]/1.5]
+ * @vue-prop {Function} [opt.defPointSetsClick=function(){}] 輸入全域點集合的click呼叫函數，可給予函數接收點擊事件，預設為function(){}
+ * @vue-prop {Function} [opt.pointSets[i].click=function(){}] 輸入第i個點集合的click呼叫函數，預設為function(){}
+ * @vue-prop {Function} [opt.pointSets[i].points[j].click=function(){}] 輸入第i個點集合的第j個點的click呼叫函數，預設為function(){}
+ * @vue-prop {Function} [opt.defPointSetsPopup=function(){}] 輸入全域點集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.pointSets[i].popup=function(){}] 輸入第i個點集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.pointSets[i].points[j].popup=function(){}] 輸入第i個點集合的第j個點的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.defPointSetsTooltip=function(){}] 輸入全域點集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.pointSets[i].tooltip=function(){}] 輸入第i個點集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.pointSets[i].points[j].tooltip=function(){}] 輸入第i個點集合的第j個點的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Array} [opt.polygonSets=[]] 輸入多邊形集合陣列，各元素為物件，預設[]
+ * @vue-prop {String} [opt.polygonSets[i].title=''] 輸入第i個多邊形集合的標題字串，預設為''
+ * @vue-prop {String} [opt.polygonSets[i].msg=''] 輸入第i個多邊形集合的說明字串，預設為''
+ * @vue-prop {Number} [opt.polygonSets[i].order=null] 輸入第i個多邊形集合的排序用數字，預設null
+ * @vue-prop {String} [opt.polygonSets[i].lineColor='rgba(0,150,255,1)'] 輸入第i個多邊形集合的框線顏色字串，預設為'rgba(0,150,255,1)'
+ * @vue-prop {String} [opt.polygonSets[i].lineColorHover='rgba(0,150,255,1)'] 輸入滑鼠移入時第i個多邊形集合的框線顏色字串，預設為'rgba(0,150,255,1)'
+ * @vue-prop {Number} [opt.polygonSets[i].lineWidth=3] 輸入第i個多邊形集合的框線寬度數字，預設為3
+ * @vue-prop {Number} [opt.polygonSets[i].lineWidthHover=3] 輸入滑鼠移入時第i個多邊形集合的框線寬度數字，預設為3
+ * @vue-prop {String} [opt.polygonSets[i].fillColor='rgba(0,150,255,0.25)'] 輸入第i個多邊形集合的填充顏色字串，預設為'rgba(0,150,255,0.25)'
+ * @vue-prop {String} [opt.polygonSets[i].fillColorHover='rgba(0,150,255,0.25)'] 輸入滑鼠移入時第i個多邊形集合的填充顏色字串，預設為'rgba(0,150,255,0.25)'
+ * @vue-prop {Function} [opt.defPolygonSetsClick=function(){}] 輸入全域多邊形集合的click呼叫函數，可給予函數接收點擊事件，預設為function(){}
+ * @vue-prop {Function} [opt.polygonSets[i].click=function(){}] 輸入第i個多邊形集合的click呼叫函數，預設為function(){}
+ * @vue-prop {Function} [opt.defPolygonSetsPopup=function(){}] 輸入全域多邊形集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.polygonSets[i].popup=function(){}] 輸入第i個多邊形集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.defPolygonSetsTooltip=function(){}] 輸入全域多邊形集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.polygonSets[i].tooltip=function(){}] 輸入第i個多邊形集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Array} [opt.contourSets=[]] 輸入等值線集合陣列，各元素為物件，預設[]
+ * @vue-prop {Number} [opt.contourSets[i].order=null] 輸入第i個等值線集合的排序用數字，預設null
+ * @vue-prop {Object} [opt.contourSets[i].gradient=詳見程式碼] 輸入第i個等值線集合的色階(color map)設定物件，鍵範圍0至1，值為對應之顏色，於各鍵之間則採用內插取色，預設值詳見程式碼
+ * @vue-prop {Boolean} [opt.contourSets[i].changeStyleWhenHover=true] 輸入第i個等值線集合的是否使用滑鼠移入時切換style效果布林值，預設true
+ * @vue-prop {Number} [opt.contourSets[i].legendNumDig=null] 輸入第i個等值線集合的對圖例內數字取小數位數，null代表不取，預設null
+ * @vue-prop {Function} [opt.contourSets[i].legendTextFormater=null] 輸入第i個等值線集合的對圖例內各色階的內容產生函數，可基於傳入資料回傳顯示文字或html內容，null代表不取，預設null
+ * @vue-prop {Array} [opt.contourSets[i].polygonClipOuter=[]] 輸入第i個等值線集合的剔除以外之多邊形(polygon，深度為2，例如[[p1lat,p1lng],[p2lat,p2lng],...])陣列，預設[]
+ * @vue-prop {Array} [opt.contourSets[i].polygonsClipInner=[]] 輸入第i個等值線集合的剔除以內之複數多邊形(multi-polygon，深度為3，例如[[[p1lat,p1lng]],[[p2lat,p2lng]],...])陣列，預設[]
+ * @vue-prop {Array} [opt.contourSets[i].polygonsContainInner=[]] 輸入第i個等值線集合的保留以內之複數多邊形(multi-polygon，深度為3，例如[[[p1lat,p1lng]],[[p2lat,p2lng]],...])陣列，預設[]
+ * @vue-prop {Function} [opt.defContourSetsClick=function(){}] 輸入全域等值線集合的click呼叫函數，可給予函數接收點擊事件，預設為function(){}
+ * @vue-prop {Function} [opt.ContourSets[i].click=function(){}] 輸入第i個等值線集合的click呼叫函數，預設為function(){}
+ * @vue-prop {Function} [opt.defContourSetsPopup=function(){}] 輸入全域等值線集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.ContourSets[i].popup=function(){}] 輸入第i個等值線集合的popup內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.defContourSetsTooltip=function(){}] 輸入全域等值線集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ * @vue-prop {Function} [opt.ContourSets[i].tooltip=function(){}] 輸入第i個等值線集合的tooltip內容產生函數，可基於傳入資料回傳顯示文字或html內容，預設為function(){}
+ */
+export default {
+    components: {
+        WIconLoading,
+    },
+    props: {
+        pathItems: {
+            type: Array,
+            default: () => [
+                'https://cdn.jsdelivr.net/npm/w-leaflet-vue@1.0.2/dist/w-leaflet-vue.umd.js',
+            ],
+        },
+        opt: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data: function() {
+        return {
+            cmpName: 'WIconLoading',
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //importResources
+        importResources(vo.pathItems)
+            .then((res) => {
+                //console.log('res', res)
+                if (res !== 'loaded') {
+
+                    //cmp
+                    let cmp = window['w-leaflet-vue']
+                    if (cmp.default) {
+                        cmp = cmp.default
+                    }
+
+                    //use
+                    getVue().component('w-leaflet-vue', cmp)
+
+                }
+                vo.cmpName = 'w-leaflet-vue'
+            })
+
+    },
+    computed: {
+    },
+    methods: {
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WListVertical.vue

@@ -0,0 +1,306 @@
+<template>
+    <div
+        v-domresize
+        @domresize="resize"
+        :changeItemActive="changeItemActive"
+    >
+        <div
+            :style="`height:${panelHeight}px;`"
+        >
+
+            <div ref="refHeader">
+                <slot name="header">
+                </slot>
+            </div>
+
+            <WPanelScrolly
+                :style="`height:${listHeight}px;`"
+            >
+                <div
+                    style="cursor:pointer;"
+                    :key="kitem"
+                    v-for="(item,kitem) in items"
+                >
+
+                    <WListVerticalItem
+                        :icon="getIcon(item)"
+                        :text="getText(item)"
+                        :textFontSize="itemTextFontSize"
+                        :active="getActive(item)"
+                        :paddingStyle="paddingStyle"
+                        :backgroundColor="itemBackgroundColor"
+                        :backgroundColorHover="itemBackgroundColorHover"
+                        :backgroundColorActive="itemBackgroundColorActive"
+                        :textColor="itemTextColor"
+                        :textColorHover="itemTextColorHover"
+                        :textColorActive="itemTextColorActive"
+                        :iconSize="itemIconSize"
+                        :iconColor="itemIconColor"
+                        :iconColorHover="itemIconColorHover"
+                        :iconColorActive="itemIconColorActive"
+                        :rippleColor="itemRippleColor"
+                        @click="ckItem(item)"
+                    >
+
+                        <template
+                            v-slot="props"
+                        >
+                            <slot
+                                name="item"
+                                :item="{...item,...props}"
+                            >
+                            </slot>
+                        </template>
+
+                    </WListVerticalItem>
+
+                </div>
+            </WPanelScrolly>
+
+            <div ref="refFooter">
+                <slot name="footer">
+                </slot>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+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 WPanelScrolly from './WPanelScrolly.vue'
+import WListVerticalItem from './WListVerticalItem.vue'
+import domResize from '../js/domResize.mjs'
+
+
+/**
+ * @vue-prop {Array} [items=[]] 輸入項目的字串陣列或物件陣列，預設[]
+ * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態，預設false
+ * @vue-prop {Object} [itemActive=null] 輸入活耀項目物件，預設null
+ * @vue-prop {String} [itemTextFontSize='1rem'] 輸入文字字型大小字串，預設'1rem'
+ * @vue-prop {String} [keyText='text'] 輸入項目為物件時，存放顯示文字之欄位字串，預設'text'
+ * @vue-prop {String} [keyIcon='icon'] 輸入項目為物件時，存放圖標之欄位字串，預設'icon'
+ * @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} [itemBackgroundColor='white'] 輸入背景顏色字串，預設'white'
+ * @vue-prop {String} [itemBackgroundColorHover='rgba(200,200,200,0.2)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.2)'
+ * @vue-prop {String} [itemBackgroundColorActive='orange lighten-1'] 輸入主動模式時背景顏色字串，預設'orange lighten-1'
+ * @vue-prop {String} [itemTextColor='#444'] 輸入文字顏色字串，預設'#444'
+ * @vue-prop {String} [itemTextColorHover='#222'] 輸入滑鼠移入時文字顏色字串，預設'#222'
+ * @vue-prop {String} [itemTextColorActive='white'] 輸入主動模式時文字顏色字串，預設'white'
+ * @vue-prop {Number} [itemIconSize=22] 輸入左側圖標之尺寸數字，單位px，預設22
+ * @vue-prop {String} [itemIconColor='#444'] 輸入圖標顏色字串，預設'#444'
+ * @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)'
+ */
+export default {
+    directives: {
+        domresize: domResize(),
+    },
+    components: {
+        WPanelScrolly,
+        WListVerticalItem,
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => [],
+        },
+        useActive: {
+            type: Boolean,
+            default: true,
+        },
+        itemActive: {
+            type: [String, Object],
+            default: null,
+        },
+        itemTextFontSize: {
+            type: String,
+            default: '1rem',
+        },
+        keyText: {
+            type: String,
+            default: 'text',
+        },
+        keyIcon: {
+            type: String,
+            default: 'icon',
+        },
+        paddingStyle: {
+            type: Object,
+            default: () => {
+                return {
+                    v: 10,
+                    h: 12,
+                }
+            },
+        },
+        itemBackgroundColor: {
+            type: String,
+            default: 'white',
+        },
+        itemBackgroundColorHover: {
+            type: String,
+            default: 'rgba(200,200,200,0.2)',
+        },
+        itemBackgroundColorActive: {
+            type: String,
+            default: 'orange lighten-1',
+        },
+        itemTextColor: {
+            type: String,
+            default: '#444',
+        },
+        itemTextColorHover: {
+            type: String,
+            default: '#222',
+        },
+        itemTextColorActive: {
+            type: String,
+            default: 'white',
+        },
+        itemIconSize: {
+            type: Number,
+            default: 22,
+        },
+        itemIconColor: {
+            type: String,
+            default: '#444',
+        },
+        itemIconColorHover: {
+            type: String,
+            default: '#222',
+        },
+        itemIconColorActive: {
+            type: String,
+            default: 'white',
+        },
+        itemRippleColor: {
+            type: String,
+            default: 'rgba(255,255,255,0.4)',
+        },
+    },
+    data: function() {
+        return {
+
+            panelHeight: 0,
+            listHeight: 0,
+
+            itemActiveTrans: null,
+
+        }
+    },
+    computed: {
+
+        changeItemActive: function() {
+            let vo = this
+            if (vo.useActive) {
+                vo.itemActiveTrans = vo.itemActive
+            }
+            return ''
+        },
+
+        isObjValue: function() {
+            //console.log('computed isObjValue')
+
+            let vo = this
+
+            //check, 因every([])=true
+            if (size(vo.items) === 0) {
+                return false
+            }
+            return every(vo.items, (v) => {
+                return isobj(v)
+            })
+        },
+
+    },
+    methods: {
+
+        resize: function(msg) {
+            // console.log('methods resize', msg)
+
+            let vo = this
+
+            //panelHeight
+            vo.panelHeight = msg.snew.offsetHeight
+
+            //headerHeight
+            let headerHeight = 0
+            let eleHeader = get(vo, '$refs.refHeader')
+            if (isEle(eleHeader)) {
+                headerHeight = eleHeader.offsetHeight
+            }
+
+            //footerHeight
+            let footerHeight = 0
+            let eleFooter = get(vo, '$refs.refFooter')
+            if (isEle(eleFooter)) {
+                footerHeight = eleFooter.offsetHeight
+            }
+
+
+            //listHeight
+            vo.listHeight = vo.panelHeight - headerHeight - footerHeight
+
+        },
+
+        getIcon: function(item) {
+            let vo = this
+            if (vo.isObjValue) {
+                return get(item, vo.keyIcon, '')
+            }
+            return ''
+        },
+
+        getText: function(item) {
+            let vo = this
+            if (vo.isObjValue) {
+                let t = get(item, vo.keyText, '')
+                return t
+            }
+            return item
+        },
+
+        getActive: function(item) {
+            let vo = this
+            let b = false
+            if (vo.useActive) {
+                b = isEqual(item, vo.itemActiveTrans)
+            }
+            return b
+        },
+
+        ckItem: function(item) {
+            // console.log('methods ckItem', item)
+
+            let vo = this
+
+            //save itemActiveTrans
+            vo.itemActiveTrans = item
+
+            //nextTick
+            vo.$nextTick(() => {
+
+                //emit
+                vo.$emit('click', cloneDeep(item))
+
+                //emit
+                vo.$emit('update:itemActive', cloneDeep(item))
+
+            })
+
+        },
+
+    }
+}
+</script>
+
+<style scoped>
+</style>