w-component-vue 2.2.27 → 2.2.30

package/src/AppZoneWTimedayRange.vue

@@ -21,6 +21,37 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-timeday-range'"
+                    :casename="'paddingStyle (thin style) & distY'"
+                ></demolink>
+
+                <w-timeday-range
+                    :icon="''"
+                    :paddingStyle="{v:0,h:8}"
+                    :distY="3"
+                    :dayStart.sync="WTimedayRange.dayStart"
+                    :dayEnd.sync="WTimedayRange.dayEnd"
+                ></w-timeday-range>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-timeday-range'"
+                    :casename="'paddingStyle (equal height to using icon)'"
+                ></demolink>
+
+                <w-timeday-range
+                    :icon="''"
+                    :paddingStyle="{v:4,h:15}"
+                    :dayStart.sync="WTimedayRange.dayStart"
+                    :dayEnd.sync="WTimedayRange.dayEnd"
+                ></w-timeday-range>
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-timeday-range'"
@@ -80,12 +111,13 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-timeday-range'"
-                    :casename="'icon & iconSize'"
+                    :casename="'icon & iconSize & distY'"
                 ></demolink>
 
                 <w-timeday-range
                     :icon="mdiCheckUnderlineCircle"
                     :iconSize="20"
+                    :distY="5"
                     :dayStart.sync="WTimedayRange.dayStart"
                     :dayEnd.sync="WTimedayRange.dayEnd"
                 ></w-timeday-range>

package/src/AppZoneWTimeminute.vue

@@ -18,6 +18,35 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-timeminute'"
+                    :casename="'paddingStyle (thin style) & distY'"
+                ></demolink>
+
+                <w-timeminute
+                    :icon="''"
+                    :paddingStyle="{v:0,h:8}"
+                    :distY="3"
+                    v-model="WTimeminute.value"
+                ></w-timeminute>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-timeminute'"
+                    :casename="'paddingStyle (equal height to using icon)'"
+                ></demolink>
+
+                <w-timeminute
+                    :icon="''"
+                    :paddingStyle="{v:4,h:15}"
+                    v-model="WTimeminute.value"
+                ></w-timeminute>
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-timeminute'"
@@ -60,12 +89,13 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-timeminute'"
-                    :casename="'icon & iconSize'"
+                    :casename="'icon & iconSize & distY'"
                 ></demolink>
 
                 <w-timeminute
                     :icon="mdiCheckUnderlineCircle"
                     :iconSize="20"
+                    :distY="5"
                     v-model="WTimeminute.value"
                 ></w-timeminute>
             </div>

package/src/AppZoneWTimeminuteRange.vue

@@ -21,6 +21,37 @@
             </div>
 
 
+            <div class="bk">
+                <demolink
+                    :kbname="'w-timeminute-range'"
+                    :casename="'paddingStyle (thin style) & distY'"
+                ></demolink>
+
+                <w-timeminute-range
+                    :icon="''"
+                    :paddingStyle="{v:0,h:8}"
+                    :distY="3"
+                    :minuteStart.sync="WTimeminuteRange.minuteStart"
+                    :minuteEnd.sync="WTimeminuteRange.minuteEnd"
+                ></w-timeminute-range>
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-timeminute-range'"
+                    :casename="'paddingStyle (equal height to using icon)'"
+                ></demolink>
+
+                <w-timeminute-range
+                    :icon="''"
+                    :paddingStyle="{v:4,h:15}"
+                    :minuteStart.sync="WTimeminuteRange.minuteStart"
+                    :minuteEnd.sync="WTimeminuteRange.minuteEnd"
+                ></w-timeminute-range>
+            </div>
+
+
             <div class="bk">
                 <demolink
                     :kbname="'w-timeminute-range'"
@@ -80,12 +111,13 @@
             <div class="bk">
                 <demolink
                     :kbname="'w-timeminute-range'"
-                    :casename="'icon & iconSize'"
+                    :casename="'icon & iconSize & distY'"
                 ></demolink>
 
                 <w-timeminute-range
                     :icon="mdiCheckUnderlineCircle"
                     :iconSize="20"
+                    :distY="5"
                     :minuteStart.sync="WTimeminuteRange.minuteStart"
                     :minuteEnd.sync="WTimeminuteRange.minuteEnd"
                 ></w-timeminute-range>

package/src/AppZoneWTree.vue

@@ -120,6 +120,29 @@
             </div>
 
 
+            <div class="bk dz">
+                <demolink
+                    :kbname="'w-tree'"
+                    :casename="'toggleItemsByFun'"
+                ></demolink>
+
+                <div>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItems(0)">toggle(rows[0])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItems(0, true)">show(rows[0])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItems(0, false)">hide(rows[0])</v-btn>
+                    <v-btn style="margin:0px 5px 5px 0px;" small @click="toggleItems(1)">toggle(rows[1])</v-btn>
+                </div>
+
+                <w-tree
+                    ref="ref_toggleItemsByFun"
+                    style="border:1px solid #ddd;"
+                    :viewHeightMax="WTree.viewHeightMaxSync"
+                    :data="WTree.option.items"
+                ></w-tree>
+
+            </div>
+
+
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
@@ -204,16 +227,16 @@
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'activable & activeItem'"
+                    :casename="'activable & itemActive'"
                 ></demolink>
 
-                <div style="font-size:0.8rem;">activeItem: {{WTree.option.activeItem}}</div>
+                <div style="font-size:0.8rem;">itemActive: {{WTree.option.itemActive}}</div>
 
                 <w-tree
                     style="border:1px solid #ddd;"
                     :data="WTree.option.items"
                     :activable="true"
-                    :activeItem.sync="WTree.option.activeItem"
+                    :itemActive.sync="WTree.option.itemActive"
                     @click="clickActive"
                 ></w-tree>
 
@@ -223,16 +246,16 @@
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'activable & activeItem & funActive'"
+                    :casename="'activable & itemActive & funActive'"
                 ></demolink>
 
-                <div style="font-size:0.8rem;">activeItem: {{WTree.option.activeItem}}</div>
+                <div style="font-size:0.8rem;">itemActive: {{WTree.option.itemActive}}</div>
 
                 <w-tree
                     style="border:1px solid #ddd;"
                     :data="WTree.option.items"
                     :activable="true"
-                    :activeItem.sync="WTree.option.activeItem"
+                    :itemActive.sync="WTree.option.itemActive"
                     :funActive="funActive"
                     @click="clickActive"
                 ></w-tree>
@@ -243,16 +266,16 @@
             <div class="bk dz">
                 <demolink
                     :kbname="'w-tree'"
-                    :casename="'activable & activeItem & itemTextColor & itemTextColorHover & itemTextColorActive & itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"
+                    :casename="'activable & itemActive & itemTextColor & itemTextColorHover & itemTextColorActive & itemBackgroundColor & itemBackgroundColorHover & itemBackgroundColorActive'"
                 ></demolink>
 
-                <div style="font-size:0.8rem;">activeItem: {{WTree.option.activeItem}}</div>
+                <div style="font-size:0.8rem;">itemActive: {{WTree.option.itemActive}}</div>
 
                 <w-tree
                     style="border:1px solid #ddd; background:#444;"
                     :data="WTree.option.items"
                     :activable="true"
-                    :activeItem.sync="WTree.option.activeItem"
+                    :itemActive.sync="WTree.option.itemActive"
                     :itemTextColor="'#ccc'"
                     :itemTextColorHover="'#eee'"
                     :itemTextColorActive="'#fff'"
@@ -1131,7 +1154,7 @@ export default {
                         { 'id': 18 },
                         //勾選id:18會自動再加入id:19
                     ],
-                    activeItem: {
+                    itemActive: {
                         'id': 4
                     },
                     items: [
@@ -1582,6 +1605,21 @@ export default {
             }
             return b
         },
+        toggleItems: function(ind, toUnfolding) {
+            console.log('toggleItems', ind, toUnfolding)
+
+            let vo = this
+
+            //toggleItemsByFun
+            vo.$refs.ref_toggleItemsByFun.toggleItemsByFun((rows) => {
+                console.log('toggleItems rows', rows)
+                return {
+                    row: rows[ind],
+                    toUnfolding,
+                }
+            })
+
+        },
     },
 }
 </script>

package/src/components/WDynamicList.vue

@@ -261,6 +261,17 @@ export default {
     },
     methods: {
 
+        getRows: function() {
+            //console.log('methods getRows')
+
+            let vo = this
+
+            //rows
+            let rows = gm.get(vo.mmkey)
+
+            return rows
+        },
+
         setRowsCore: function(rows) {
             // console.log('methods setRowsCore', rows)
 

package/src/components/WJsonView.vue

@@ -542,6 +542,14 @@ export default {
             return c
         },
 
+        toggleItemsByFun: function(cb) {
+            // console.log('methods toggleItemsByFun', cb)
+
+            let vo = this
+
+            return vo.$refs.wt.toggleItemsByFun(cb)
+        },
+
     },
 }
 </script>

package/src/components/WTimeday.vue

@@ -33,6 +33,7 @@
                 :textColor="textColor"
                 :pickColor="pickColor"
                 :value="value"
+                :distY="distY"
                 :editable="editable"
                 @update:focused="changeFocused"
                 @input="(v)=>{$emit('input', v)}"
@@ -50,9 +51,9 @@ import WTimedayCore from './WTimedayCore.vue'
 
 
 /**
- * @vue-prop {String} [textFontSize='0.9rem'] 輸入文字大小字串，預設'0.9rem'
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字大小字串，預設'0.85rem'
  * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
- * @vue-prop {Object} [paddingStyle={v:0,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:15}
+ * @vue-prop {Object} [paddingStyle={v:2,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:2,h:15}
  * @vue-prop {Number} [borderRadius=30] 輸入框圓角度數字，單位為px，預設30
  * @vue-prop {Boolean} [shadow=true] 輸入是否為陰影模式，預設true
  * @vue-prop {String} [value=''] 輸入日期字串，預設''
@@ -71,6 +72,7 @@ import WTimedayCore from './WTimedayCore.vue'
  * @vue-prop {String} [borderColorHover='white'] 輸入滑鼠移入時邊框顏色字串，預設'white'
  * @vue-prop {String} [borderColorFocus='white'] 輸入取得焦點時邊框顏色字串，預設'white'
  * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
+ * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  * @vue-prop {Boolean} [focused=false] 輸入是否為取得焦點狀態，預設false
  */
@@ -82,7 +84,7 @@ export default {
     props: {
         textFontSize: {
             type: String,
-            default: '0.9rem',
+            default: '0.85rem',
         },
         textColor: {
             type: String,
@@ -92,7 +94,7 @@ export default {
             type: Object,
             default: () => {
                 return {
-                    v: 0,
+                    v: 2,
                     h: 15,
                 }
             },
@@ -169,6 +171,10 @@ export default {
             type: String,
             default: 'deep-orange darken-1',
         },
+        distY: {
+            type: Number,
+            default: 7,
+        },
         editable: {
             type: Boolean,
             default: true,

package/src/components/WTimedayCore.vue

@@ -1,12 +1,12 @@
 <template>
-    <!-- 時間組件因v-date-picker有點擊區域的限制, 故得使用display:inline-block -->
     <div
-        style="display:inline-block;"
+        style=""
         :changeParam="changeParam"
     >
 
         <v-menu
             offset-y
+            :nudge-bottom="distY"
             :close-on-content-click="false"
             :disabled="!editable"
             v-model="show"
@@ -15,7 +15,7 @@
             <template v-slot:activator="{ on }">
                 <div
                     TimedayCore="day"
-                    :style="`display:inline-block; width:83px; color:${useTextColor}; ${useTextFontSize} height:${height}px; line-height:${height}px; vertical-align:middle;`"
+                    :style="`_width:83px; color:${useTextColor}; ${useTextFontSize}`"
                     v-on="on"
                 >
                     {{getShowTime}}
@@ -50,10 +50,10 @@ import color2hex from '../js/vuetifyColor.mjs'
 
 /**
  * @vue-prop {String} [value=''] 輸入日期字串，預設''
- * @vue-prop {String} [textFontSize='0.9rem'] 輸入文字大小字串，預設'0.9rem'
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字大小字串，預設'0.85rem'
  * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
  * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
- * @vue-prop {Number} [height=28] 輸入高度數字，單位為px，預設28
+ * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
 export default {
@@ -64,7 +64,7 @@ export default {
         },
         textFontSize: {
             type: String,
-            default: '0.9rem',
+            default: '0.85rem',
         },
         textColor: {
             type: String,
@@ -74,9 +74,9 @@ export default {
             type: String,
             default: 'deep-orange darken-1',
         },
-        height: {
+        distY: {
             type: Number,
-            default: 28,
+            default: 7,
         },
         editable: {
             type: Boolean,

package/src/components/WTimedayRange.vue

@@ -30,10 +30,12 @@
 
             <WTimedayRangeCore
                 :pickColor="pickColor"
+                :textFontSize="textFontSize"
                 :textColor="textColor"
                 :between="between"
                 :dayStart="dayStart"
                 :dayEnd="dayEnd"
+                :distY="distY"
                 :editable="editable"
                 @update:focused="changeFocused"
                 @update:dayStart="(v)=>{$emit('update:dayStart', v)}"
@@ -52,7 +54,7 @@ import WTimedayRangeCore from './WTimedayRangeCore.vue'
 
 
 /**
- * @vue-prop {Object} [paddingStyle={v:0,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:15}
+ * @vue-prop {Object} [paddingStyle={v:2,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:2,h:15}
  * @vue-prop {Number} [borderRadius=30] 輸入框圓角度數字，單位為px，預設30
  * @vue-prop {Boolean} [shadow=true] 輸入是否為陰影模式，預設true
  * @vue-prop {String} [dayStart=''] 輸入起始日期字串，預設''
@@ -72,8 +74,10 @@ import WTimedayRangeCore from './WTimedayRangeCore.vue'
  * @vue-prop {String} [borderColor='white'] 輸入邊框顏色字串，預設'white'
  * @vue-prop {String} [borderColorHover='white'] 輸入滑鼠移入時邊框顏色字串，預設'white'
  * @vue-prop {String} [borderColorFocus='white'] 輸入取得焦點時邊框顏色字串，預設'white'
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字大小字串，預設'0.85rem'
  * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
  * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
+ * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  * @vue-prop {Boolean} [focused=false] 輸入是否為取得焦點狀態，預設false
  */
@@ -87,7 +91,7 @@ export default {
             type: Object,
             default: () => {
                 return {
-                    v: 0,
+                    v: 2,
                     h: 15,
                 }
             },
@@ -168,6 +172,10 @@ export default {
             type: String,
             default: 'white',
         },
+        textFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
         textColor: {
             type: String,
             default: 'black',
@@ -176,6 +184,10 @@ export default {
             type: String,
             default: 'deep-orange darken-1',
         },
+        distY: {
+            type: Number,
+            default: 7,
+        },
         editable: {
             type: Boolean,
             default: true,

package/src/components/WTimedayRangeCore.vue

@@ -1,6 +1,5 @@
 <template>
-    <!-- 時間組件因v-date-picker有點擊區域的限制, 故得使用display:inline-block -->
-    <div style="display:inline-block;">
+    <div style="">
         <!-- 盡量不要讓display:flex暴露至外層 -->
         <div style="display:flex; align-items:center;">
 
@@ -9,14 +8,14 @@
                 :textFontSize="textFontSize"
                 :textColor="textColor"
                 :pickColor="pickColor"
-                :height="height"
+                :distY="distY"
                 :editable="editable"
                 :value="dayStart"
                 @update:focused="(v)=>{focused_start=v;changeFocused()}"
                 @input="(v)=>{$emit('update:dayStart', v)}"
             ></WTimedayCore>
 
-            <div :style="`display:inline-block; padding-left:5px; padding-right:8px; height:${height}px; line-height:${height}px; color:${useTextColor}; ${useTextFontSize} vertical-align:middle;`">
+            <div :style="`padding-left:5px; padding-right:8px; color:${useTextColor}; ${useTextFontSize}`">
                 {{between}}
             </div>
 
@@ -25,7 +24,7 @@
                 :textFontSize="textFontSize"
                 :textColor="textColor"
                 :pickColor="pickColor"
-                :height="height"
+                :distY="distY"
                 :editable="editable"
                 :value="dayEnd"
                 @update:focused="(v)=>{focused_end=v;changeFocused()}"
@@ -46,10 +45,10 @@ import WTimedayCore from './WTimedayCore.vue'
  * @vue-prop {String} [dayStart=''] 輸入起始日期字串，預設''
  * @vue-prop {String} [dayEnd=''] 輸入結束日期字串，預設''
  * @vue-prop {String} [between='to'] 輸入兩日期連接文字字串，預設'to'
- * @vue-prop {String} [textFontSize='0.9rem'] 輸入文字大小字串，預設'0.9rem'
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字大小字串，預設'0.85rem'
  * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
  * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
- * @vue-prop {Number} [height=28] 輸入高度數字，單位為px，預設28
+ * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
 export default {
@@ -71,7 +70,7 @@ export default {
         },
         textFontSize: {
             type: String,
-            default: '0.9rem',
+            default: '0.85rem',
         },
         textColor: {
             type: String,
@@ -81,9 +80,9 @@ export default {
             type: String,
             default: 'deep-orange darken-1',
         },
-        height: {
+        distY: {
             type: Number,
-            default: 28,
+            default: 7,
         },
         editable: {
             type: Boolean,

package/src/components/WTimeminute.vue

@@ -33,11 +33,13 @@
                 :hourMax="hourMax"
                 :minuteInter="minuteInter"
                 :minutesCustom="minutesCustom"
+                :textFontSize="textFontSize"
                 :textColor="textColor"
                 :pickColor="pickColor"
                 :expansionIcon="expansionIcon"
                 :expansionIconSize="expansionIconSize"
                 :expansionIconColor="expansionIconColor"
+                :distY="distY"
                 :editable="editable"
                 :value="value"
                 @update:focused="changeFocused"
@@ -56,7 +58,7 @@ import WTimeminuteCore from './WTimeminuteCore.vue'
 
 
 /**
- * @vue-prop {Object} [paddingStyle={v:0,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:0,h:15}
+ * @vue-prop {Object} [paddingStyle={v:2,h:15}] 輸入內寬距離物件，可用鍵值為v、h、left、right、top、bottom，v代表同時設定top與bottom，h代表設定left與right，若有重複設定時後面鍵值會覆蓋前面，各鍵值為寬度數字，單位為px，預設{v:2,h:15}
  * @vue-prop {Number} [borderRadius=30] 輸入框圓角度數字，單位為px，預設30
  * @vue-prop {Boolean} [shadow=true] 輸入是否為陰影模式，預設true
  * @vue-prop {String} [value=''] 輸入日期字串，預設''
@@ -78,11 +80,13 @@ import WTimeminuteCore from './WTimeminuteCore.vue'
  * @vue-prop {String} [borderColor='white'] 輸入邊框顏色字串，預設'white'
  * @vue-prop {String} [borderColorHover='white'] 輸入滑鼠移入時邊框顏色字串，預設'white'
  * @vue-prop {String} [borderColorFocus='white'] 輸入取得焦點時邊框顏色字串，預設'white'
+ * @vue-prop {String} [textFontSize='0.85rem'] 輸入文字大小字串，預設'0.85rem'
  * @vue-prop {String} [textColor='black'] 輸入文字顏色字串，預設'black'
  * @vue-prop {String} [pickColor='deep-orange darken-1'] 輸入日期彈窗中選擇指定日期之顏色字串，預設'deep-orange darken-1'
  * @vue-prop {String} [expansionIcon=mdiPlay] 輸入顯隱圖標字串，可為mdi,md,fa代號或mdi/js路徑，預設使用mdi的圖標(mdiPlay)
  * @vue-prop {Number} [expansionIconSize=18] 輸入顯隱圖標尺寸數字，單位為px，預設18
  * @vue-prop {String} [expansionIconColor='grey'] 輸入顯隱圖標顏色字串，預設'grey'
+ * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  * @vue-prop {Boolean} [focused=false] 輸入是否為取得焦點狀態，預設false
  */
@@ -96,7 +100,7 @@ export default {
             type: Object,
             default: () => {
                 return {
-                    v: 0,
+                    v: 2,
                     h: 15,
                 }
             },
@@ -185,6 +189,10 @@ export default {
             type: String,
             default: 'white',
         },
+        textFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
         textColor: {
             type: String,
             default: 'black',
@@ -205,6 +213,10 @@ export default {
             type: String,
             default: 'grey',
         },
+        distY: {
+            type: Number,
+            default: 7,
+        },
         editable: {
             type: Boolean,
             default: true,