w-component-vue 2.2.2 → 2.2.5

package/src/AppZoneWTree.vue

@@ -25,12 +25,12 @@
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'iconHeight'"
+                    :casename="'iconSize'"
                 ></demolink>
 
                 <w-tree
                     style="border:1px solid #ddd;"
-                    :iconHeight="24"
+                    :iconSize="24"
                     :data="WTree.option.items"
                 ></w-tree>
 
@@ -40,12 +40,12 @@
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'iconHeight & defItemHeight'"
+                    :casename="'iconSize(24) & defItemHeight(24)'"
                 ></demolink>
 
                 <w-tree
                     style="border:1px solid #ddd;"
-                    :iconHeight="24"
+                    :iconSize="24"
                     :defItemHeight="24"
                     :data="WTree.option.items"
                 ></w-tree>
@@ -53,6 +53,22 @@
             </div>
 
 
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'iconSize(30) & defItemHeight(36)'"
+                ></demolink>
+
+                <w-tree
+                    style="border:1px solid #ddd;"
+                    :iconSize="30"
+                    :defItemHeight="36"
+                    :data="WTree.option.items"
+                ></w-tree>
+
+            </div>
+
+
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
@@ -93,8 +109,12 @@
                     style="border:1px solid #ddd;"
                     :viewHeightMax="WTree.viewHeightMaxSync"
                     :data="WTree.option.items"
+                    @mouseenter="mouseenter"
+                    @mouseleave="mouseleave"
+                    @click="click"
                     @change-view-items="changeViewItems"
                     @change-height-of-items="changeHeightOfItems"
+                    @render="render"
                 ></w-tree>
 
             </div>
@@ -139,6 +159,88 @@
             </div>
 
 
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'itemTextColor & itemTextColorHover & itemBackgroundColor & itemBackgroundColorHover'"
+                ></demolink>
+
+                <w-tree
+                    style="border:1px solid #ddd; background:#444;"
+                    :data="WTree.option.items"
+                    :itemTextColor="'#ccc'"
+                    :itemTextColorHover="'#eee'"
+                    :itemBackgroundColor="'#444'"
+                    :itemBackgroundColorHover="'rgba(187, 119, 34, 0.6)'"
+                ></w-tree>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'activable & activeItem'"
+                ></demolink>
+
+                <div style="font-size:0.8rem;">activeItem: {{WTree.option.activeItem}}</div>
+
+                <w-tree
+                    style="border:1px solid #ddd;"
+                    :data="WTree.option.items"
+                    :activable="true"
+                    :activeItem.sync="WTree.option.activeItem"
+                    @click="clickActive"
+                ></w-tree>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'activable & activeItem & funActive'"
+                ></demolink>
+
+                <div style="font-size:0.8rem;">activeItem: {{WTree.option.activeItem}}</div>
+
+                <w-tree
+                    style="border:1px solid #ddd;"
+                    :data="WTree.option.items"
+                    :activable="true"
+                    :activeItem.sync="WTree.option.activeItem"
+                    :funActive="funActive"
+                    @click="clickActive"
+                ></w-tree>
+
+            </div>
+
+
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'activable & activeItem & itemTextColor & itemTextColorHover & itemTextColorActive & itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"
+                ></demolink>
+
+                <div style="font-size:0.8rem;">activeItem: {{WTree.option.activeItem}}</div>
+
+                <w-tree
+                    style="border:1px solid #ddd; background:#444;"
+                    :data="WTree.option.items"
+                    :activable="true"
+                    :activeItem.sync="WTree.option.activeItem"
+                    :itemTextColor="'#ccc'"
+                    :itemTextColorHover="'#eee'"
+                    :itemTextColorActive="'#fff'"
+                    :itemBackgroundColor="'#444'"
+                    :itemBackgroundColorHover="'rgba(187, 119, 34, 0.6)'"
+                    :itemBackgroundColorActive="'rgba(187, 119, 34, 0.8)'"
+                    @click="clickActive"
+                ></w-tree>
+
+            </div>
+
+
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
@@ -391,24 +493,6 @@
             </div>
 
 
-            <div class="bk dz">
-                <demolink
-                    :kbname="'w-tree'"
-                    :casename="'mouseenter & mouseleave & click & change-view-items'"
-                ></demolink>
-
-                <w-tree
-                    style="border:1px solid #ddd;"
-                    :data="WTree.option.items"
-                    @mouseenter="mouseenter"
-                    @mouseleave="mouseleave"
-                    @click="click"
-                    @change-view-items="changeViewItems"
-                ></w-tree>
-
-            </div>
-
-
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
@@ -517,7 +601,7 @@
                             :data="WTree.option.items"
                             :selectable="true"
                             :selections.sync="WTree.option.selections"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         ></w-tree>
                     </div>
 
@@ -549,7 +633,7 @@
                             :data="WTree.option.items"
                             :selectable="true"
                             :selections.sync="WTree.option.selections"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex;">
@@ -612,7 +696,7 @@
                             :data.sync="WTree.option.items"
                             :selectable="true"
                             :selections.sync="WTree.option.selections"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         ></w-tree>
                     </div>
 
@@ -647,7 +731,7 @@
                             :data.sync="WTree.option.items"
                             :selectable="true"
                             :selections.sync="WTree.option.selections"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex;">
@@ -717,7 +801,7 @@
                             :selections.sync="WTree.option.selections"
                             :filterKeywords="WTree.option.keywords"
                             :noResultsText="'There are no items to show...'"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex;">
@@ -778,7 +862,7 @@
                             :selectable="true"
                             :selections.sync="WTree.optionLocked.selections"
                             :locked="'locked'"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex;">
@@ -845,7 +929,7 @@
                             :iconCheckedDisabledColor="'orange lighten-4'"
                             :iconCheckedPartiallyColor="'orange lighten-2'"
                             :iconCheckedPartiallyDisabledColor="'orange lighten-4'"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex;">
@@ -905,7 +989,7 @@
                             :data="WTree.optionLarge.items"
                             :selectable="true"
                             :selections.sync="WTree.optionLarge.selections"
-                            @update:selections="changeSections"
+                            @update:selections="changeSelections"
                         >
                             <template v-slot:item="props">
                                 <div style="display:flex; align-items:center; min-height:34px;">
@@ -987,6 +1071,9 @@ export default {
                         { 'id': 18 },
                         //勾選id:18會自動再加入id:19
                     ],
+                    activeItem: {
+                        'id': 4
+                    },
                     items: [
                         {
                             id: 1,
@@ -1349,18 +1436,6 @@ export default {
                 })
             return t
         },
-        click: function(msg) {
-            console.log('click', msg)
-        },
-        changeSections: function(msg) {
-            console.log('changeSections', msg)
-        },
-        changeViewItems: function(msg) {
-            console.log('changeViewItems', msg)
-        },
-        changeHeightOfItems: function(msg) {
-            console.log('changeHeightOfItems', msg)
-        },
         mouseenter: function(msg) {
             console.log('mouseenter', msg)
             msg.ele.style.transition = 'all 0.3s'
@@ -1372,6 +1447,28 @@ export default {
             msg.ele.style.background = 'rgba(255, 255, 255, 0)'
             //msg.ele.style.color = 'black'
         },
+        click: function(msg) {
+            console.log('click', msg)
+        },
+        render: function(msg) {
+            console.log('render', msg)
+        },
+        clickActive: function(msg) {
+            console.log('clickActive', msg)
+        },
+        funActive: function(msg) {
+            console.log('funActive', msg)
+            return !Array.isArray(msg.item.children) //children非陣列代表沒有所屬節點
+        },
+        changeSelections: function(msg) {
+            console.log('changeSelections', msg)
+        },
+        changeViewItems: function(msg) {
+            console.log('changeViewItems', msg)
+        },
+        changeHeightOfItems: function(msg) {
+            console.log('changeHeightOfItems', msg)
+        },
         clickOperateItem: function(msg) {
             console.log('clickOperateItem', msg)
 

package/src/components/WGroupCheck.vue

@@ -67,7 +67,7 @@ import parseSpace from '../js/parseSpace.mjs'
 
 
 /**
- * @vue-prop {Boolean} [multiCheck=true] 輸入是否為複選模式，預設true
+ * @vue-prop {Boolean} [multiCheck=true] 輸入是否為複選模式布林值，預設true
  * @vue-prop {Array} [items=[]] 輸入全部可選字串或物件陣列，預設[]
  * @vue-prop {Array|String|Object} value 輸入複選字串或物件陣列，無預設
  * @vue-prop {String} [keyText='text'] 輸入可選項目為物件時，存放顯示文字之欄位字串，預設'text'
@@ -91,20 +91,20 @@ import parseSpace from '../js/parseSpace.mjs'
  * @vue-prop {String} [backgroundColorHover='rgba(200,200,200,0.25)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.25)'
  * @vue-prop {String} [backgroundColorActive='orange'] 輸入主動模式時背景顏色字串，預設'orange'
  * @vue-prop {Object} [marginStyle={top:10,bottom:10,left:0,right:10}] 輸入外距設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{top:10,bottom:10,left:0,right:10}
- * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影，預設false
+ * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影布林值，預設false
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
- * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影，預設true
+ * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影布林值，預設true
  * @vue-prop {String} [shadowActiveStyle=''] 輸入主動模式時陰影顏色字串，預設值詳見props
  * @vue-prop {Object} [paddingStyle={v:3,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:3,h:15}
  * @vue-prop {Number} [shiftLeft=0] 輸入左側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如圖標與左側邊框距離，單位px，預設0
  * @vue-prop {Number} [shiftRight=0] 輸入右側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如關閉圖標與右側邊框距離，單位px，預設0
- * @vue-prop {Boolean} [group=false] 輸入是否為群組模式，若group=true時會取消marginStyle、borderWidth、borderRadiusStyle設定，預設false
+ * @vue-prop {Boolean} [group=false] 輸入是否為群組模式布林值，若group=true時會取消marginStyle、borderWidth、borderRadiusStyle設定，預設false
  * @vue-prop {Object} [groupBorderRadiusStyle={left:true,right:true}] 輸入框圓角樣式物件，當群組模式group=true時才生效，可用鍵值為left、right、top、bottom、top-left、bottom-left、top-right、bottom-right，各鍵值為布林值，預設{left:true,right:true}
  * @vue-prop {Number} [groupShift=5] 輸入群組模式時第一按鈕左側以及最末按鈕右側與邊框距離數字，單位px，預設5
- * @vue-prop {Boolean} [close=false] 輸入是否具有關閉按鈕模式，預設false
- * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式，預設false
+ * @vue-prop {Boolean} [close=false] 輸入是否具有關閉按鈕模式布林值，預設false
+ * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式布林值，預設false
  * @vue-prop {String} [loadingColor='black'] 輸入載入圖標顏色字串，預設'black'
- * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
  */
 export default {
     components: {

package/src/components/WGroupRadio.vue

@@ -40,20 +40,20 @@ import WGroupCheck from './WGroupCheck.vue'
  * @vue-prop {String} [backgroundColorHover='rgba(200,200,200,0.25)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.25)'
  * @vue-prop {String} [backgroundColorActive='orange'] 輸入主動模式時背景顏色字串，預設'orange'
  * @vue-prop {Object} [marginStyle={top:10,bottom:10,left:0,right:10}] 輸入外距設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{top:10,bottom:10,left:0,right:10}
- * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影，預設false
+ * @vue-prop {Boolean} [shadow=false] 輸入是否顯示陰影布林值，預設false
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
- * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影，預設true
+ * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影布林值，預設true
  * @vue-prop {String} [shadowActiveStyle=''] 輸入主動模式時陰影顏色字串，預設值詳見props
  * @vue-prop {Object} [paddingStyle={v:3,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:3,h:15}
  * @vue-prop {Number} [shiftLeft=0] 輸入左側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如圖標與左側邊框距離，單位px，預設0
  * @vue-prop {Number} [shiftRight=0] 輸入右側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如關閉圖標與右側邊框距離，單位px，預設0
- * @vue-prop {Boolean} [group=false] 輸入是否為群組模式，若group=true時會取消marginStyle、borderWidth、borderRadiusStyle設定，預設false
+ * @vue-prop {Boolean} [group=false] 輸入是否為群組模式布林值，若group=true時會取消marginStyle、borderWidth、borderRadiusStyle設定，預設false
  * @vue-prop {Object} [groupBorderRadiusStyle={left:true,right:true}] 輸入框圓角樣式物件，當群組模式group=true時才生效，可用鍵值為left、right、top、bottom、top-left、bottom-left、top-right、bottom-right，各鍵值為布林值，預設{left:true,right:true}
  * @vue-prop {Number} [groupShift=5] 輸入群組模式時第一按鈕左側以及最末按鈕右側與邊框距離數字，單位px，預設5
- * @vue-prop {Boolean} [close=false] 輸入是否具有關閉按鈕模式，預設false
- * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式，預設false
+ * @vue-prop {Boolean} [close=false] 輸入是否具有關閉按鈕模式布林值，預設false
+ * @vue-prop {Boolean} [loading=false] 輸入是否為載入模式布林值，預設false
  * @vue-prop {String} [loadingColor='black'] 輸入載入圖標顏色字串，預設'black'
- * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
  */
 export default {
     components: {

package/src/components/WGroupTags.vue

@@ -188,12 +188,12 @@ import domDragDrop from '../js/domDragDrop.mjs'
 
 /**
  * @vue-prop {Array} [value=[]] 輸入項目的字串陣列或物件陣列，預設[]
- * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態，預設false
+ * @vue-prop {Boolean} [useActive=false] 輸入項目是否使用點擊成為活耀狀態布林值，預設false
  * @vue-prop {Object} [valueActive=null] 輸入活耀項目物件，預設null
  * @vue-prop {String} [keyText='text'] 輸入項目為物件時，存放顯示文字之欄位字串，預設'text'
  * @vue-prop {String} [keyIcon='icon'] 輸入項目為物件時，存放圖標之欄位字串，預設'icon'
  * @vue-prop {String} [keyTooltip='tooltip'] 輸入項目為物件時，存放提示之欄位字串，預設'tooltip'
- * @vue-prop {Boolean} [useColorsFromItem=false] 輸入當項目為物件時，是否使用其內相關顏色設定用以覆蓋預設值，預設false
+ * @vue-prop {Boolean} [useColorsFromItem=false] 輸入當項目為物件時是否使用其內相關顏色設定用以覆蓋預設值布林值，預設false
  * @vue-prop {String} [icon=''] 輸入左側圖標字串，預設''
  * @vue-prop {String} [iconColor='black'] 輸入圖標顏色字串，預設'black'
  * @vue-prop {String} [iconColorHover='grey darken-3'] 輸入滑鼠移入時圖標顏色字串，預設'grey darken-3'
@@ -213,9 +213,9 @@ import domDragDrop from '../js/domDragDrop.mjs'
  * @vue-prop {String} [backgroundColorHover='rgba(200,200,200,0.25)'] 輸入滑鼠移入時背景顏色字串，預設'rgba(200,200,200,0.25)'
  * @vue-prop {String} [backgroundColorActive='orange'] 輸入主動模式時背景顏色字串，預設'orange'
  * @vue-prop {Object} [marginStyle={top:10,bottom:10,left:0,right:10}] 輸入外距設定物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{top:10,bottom:10,left:0,right:10}
- * @vue-prop {Boolean} [shadow=true] 輸入是否顯示陰影，預設true
+ * @vue-prop {Boolean} [shadow=true] 輸入是否顯示陰影布林值，預設true
  * @vue-prop {String} [shadowStyle=''] 輸入陰影顏色字串，預設值詳見props
- * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影，預設true
+ * @vue-prop {Boolean} [shadowActive=true] 輸入主動模式時是否顯示陰影布林值，預設true
  * @vue-prop {String} [shadowActiveStyle=''] 輸入主動模式時陰影顏色字串，預設值詳見props
  * @vue-prop {Object} [paddingStyle={v:3,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:3,h:15}
  * @vue-prop {Number} [shiftLeft=0] 輸入左側內寬平移距離數字，會對paddingStyle設定再添加，可調整例如圖標與左側邊框距離，單位px，預設0
@@ -249,11 +249,11 @@ import domDragDrop from '../js/domDragDrop.mjs'
  * @vue-prop {String} [addButtonBackgroundColor='white'] 輸入新增按鈕背景顏色字串，預設'white'
  * @vue-prop {String} [addButtonBackgroundColorHover='white'] 輸入滑鼠移入時新增按鈕背景顏色字串，預設'white'
  * @vue-prop {String} [addButtonTooltip='Add'] 輸入新增按鈕提示文字字串，預設'Add'
- * @vue-prop {Boolean} [closeWithInterceptor=false] 輸入是否通過攔截器來決定是否進行關閉，此處之攔截器係用promise來控制，當使用者點擊關閉時可先行確認或提示。當closeWithInterceptor=true時，於click-close事件所接收物件資訊中的pm，使用pm.resolve()則代表確定關閉，反之pm.reject()則取消關閉事件，預設false
- * @vue-prop {Boolean} [draggable=true] 輸入是否可拖曳模式，預設true
- * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
- * @vue-prop {Boolean} [editableClose=true] 輸入editable=true時，是否顯示關閉按鈕，預設true
- * @vue-prop {Boolean} [editableInput=true] 輸入editable=true時，是否使用預設的slot input，預設true
+ * @vue-prop {Boolean} [closeWithInterceptor=false] 輸入是否通過攔截器來決定是否進行關閉布林值，此處之攔截器係用promise來控制，當使用者點擊關閉時可先行確認或提示。當closeWithInterceptor=true時，於click-close事件所接收物件資訊中的pm，使用pm.resolve()則代表確定關閉，反之pm.reject()則取消關閉事件，預設false
+ * @vue-prop {Boolean} [draggable=true] 輸入是否可拖曳模式布林值，預設true
+ * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式布林值，預設true
+ * @vue-prop {Boolean} [editableClose=true] 輸入editable=true時是否顯示關閉按鈕布林值，預設true
+ * @vue-prop {Boolean} [editableInput=true] 輸入editable=true時是否使用預設的slot input布林值，預設true
  * @vue-prop {Boolean} [enableCloseEventOnly=false] 輸入點擊移除按鈕時是否僅開啟關閉事件，代表不自動刪除項目，需通過監聽關閉事件@click-close自行處理刪除功能，預設false
  * @vue-prop {String} [nodata='無'] 輸入無任何字串陣列時的預設文字字串，預設'無'
  */

package/src/components/WImageCascadingDyn.vue

@@ -37,17 +37,25 @@
                     </div>
 
                     <div style="background:rgba(0,0,0,0.65); padding:5px;">
-                        <div style="font-size:0.8rem; color:#fff;">{{img.name}}</div>
+                        <input
+                            type="text"
+                            class="inp"
+                            style="font-size:0.8rem; color:#fff;"
+                            _spellcheck="false"
+                            readonly
+                            :value="img.name"
+                        >
                     </div>
 
                     <div style="background:rgba(200,200,200,0.5); padding:3px 5px;">
-                            <input
-                                type="text"
-                                class="inp"
-                                _spellcheck="false"
-                                readonly
-                                :value="img.src"
-                            >
+                        <input
+                            type="text"
+                            class="inp"
+                            style="font-size:0.7rem; opacity:0.75;"
+                            _spellcheck="false"
+                            readonly
+                            :value="img.src"
+                        >
                     </div>
 
                 </div>
@@ -567,9 +575,7 @@ export default {
 
 <style scoped>
 .inp {
-    opacity: 0.75;
     font: inherit;
-    font-size: 0.7rem;
     height: 1rem;
     line-height: 1rem;
     width: 100%;

package/src/components/WJsonView.vue

@@ -6,10 +6,11 @@
             :viewHeightMax="viewHeightMax"
             :defaultDisplayLevel="defaultDisplayLevel"
             :indent="indent"
-            :iconHeight="iconHeight"
+            :iconSize="iconSize"
             :iconToggleColor="iconToggleColor"
             :iconToggleBackgroundColor="iconToggleBackgroundColor"
             :iconToggleBackgroundColorHover="iconToggleBackgroundColorHover"
+            :iconVerticalAlign="'top'"
             :filterKeywords="filterKeywords"
             :filterFunction="filterFunction"
             :loadingText="loadingText"
@@ -23,8 +24,8 @@
         >
             <template v-slot:head="props">
 
-                <div :style="`min-width:${lineNumberWidth}px; display:flex; align-items:center; justify-content:end; font-size:0.8rem; line-height:1.5625rem; color:#f26; user-select:none;`">
-                    {{props.index+1}}
+                <div :style="`min-width:${lineNumberWidth}px; height:${iconSize}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>
 
             </template>
@@ -109,7 +110,7 @@ import WTree from './WTree.vue'
  * @vue-prop {Number} [viewHeightMax=400] 輸入顯示區最大高度，單位為px，若給予非數字則自動依照當前顯隱最高內容調整，預設400
  * @vue-prop {Number} [defaultDisplayLevel=null] 輸入初始展開層數數字，若輸入1就是預設展開至第1層，第2層(含)以下則都隱藏，若輸入null就是全展開，預設null
  * @vue-prop {Number} [indent=1] 輸入縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設1
- * @vue-prop {Number} [iconHeight=24] 輸入顯隱icon按鈕高度數字，單位為px，預設24
+ * @vue-prop {Number} [iconSize=24] 輸入顯隱icon按鈕高度數字，單位為px，預設24
  * @vue-prop {String} [iconToggleColor='grey'] 輸入顯隱icon按鈕顏色字串，預設'grey'
  * @vue-prop {String} [iconToggleBackgroundColor='transparent'] 輸入顯隱icon按鈕背景顏色字串，預設'transparent'
  * @vue-prop {String} [iconToggleBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'
@@ -152,7 +153,7 @@ export default {
             type: Number,
             default: 1,
         },
-        iconHeight: {
+        iconSize: {
             type: Number,
             default: 24,
         },