buefy#1718 add hours-label and minutes-label to clockpicker

REInVent650 · Aug 31, 2019 · 2318232 · 2318232
1 parent 97b32c5
commit 2318232
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,14 +4,16 @@
 
 ### New features
 
-Add ``customIconPacks`` constructor option to use custom icon packs (thanks @service-paradis)
-Add ``can-close`` prop to dropdown (thanks @service-paradis)
-Add ``close-on-click`` prop to form navbar (thanks @wanxe)
-Add ``icon-prev`` and ``icon-next`` props to datepicker, steps and pagination  (thanks @service-paradis)
-Add ``lazy`` prop to slider (thanks @yxngl)
-Add ``dragging``, ``dragstart`` and ``dragend`` events to slider (thanks @yxngl)
-Add ``setValidity`` method to form components (thanks @GerryWilko)
+* Add ``customIconPacks`` constructor option to use custom icon packs (thanks @service-paradis)
+* Add ``can-close`` prop to dropdown (thanks @service-paradis)
+* Add ``close-on-click`` prop to form navbar (thanks @wanxe)
+* Add ``icon-prev`` and ``icon-next`` props to datepicker, steps and pagination  (thanks @service-paradis)
+* Add ``lazy`` prop to slider (thanks @yxngl)
+* Add ``dragging``, ``dragstart`` and ``dragend`` events to slider (thanks @yxngl)
+* Add ``setValidity`` method to form components (thanks @GerryWilko)
+* Add ``hours-label`` and ``minutes-label`` props to clockpicker
 * #1677 Add ``wrapper-class`` prop to navbar (thanks @wanxe)
+* Improve steps look on mobile (thanks @service-paradis)
 
 ### Fixes
 

diff --git a/docs/pages/components/clockpicker/api/clockpicker.js b/docs/pages/components/clockpicker/api/clockpicker.js
@@ -137,6 +137,20 @@ export default [
                 values: '—',
                 default: '<code>false</code>'
             },
+            {
+                name: '<code>hours-label</code>',
+                description: `Label to show on hour button`,
+                type: 'String',
+                values: '—',
+                default: `<code>Hours</code>`
+            },
+            {
+                name: '<code>minutes-label</code>',
+                description: `Label to show on minutes button`,
+                type: 'String',
+                values: '—',
+                default: `<code>Min</code>`
+            },
             {
                 name: 'Any native attribute',
                 description: '—',

diff --git a/docs/pages/installation/api/constructor-options.js b/docs/pages/installation/api/constructor-options.js
@@ -296,6 +296,20 @@ export default [
                 values: '—',
                 default: '—'
             },
+            {
+                name: '<code>defaultClockpickerHoursLabel</code>',
+                description: `Default clockpicker <code>hours-label</code> attribute`,
+                type: 'String',
+                values: '—',
+                default: `<code>Hours</code>`
+            },
+            {
+                name: '<code>defaultClockpickerMinutesLabel</code>',
+                description: `Default clockpicker <code>minutes-label</code> attribute`,
+                type: 'String',
+                values: '—',
+                default: `<code>Min</code>`
+            }
         ]
     }
 ]
diff --git a/src/components/clockpicker/Clockpicker.vue b/src/components/clockpicker/Clockpicker.vue
@@ -65,11 +65,11 @@
                             <div
                                 class="b-clockpicker-btn"
                                 :class="{ active: isSelectingHour }"
-                                @click="isSelectingHour = true">Hours</div>
+                                @click="isSelectingHour = true">{{ hoursLabel }}</div>
                             <span
                                 class="b-clockpicker-btn"
                                 :class="{ active: !isSelectingHour }"
-                                @click="isSelectingHour = false">Min</span>
+                                @click="isSelectingHour = false">{{ minutesLabel }}</span>
                         </div>
                         <div v-if="!isHourFormat24 && !inline" class="b-clockpicker-period">
                             <div
@@ -134,6 +134,7 @@ import Input from '../input/Input'
 import Field from '../field/Field'
 import Icon from '../icon/Icon'
 import ClockpickerFace from './ClockpickerFace'
+import config from '../../utils/config'
 
 const outerPadding = 12
 
@@ -171,6 +172,14 @@ export default {
         type: {
             type: String,
             default: 'is-primary'
+        },
+        hoursLabel: {
+            type: String,
+            default: () => config.defaultClockpickerHoursLabel || 'Hours'
+        },
+        minutesLabel: {
+            type: String,
+            default: () => config.defaultClockpickerMinutesLabel || 'Min'
         }
     },
     data() {

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -66,8 +66,9 @@ export declare type BuefyConfig = {
     defaultDatepickerNearbyMonthDays?: boolean;
     defaultDatepickerNearbySelectableMonthDays?: boolean;
     defaultDatepickerShowWeekNumber?: boolean;
-
     customIconPacks?: any;
+    defaultClockpickerHoursLabel?: string;
+    defaultClockpickerMinutesLabel?: string;
 };
 
 declare const _default: {