w-component-vue 2.2.29 → 2.2.32

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,