w-component-vue 2.2.0 → 2.2.3

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'"

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,
         },

package/src/components/WTableDyn.vue

@@ -236,7 +236,7 @@ import color2hex from '../js/vuetifyColor.mjs'
  * @vue-prop {String|Array} [removeIdsWhenDownload=''] 輸入下載Excel檔案時欲移除的欄位字串或陣列，預設''
  * @vue-prop {Boolean} [funGetLtdtHookWhenDownload=null] 輸入下載Excel檔案時針對ltdt數據階段的攔截處理函數，預設為null
  * @vue-prop {Boolean} [funGetMatHookWhenDownload=null] 輸入下載Excel檔案時針對mat數據階段的攔截處理函數，預設為null
- * @vue-prop {Boolean} [useHeadWhenDownload=true] 輸入下載Excel檔案時是否將欄位鍵值轉換成head布林值，此需提供opt.kpHead物件，預設為true
+ * @vue-prop {Boolean} [useHeadWhenDownload=false] 輸入下載Excel檔案時是否將欄位鍵值轉換成head布林值，此需提供opt.kpHead物件，預設為false
  * @vue-prop {String} [fileNameWhenDownload='data.xlsx'] 輸入下載Excel檔案時儲存檔名稱字串，預設'data.xlsx'
  * @vue-prop {String} [sheetNameWhenDownload='data'] 輸入下載Excel檔案時sheet名稱字串，預設'data'
  * @vue-prop {Boolean} [editable=false] 輸入是否可編輯布林值，可被opt.defCellEditable複寫，預設為false

package/src/components/WTree.vue

@@ -54,39 +54,34 @@
                         <div :style="`display:table-cell; vertical-align:top; padding-right:${separation}px;`"></div>
 
                         <div :style="`display:table-cell; vertical-align:top; padding:0px ${separation}px;`">
-                            <div :style="`display:flex; align-items:center; justify-content:center; height:${defItemHeight}px; overflow:hidden;`">
-                                <div :style="`transform-origin:center; transform:scale(${iconHeight/defIconHeight});`">
-                                    <WTreeIconToggle
-                                        :style="`width:24px; height:${defIconHeight}px;`"
-                                        :dir="`${props.row.unfolding?'bottom':'right'}`"
-                                        :iconColor="iconToggleColor"
-                                        :iconBackgroundColor="iconToggleBackgroundColor"
-                                        :iconBackgroundColorHover="iconToggleBackgroundColorHover"
-                                        @click.stop="toggleItems(props.row)"
-                                        v-if="hasChildren(props.index)"
-                                    ></WTreeIconToggle>
-                                    <div style="padding-right:24px;" v-else></div>
-                                </div>
+                            <div :style="`display:flex; align-items:${useIconVerticalAlign}; justify-content:center; height:${defItemHeight}px; overflow:hidden;`">
+                                <WTreeIconToggle
+                                    :dir="`${props.row.unfolding?'bottom':'right'}`"
+                                    :iconSize="iconSize"
+                                    :iconColor="iconToggleColor"
+                                    :iconBackgroundColor="iconToggleBackgroundColor"
+                                    :iconBackgroundColorHover="iconToggleBackgroundColorHover"
+                                    @click.stop="toggleItems(props.row)"
+                                    v-if="hasChildren(props.index)"
+                                ></WTreeIconToggle>
+                                <div :style="`padding-right:${iconSize}px;`" v-else></div>
                             </div>
                         </div>
 
                         <!-- 因顯隱圖標比較小而勾選圖標比較大, 讓separation全灌到padding-right處使排版比較均勻 -->
                         <div :style="`display:table-cell; vertical-align:top; padding:0px ${2*separation}px 0px 0px;`" v-if="selectable">
-                            <div :style="`display:flex; align-items:center; justify-content:center; height:${defItemHeight}px; overflow:hidden;`">
-                                <div :style="`transform-origin:center; transform:scale(${iconHeight/defIconHeight});`">
-                                    <WTreeIconCheckbox
-                                        :style="`height:${defIconHeight}px;`"
-                                        :mode="props.row.checked"
-                                        :editable="getEditable(props.row.item)"
-                                        :uncheckedColor="iconUncheckedColor"
-                                        :uncheckedDisabledColor="iconUncheckedDisabledColor"
-                                        :checkedColor="iconCheckedColor"
-                                        :checkedDisabledColor="iconCheckedDisabledColor"
-                                        :checkedPartiallyColor="iconCheckedPartiallyColor"
-                                        :checkedPartiallyDisabledColor="iconCheckedPartiallyDisabledColor"
-                                        @click="checkItems(props.row)"
-                                    ></WTreeIconCheckbox>
-                                </div>
+                            <div :style="`display:flex; align-items:${useIconVerticalAlign}; justify-content:center; width:${defIconSize*(iconSize/defIconSize)}px; height:${defItemHeight}px; overflow:hidden;`">
+                                <WTreeIconCheckbox
+                                    :mode="props.row.checked"
+                                    :editable="getEditable(props.row.item)"
+                                    :uncheckedColor="iconUncheckedColor"
+                                    :uncheckedDisabledColor="iconUncheckedDisabledColor"
+                                    :checkedColor="iconCheckedColor"
+                                    :checkedDisabledColor="iconCheckedDisabledColor"
+                                    :checkedPartiallyColor="iconCheckedPartiallyColor"
+                                    :checkedPartiallyDisabledColor="iconCheckedPartiallyDisabledColor"
+                                    @click="checkItems(props.row)"
+                                ></WTreeIconCheckbox>
                             </div>
                         </div>
 
@@ -104,7 +99,7 @@
                                 :setDataByPathAndValue="setDataByPathAndValue"
                             >
                                 <!-- 得使用min-height否則無法撐開高度 -->
-                                <div :style="`min-height:${Math.max(iconHeight,defItemHeight)}px; display:flex; align-items:center;`">
+                                <div :style="`min-height:${Math.max(iconSize,defItemHeight)}px; display:flex; align-items:center;`">
                                     {{getText(props.row.item)}}
                                 </div>
                             </slot>
@@ -248,16 +243,17 @@ let gm = globalMemory()
  * @vue-prop {String} [keyLock='locked'] 輸入可選項目為物件時，禁止勾選之欄位字串，物件給予此欄位需為布林值，預設'locked'
  * @vue-prop {Object} [paddingStyle={v:0,h:0}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:0}
  * @vue-prop {Number} [indent=1] 輸入縮排比率數字，若使用1就是1倍的圖標寬度(24px)+2*separation(3px)，預設1
- * @vue-prop {Number} [iconHeight=34] 輸入顯隱icon按鈕高度數字，單位為px，預設34
+ * @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)'
- * @vue-prop {String} [iconUncheckedColor='grey darken-2'] 輸入未勾選時顏色字串，預設'grey darken-2'
- * @vue-prop {String} [iconUncheckedDisabledColor='grey'] 輸入禁用時未勾選時顏色字串，預設'grey'
- * @vue-prop {String} [iconCheckedColor='blue darken-3'] 輸入勾選時顏色字串，預設'blue darken-3'
- * @vue-prop {String} [iconCheckedDisabledColor='grey'] 輸入禁用時勾選時顏色字串，預設'grey'
- * @vue-prop {String} [iconCheckedPartiallyColor='blue darken-3'] 輸入部份勾選時(子節點任一有勾選但非全部勾選)顏色字串，預設'blue darken-3'
- * @vue-prop {String} [iconCheckedPartiallyDisabledColor='grey'] 輸入禁用部份勾選時(子節點任一有勾選但非全部勾選)顏色字串，預設'grey'
+ * @vue-prop {String} [iconUncheckedColor='grey darken-2'] 輸入核選icon未勾選時顏色字串，預設'grey darken-2'
+ * @vue-prop {String} [iconUncheckedDisabledColor='grey'] 輸入核選icon禁用時未勾選時顏色字串，預設'grey'
+ * @vue-prop {String} [iconCheckedColor='blue darken-3'] 輸入核選icon勾選時顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [iconCheckedDisabledColor='grey'] 輸入核選icon禁用時勾選時顏色字串，預設'grey'
+ * @vue-prop {String} [iconCheckedPartiallyColor='blue darken-3'] 輸入核選icon部份勾選時(子節點任一有勾選但非全部勾選)顏色字串，預設'blue darken-3'
+ * @vue-prop {String} [iconCheckedPartiallyDisabledColor='grey'] 輸入核選icon禁用時部份勾選時顏色字串，預設'grey'
+ * @vue-prop {String} [iconVerticalAlign='middle'] 輸入icon垂直對齊字串，預設'middle'
  * @vue-prop {String} [filterKeywords=''] 輸入過濾關鍵字字串，多關鍵字用空白分隔，預設''
  * @vue-prop {Function} [filterFunction=null] 輸入過濾時呼叫處理函數，傳入為各項目物件資料，回傳布林值代表項目內是否含有關鍵字，預設null
  * @vue-prop {String} [loadingText='Loading...'] 輸入載入中字串，預設'Loading...'
@@ -362,9 +358,9 @@ export default {
             type: Number,
             default: 1,
         },
-        iconHeight: {
+        iconSize: {
             type: Number,
-            default: 34,
+            default: 24,
         },
         iconToggleColor: {
             type: String,
@@ -402,6 +398,10 @@ export default {
             type: String,
             default: 'grey',
         },
+        iconVerticalAlign: {
+            type: String,
+            default: 'middle', //middle, top
+        },
         filterKeywords: {
             type: String,
             default: '',
@@ -583,7 +583,7 @@ export default {
             viewHeightMaxTrans: 2, //預設給予>=2最小內容區高度, 使能觸發顯示渲染連動機制
 
             separation: 3,
-            defIconHeight: 34,
+            defIconSize: 24,
             selectionsTrans: [],
 
             filterKeywordsTrans: '',
@@ -695,7 +695,7 @@ export default {
 
             let vo = this
 
-            return vo.indent * (24 + 2 * vo.separation)
+            return vo.indent * (vo.defIconSize + 2 * vo.separation)
         },
 
         usePadding: function() {
@@ -712,6 +712,14 @@ export default {
             return padding
         },
 
+        useIconVerticalAlign: function() {
+            //console.log('computed useIconVerticalAlign')
+
+            let vo = this
+
+            return vo.iconVerticalAlign === 'top' ? 'flex-start' : 'center'
+        },
+
         useDgTextDisabledColor: function() {
             //console.log('computed useDgTextDisabledColor')
 

package/src/components/WTreeIconCheckbox.vue

@@ -1,49 +1,53 @@
 <template>
-    <div
-        :style="`position:relative; display:inline-block; user-select:none; ${editable?'cursor:pointer;':''} outline:none;`"
-        tabindex="0"
-        @keyup.enter="emitClick"
-        @click="emitClick"
-    >
-
-        <div style="display:inline-block; height:100%; display:flex; align-items:center; justify-content:center;" v-if="mode==='unchecked'">
-            <span style="display:flex;">
-                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useUncheckedColor" width="24px" height="24px" viewBox="0 0 24 24">
-                    <path d="M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path>
-                </svg>
-            </span>
-        </div>
-
-        <div style="display:inline-block; height:100%; display:flex; align-items:center; justify-content:center;" v-if="mode==='checked'">
-            <span style="display:flex;">
-                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useCheckedColor" width="24px" height="24px" viewBox="0 0 24 24">
-                    <path v-if="false" d="M19,19H5V5H15V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V11H19M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"></path>
-                    <path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path>
-                </svg>
-            </span>
-        </div>
-
-        <div style="display:inline-block; height:100%; display:flex; align-items:center; justify-content:center;" v-if="mode==='checkedPartially'">
-            <span style="display:flex;">
-                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useCheckedPartiallyColor" width="24px" height="24px" viewBox="0 0 24 24">
-                    <path v-if="false" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"></path>
-                    <path d="M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path>
-                </svg>
-            </span>
-        </div>
-
-        <div style="position:absolute; z-index:1; left:0; top:0; bottom:0; right:0; margin:auto;">
-            <div style="height:100%; display:flex; align-items:center; justify-content:center;" v-if="!editable">
-                <div :style="`display:inline-block; width:30px; height:2px; border-top:2px solid #fff; transform:translateY(-1px) rotate(45deg);`"></div>
-            </div>
-        </div>
+    <div :style="`display:inline-block; width:${iconSize}px; height:${iconSize}px; overflow:hidden;`">
+        <div :style="`transform:scale(${useScale}); transform-origin:0% 0%;`">
+            <div
+                :style="`position:relative; display:inline-block; width:${defIconSize}px; height:${defIconSize}px; user-select:none; ${editable?'cursor:pointer;':''} outline:none;`"
+                tabindex="0"
+                @keyup.enter="emitClick"
+                @click="emitClick"
+            >
+
+                <div :style="`display:flex; align-items:center; justify-content:center;`" v-if="mode==='unchecked'">
+                    <span style="display:flex;">
+                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useUncheckedColor" width="24px" height="24px" viewBox="0 -1 24 23">
+                            <path d="M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path>
+                        </svg>
+                    </span>
+                </div>
+
+                <div :style="`display:flex; align-items:center; justify-content:center;`" v-if="mode==='checked'">
+                    <span style="display:flex;">
+                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useCheckedColor" width="24px" height="24px" viewBox="0 -1 24 23">
+                            <path v-if="false" d="M19,19H5V5H15V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V11H19M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"></path>
+                            <path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path>
+                        </svg>
+                    </span>
+                </div>
+
+                <div :style="`display:flex; align-items:center; justify-content:center;`" v-if="mode==='checkedPartially'">
+                    <span style="display:flex;">
+                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useCheckedPartiallyColor" width="24px" height="24px" viewBox="0 -1 24 23">
+                            <path v-if="false" d="M19,19V5H5V19H19M19,3A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5C3,3.89 3.9,3 5,3H19M17,11V13H7V11H17Z"></path>
+                            <path d="M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path>
+                        </svg>
+                    </span>
+                </div>
+
+                <div style="position:absolute; z-index:1; left:0px; top:0px; bottom:0; right:0; margin:auto;">
+                    <div :style="`height:${defIconSize}px; transform:rotate(45deg) translateY(-3px);`" v-if="!editable">
+                        <div :style="`display:inline-block; width:30px; height:2px; border-top:2px solid #fff;`"></div>
+                    </div>
+                </div>
+
+                <div style="position:absolute; z-index:1; left:0px; top:0px; bottom:0; right:0; margin:auto;">
+                    <div :style="`height:${defIconSize}px; transform:rotate(45deg) translateY(-1px);`" v-if="!editable">
+                        <div :style="`display:inline-block; width:30px; height:2px; border-top:2px solid ${useDisabledColor};`"></div>
+                    </div>
+                </div>
 
-        <div style="position:absolute; z-index:1; left:0; top:0; bottom:0; right:0; margin:auto;">
-            <div style="height:100%; display:flex; align-items:center; justify-content:center;" v-if="!editable">
-                <div :style="`display:inline-block; width:30px; height:2px; border-top:2px solid ${useDisabledColor}; transform:translateY(1px)rotate(45deg);`"></div>
             </div>
         </div>
-
     </div>
 </template>
 
@@ -53,6 +57,7 @@ import color2hex from '../js/vuetifyColor.mjs'
 
 /**
  * @vue-prop {String} [mode='unchecked'] 輸入勾選模式字串，可選'unchecked'、'checked'、'checkedPartially'，預設'unchecked'
+ * @vue-prop {Number} [iconSize=24] 輸入顯隱icon按鈕高度數字，預設24
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  * @vue-prop {String} [uncheckedColor='grey darken-2'] 輸入未勾選時顏色字串，預設'grey darken-2'
  * @vue-prop {String} [uncheckedDisabledColor='grey'] 輸入禁用時未勾選時顏色字串，預設'grey'
@@ -69,6 +74,10 @@ export default {
             type: String,
             default: 'unchecked',
         },
+        iconSize: {
+            type: Number,
+            default: 24,
+        },
         editable: {
             type: Boolean,
             default: true,
@@ -100,10 +109,15 @@ export default {
     },
     data: function() {
         return {
+            defIconSize: 24,
         }
     },
     computed: {
 
+        useScale: function() {
+            return this.iconSize / this.defIconSize
+        },
+
         useDisabledColor: function() {
             //console.log('computed useDisabledColor')
 

package/src/components/WTreeIconToggle.vue

@@ -1,32 +1,38 @@
 <template>
-    <div
-        style="display:inline-block; user-select:none; cursor:pointer; outline:none;"
-        tabindex="0"
-        @keyup.enter="(v)=>{$emit('click',v)}"
-        @click="(v)=>{$emit('click',v)}"
-    >
-        <div
-            class="cc"
-            style="height:100%;"
-        >
+    <div :style="`display:inline-block; width:${iconSize}px; height:${iconSize}px; overflow:hidden;`">
+        <div :style="`transform:scale(${useScale}); transform-origin:0% 0%;`">
             <div
-                :style="`transition:all 0.1s; transform:rotate(${useRotate}deg)`"
+                :style="`display:inline-block; width:${defIconSize}px; height:${defIconSize}px; user-select:none; cursor:pointer; outline:none;`"
+                tabindex="0"
+                @keyup.enter="(v)=>{$emit('click',v)}"
+                @click="(v)=>{$emit('click',v)}"
             >
-
                 <div
-                    class="cc circle"
-                    :style="`transition: all 0.5s; background:${useIconBackgroundColor};`"
-                    @mouseenter="mouseenter"
-                    @mouseleave="mouseleave"
+                    class="cc"
+                    style="height:100%;"
                 >
-                    <!-- 圖標稍微偏左1px得強制移動 -->
                     <div
-                        class="caretRight"
-                        style="transform:translateX(1px);"
+                        :style="`transition:all 0.1s; transform:rotate(${useRotate}deg); transform-origin:50% 50%;`"
                     >
-                        <span style="display:flex;">
-                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useIconColor" width="11px" height="11px" x="0px" y="0px" viewBox="0 0 415.346 415.346" xml:space="preserve"><g><path d="M41.712,415.346c-11.763,0-21.3-9.537-21.3-21.3V21.299C20.412,9.536,29.949,0,41.712,0l346.122,191.697 c0,0,15.975,15.975,0,31.951C371.859,239.622,41.712,415.346,41.712,415.346z"/></g></svg>
-                        </span>
+
+                        <div style="padding:1px;">
+                            <div
+                                class="cc circle"
+                                :style="`transition:all 0.5s; background:${useIconBackgroundColor};`"
+                                @mouseenter="mouseenter"
+                                @mouseleave="mouseleave"
+                            >
+                                <!-- 圖標稍微偏左1px得強制移動 -->
+                                <div
+                                    class="caretRight"
+                                >
+                                    <span style="display:flex;">
+                                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :fill="useIconColor" width="11px" height="11px" x="0px" y="0px" viewBox="-70 0 475.346 415.346" xml:space="preserve"><g><path d="M41.712,415.346c-11.763,0-21.3-9.537-21.3-21.3V21.299C20.412,9.536,29.949,0,41.712,0l346.122,191.697 c0,0,15.975,15.975,0,31.951C371.859,239.622,41.712,415.346,41.712,415.346z"/></g></svg>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+
                     </div>
                 </div>
             </div>
@@ -41,6 +47,7 @@ import color2hex from '../js/vuetifyColor.mjs'
 
 /**
  * @vue-prop {String} [mode='right'] 輸入圖標朝向字串，可選'right'、'bottom'、'left'、'top'，預設'right'
+ * @vue-prop {Number} [iconSize=24] 輸入顯隱icon按鈕高度數字，預設24
  * @vue-prop {String} [iconColor='grey'] 輸入顯隱icon按鈕顏色字串，預設'grey'
  * @vue-prop {String} [iconBackgroundColor='transparent'] 輸入顯隱icon按鈕背景顏色字串，預設'transparent'
  * @vue-prop {String} [iconBackgroundColorHover='rgba(128,128,128,0.15)'] 輸入滑鼠移入時顯隱icon按鈕背景顏色字串，預設'rgba(128,128,128,0.15)'
@@ -53,6 +60,10 @@ export default {
             type: String,
             default: 'right',
         },
+        iconSize: {
+            type: Number,
+            default: 24,
+        },
         iconColor: {
             type: String,
             default: 'grey',
@@ -68,6 +79,7 @@ export default {
     },
     data: function() {
         return {
+            defIconSize: 24,
         }
     },
     computed: {
@@ -86,6 +98,10 @@ export default {
             return get(kp, vo.dir, 0)
         },
 
+        useScale: function() {
+            return this.iconSize / this.defIconSize
+        },
+
         useIconColor: function() {
             //console.log('computed useIconColor')
 
@@ -147,9 +163,13 @@ export default {
     justify-content: center;
 }
 .circle {
-    width: 24px;
-    height: 24px;
-    border-radius: 24px;
+    width: 22px;
+    height: 22px;
+    min-width: 22px;
+    min-height: 22px;
+    max-width: 22px;
+    max-height: 22px;
+    border-radius: 50%;
 }
 </style>