@itfin/components 1.2.100 → 1.2.102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.100",
+  "version": "1.2.102",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/text-field/HoursField.vue

@@ -0,0 +1,59 @@
+<template>
+
+  <itf-text-field
+    ref="input"
+    v-bind="$props"
+    @input="onValueChange"
+    @blur="onBlur"
+  />
+
+</template>
+<script>
+import { Vue, Watch, Component, Model, Inject, Prop } from 'vue-property-decorator';
+import itfTextField from './TextField.vue';
+import { parseHours, formatHours } from '../../helpers/formatters';
+
+export default @Component({
+  name: 'itfHoursField',
+  components: {
+    itfTextField
+  }
+})
+class itfHoursField extends Vue {
+  @Inject({ default: null }) itemLabel;
+  @Model('input') value;
+  @Prop() hours;
+  @Prop(String) prependIcon;
+  @Prop(String) placeholder;
+  @Prop(Boolean) clearable;
+  @Prop(Boolean) disabled;
+  @Prop(Boolean) readonly;
+  @Prop({ type: [Number, String], default: 0 }) delayInput;
+
+  mounted() {
+    this.onHoursChanged();
+  }
+
+  @Watch('hours')
+  onHoursChanged() {
+    console.info(formatHours(this.hours),this.hours)
+    this.$emit('input', formatHours(this.hours));
+  }
+
+  onValueChange(text) {
+  }
+
+  focus() {
+    this.$refs.input.focus();
+  }
+
+  blur() {
+    this.$refs.input.blur();
+  }
+
+  onBlur(e) {
+    const hours = parseHours(e.target.value) / 60;
+    this.$emit('update:hours', hours);
+  }
+}
+</script>

package/src/components/text-field/index.stories.js

@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/vue';
 import itfMoneyField from './MoneyField.vue';
+import itfHoursField from './HoursField.vue';
 import itfForm from '../form/Form.vue';
 import itfButton from '../button/Button.vue';
 import itfIcon from '../icon/Icon.vue';
@@ -14,7 +15,8 @@ storiesOf('Common', module)
       itfForm,
       itfButton,
       itfLabel,
-      itfMoneyField
+      itfMoneyField,
+      itfHoursField
     },
     data() {
       return {
@@ -25,6 +27,8 @@ storiesOf('Common', module)
           { Id: 4, Symbol: 'ERO', Code: 'EUR', Title: 'Euroooo' },
           { Id: 3, Symbol: ".د.ب", Code: 'AED', Title: 'Emirati Dirham' },
         ],
+        hoursStr: '10h 10m',
+        hours: 0,
         currency: null
       }
     },
@@ -43,11 +47,12 @@ storiesOf('Common', module)
 
       <itf-app ref="app">
 
-        {{value}}
-        {{currency}}
+        {{hours}}
 
         <itf-money-field v-model="value" :currencies="currencies" :currency.sync="currency" />
 
+        <itf-hours-field v-model="hoursStr" :hours.sync="hours" />
+
       </itf-app>
     </div>`,
   }));

package/src/helpers/formatters.js

@@ -81,3 +81,28 @@ export function firstLetters(name) {
   }
   return ((first[0] || '') + (second[0] || '')).toUpperCase();
 }
+
+export function formatHours (val, removeEmptyMinutes = false) {
+  let hours = Math.floor(Math.abs(val) / 60);
+  let minutes = Math.abs(val) - hours * 60;
+  if (isNaN(minutes)) {
+    return '—';
+  }
+  minutes = Math.floor(minutes);
+  if (!removeEmptyMinutes) {
+    if (minutes < 10) {
+      minutes = '0' + minutes;
+    }
+    minutes = ` ${minutes}m`;
+  } else {
+    minutes = '';
+  }
+  const sign = val < 0 ? '-' : '';
+  if (!hours) {
+    return `${sign}0h${minutes}`;
+  }
+  if (hours < 10) {
+    hours = '0' + hours;
+  }
+  return `${sign}${hours}h${minutes}`;
+}