w-component-vue 2.2.28 → 2.2.31

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

@@ -227,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>
 
@@ -246,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>
@@ -266,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'"
@@ -1154,7 +1154,7 @@ export default {
                         { 'id': 18 },
                         //勾選id:18會自動再加入id:19
                     ],
-                    activeItem: {
+                    itemActive: {
                         'id': 4
                     },
                     items: [

package/src/components/WLeafletVueDyn.vue

@@ -103,7 +103,7 @@ export default {
             type: Array,
             default: () => [
                 //現在w-leaflet-vue已依賴w-component-vue故為循環引用, 但使用dyn則為脫勾, 故仍需人工更新此處版本
-                'https://cdn.jsdelivr.net/npm/w-leaflet-vue@1.0.19/dist/w-leaflet-vue.umd.js',
+                'https://cdn.jsdelivr.net/npm/w-leaflet-vue@1.0.23/dist/w-leaflet-vue.umd.js',
             ],
         },
         opt: {

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,

package/src/components/WTimeminuteCore.vue

@@ -1,7 +1,6 @@
 <template>
-    <!-- 時間組件因v-date-picker有點擊區域的限制, 故得使用display:inline-block -->
     <div
-        style="display:inline-block;"
+        style=""
         :changeParam="changeParam"
     >
         <!-- 盡量不要讓display:flex暴露至外層 -->
@@ -13,7 +12,7 @@
                 :textFontSize="textFontSize"
                 :textColor="textColor"
                 :pickColor="pickColor"
-                :height="height"
+                :distY="distY"
                 :editable="editable"
                 :value="value_day"
                 @update:focused="(v)=>{focused_day=v;changeFocused()}"
@@ -26,11 +25,11 @@
                     :mode="'select'"
                     :textFontSize="textFontSize"
                     :textColor="textColor"
+                    :distY="distY"
                     :minWidth="70"
                     :expansionIcon="expansionIcon"
                     :expansionIconSize="expansionIconSize"
                     :expansionIconColor="expansionIconColor"
-                    :height="height"
                     :editable="editable"
                     :items="getUseMinutes"
                     :value="value_time"
@@ -65,13 +64,13 @@ import WTextSuggestCore from './WTextSuggestCore.vue'
  * @vue-prop {Number} [hourMax=8] 輸入可選最大小時，單位為小時，預設8
  * @vue-prop {Number} [minuteInter=15] 輸入每小時的切分區間，單位為分鐘，預設15
  * @vue-prop {Array} [minutesCustom=null] 輸入自訂可選的時分點字串陣列，單位為時分(00:00)，若給予，則上述hourMin,hourMax,minuteInter自動失效，預設null
- * @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 {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} [height=28] 輸入高度數字，單位為px，預設28
+ * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
 export default {
@@ -102,7 +101,7 @@ export default {
         },
         textFontSize: {
             type: String,
-            default: '0.9rem',
+            default: '0.85rem',
         },
         textColor: {
             type: String,
@@ -124,9 +123,9 @@ export default {
             type: String,
             default: 'grey',
         },
-        height: {
+        distY: {
             type: Number,
-            default: 28,
+            default: 7,
         },
         editable: {
             type: Boolean,

package/src/components/WTimeminuteRange.vue

@@ -29,6 +29,7 @@
         >
 
             <WTimeminuteRangeCore
+                :textFontSize="textFontSize"
                 :textColor="textColor"
                 :pickColor="pickColor"
                 :expansionIcon="expansionIcon"
@@ -41,6 +42,7 @@
                 :between="between"
                 :minuteEnd="minuteEnd"
                 :minuteStart="minuteStart"
+                :distY="distY"
                 :editable="editable"
                 @update:focused="changeFocused"
                 @update:minuteEnd="(v)=>{$emit('update:minuteEnd', v)}"
@@ -59,7 +61,7 @@ import WTimeminuteRangeCore from './WTimeminuteRangeCore.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} [minuteStart=''] 輸入時間字串，預設''
@@ -83,11 +85,13 @@ import WTimeminuteRangeCore from './WTimeminuteRangeCore.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
  */
@@ -101,7 +105,7 @@ export default {
             type: Object,
             default: () => {
                 return {
-                    v: 0,
+                    v: 2,
                     h: 15,
                 }
             },
@@ -198,6 +202,10 @@ export default {
             type: String,
             default: 'white',
         },
+        textFontSize: {
+            type: String,
+            default: '0.85rem',
+        },
         textColor: {
             type: String,
             default: 'black',
@@ -218,6 +226,10 @@ export default {
             type: String,
             default: 'grey',
         },
+        distY: {
+            type: Number,
+            default: 7,
+        },
         editable: {
             type: Boolean,
             default: true,

package/src/components/WTimeminuteRangeCore.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;">
 
@@ -16,14 +15,14 @@
                 :expansionIcon="expansionIcon"
                 :expansionIconSize="expansionIconSize"
                 :expansionIconColor="expansionIconColor"
-                :height="height"
+                :distY="distY"
                 :editable="editable"
                 :value="minuteStart"
                 @update:focused="(v)=>{focused_start=v;changeFocused()}"
                 @input="(v)=>{$emit('update:minuteStart', v)}"
             ></WTimeminuteCore>
 
-            <div :style="`display:inline-block; padding-left:9px; padding-right:11px; height:${height}px; line-height:${height}px; color:${useTextColor}; ${useTextFontSize} vertical-align:middle;`">
+            <div :style="`padding-left:9px; padding-right:11px; color:${useTextColor}; ${useTextFontSize}`">
                 {{between}}
             </div>
 
@@ -39,7 +38,7 @@
                 :expansionIcon="expansionIcon"
                 :expansionIconSize="expansionIconSize"
                 :expansionIconColor="expansionIconColor"
-                :height="height"
+                :distY="distY"
                 :editable="editable"
                 :value="minuteEnd"
                 @update:focused="(v)=>{focused_end=v;changeFocused()}"
@@ -65,13 +64,13 @@ import WTimeminuteCore from './WTimeminuteCore.vue'
  * @vue-prop {Number} [hourMax=8] 輸入可選最大小時，單位為小時，預設8
  * @vue-prop {Number} [minuteInter=15] 輸入每小時的切分區間，單位為分鐘，預設15
  * @vue-prop {Array} [minutesCustom=null] 輸入自訂可選的時分點字串陣列，單位為時分(00:00)，若給予，則上述hourMin,hourMax,minuteInter自動失效，預設null
- * @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 {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} [height=28] 輸入高度數字，單位為px，預設28
+ * @vue-prop {Number} [distY=7] 輸入日期彈窗y向下平移數字，預設7
  * @vue-prop {Boolean} [editable=true] 輸入是否為編輯模式，預設true
  */
 export default {
@@ -109,7 +108,7 @@ export default {
         },
         textFontSize: {
             type: String,
-            default: '0.9rem',
+            default: '0.85rem',
         },
         textColor: {
             type: String,
@@ -131,9 +130,9 @@ export default {
             type: String,
             default: 'grey',
         },
-        height: {
+        distY: {
             type: Number,
-            default: 28,
+            default: 7,
         },
         editable: {
             type: Boolean,