@itfin/components 1.0.34 → 1.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.34",
+  "version": "1.0.38",
 
   "main": "dist/itfin-components.umd.js",
   "unpkg": "dist/itfin-components.common.js",

package/src/assets/scss/_variables.scss

@@ -42,7 +42,7 @@ $input-focus-border: rgb(11 49 79 / 25%);
 $form-check-input-border: 1px solid rgba(#000, .08);
 $form-switch-focus-color: tint-color($primary, 50%);
 
-$modal-backdrop-bg: #fff;
+$modal-backdrop-bg: #999;
 $modal-backdrop-opacity: .25;
 $modal-content-border-radius: 0;
 

package/src/components/button/Button.vue

@@ -1,11 +1,15 @@
 <template>
 
-  <button
-    @click="$emit('click', $event)"
+  <nuxt-link
+    @click.native="$emit('click', $event)"
     :disabled="disabled"
     class="itf-button btn"
     tabindex="0"
     type="button"
+    :tag="isLink ? 'a' : 'button'"
+    :href="href"
+    :to="to || {}"
+    :target="target"
     :class="{
       [`btn-${color}`]: color,
       'itf-button__block': block,
@@ -25,7 +29,7 @@
     <div class="itf-spinner" :class="{'itf-spinner__white': primary}" v-if="loading"></div>
     <div v-if="loading && loadingText">{{loadingText}}</div>
     <slot v-else></slot>
-  </button>
+  </nuxt-link>
 
 </template>
 <style lang="scss">
@@ -36,6 +40,9 @@
   display: inline-flex;
   align-items: center;
 
+  &.btn-primary {
+    color: #fff; // @todo remove when remove vuetify
+  }
   &.itf-button__block {
     display: block;
     width: 100%;
@@ -150,5 +157,12 @@ class itfButton extends Vue {
   @Prop(String) loadingText;
   @Prop(String) color;
   @Prop(Boolean) disabled;
+  @Prop({ type: [String, Object] }) to;
+  @Prop(String) href;
+  @Prop(String) target;
+
+  get isLink() {
+    return this.to || this.href;
+  }
 }
 </script>

package/src/components/checkbox/Checkbox.vue

@@ -1,9 +1,10 @@
 <template>
 
   <div class="itf-checkbox form-check" :class="{ 'form-switch': this.switch, 'itf-checkbox__large': large, 'itf-checkbox__medium': medium }">
-    <input class="form-check-input" :id="id" slot="input" type="checkbox" name="checkbox" v-model="isChecked" :disabled="isDisabled" />
+    <input class="form-check-input" :id="id" type="checkbox" name="checkbox" v-model="isChecked" :disabled="isDisabled" />
     <label :for="id" slot="label" class="form-check-label">
       {{label}}
+      <slot name="icon"></slot>
     </label>
   </div>
 
@@ -15,7 +16,7 @@
   .form-check-input, .form-check-label {
     cursor: pointer;
   }
-  &__large {
+  &__large.form-check {
     padding-left: $form-check-padding-start * 2;
     min-height: 2.5rem;
 
@@ -39,7 +40,7 @@
       }
     }
   }
-  &__medium {
+  &__medium.form-check {
     padding-left: $form-check-padding-start * 1.5;
     min-height: 2rem;
 

package/src/components/checkbox/Radio.vue

@@ -0,0 +1,89 @@
+<template>
+
+  <div class="itf-radio form-check" :class="{ 'itf-radio__large': large, 'itf-radio__medium': medium }">
+    <input class="form-check-input" :id="id" type="radio" :name="name" v-model="isChecked" :disabled="disabled" />
+    <label :for="id" slot="label" class="form-check-label">
+      {{label}}
+      <slot name="icon"></slot>
+    </label>
+  </div>
+
+</template>
+<style lang="scss">
+@import '../../assets/scss/variables';
+
+.itf-radio {
+  .form-check-input, .form-check-label {
+    cursor: pointer;
+  }
+  &__large.form-check {
+    padding-left: $form-check-padding-start * 2;
+    min-height: 2.5rem;
+
+    .form-check-label {
+      padding-top: 0.25rem;
+    }
+    .form-check-input {
+      margin-top: 0;
+      width: $form-check-input-width * 2;
+      height: $form-check-input-width * 2;
+      margin-left: -$form-check-padding-start * 2;
+    }
+  }
+  &__medium.form-check {
+    padding-left: $form-check-padding-start * 1.5;
+    min-height: 2rem;
+
+    .form-check-input {
+      margin-top: 0;
+      width: $form-check-input-width * 1.5;
+      height: $form-check-input-width * 1.5;
+      margin-left: -$form-check-padding-start * 1.5;
+    }
+  }
+}
+</style>
+<script>
+import { Vue, Component, Prop, Model, Inject } from 'vue-property-decorator';
+
+let globalRadioId = 0;
+
+export default @Component({
+  name: 'itfCheckbox',
+  components: {
+  }
+})
+class itfCheckbox extends Vue {
+  @Inject({ default: null }) checkboxGroup;
+
+  @Model('input') checked;
+  @Prop(String) label;
+  @Prop() value;
+  @Prop({ type: String, required: true }) name;
+
+  @Prop(Boolean) disabled;
+  @Prop(Boolean) medium;
+  @Prop(Boolean) large;
+
+  id = '';
+
+  created() {
+    globalRadioId += 1;
+    this.id = `radio${globalRadioId}`;
+  }
+
+  set isChecked(val) {
+    this.$emit('input', this.value);
+  }
+
+  get isChecked() {
+    if (this.itemKey) {
+      if (!this.checked || !this.value) {
+        return false;
+      }
+      return this.checked[this.itemKey] === this.value[this.itemKey];
+    }
+    return this.checked === this.value;
+  }
+}
+</script>

package/src/components/datepicker/DatePicker.vue

@@ -42,6 +42,11 @@
 @import '../../assets/scss/input-addon';
 
 .itf-datepicker {
+  .addon-end {
+    pointer-events: all;
+    padding-right: 0.25rem;
+  }
+
   &__dropdown {
     width: max-content;
     border: $input-border-width solid $input-border-color;

package/src/components/datepicker/DateRangePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-daterange-picker" :class="{'with-addon addon-start': prependIcon}">
+  <div class="itf-daterange-picker" :class="{ 'with-addon addon-start': prependIcon, 'with-addon addon-end': clearable }">
     <div class="addon" v-if="prependIcon">
       <slot name="addon">
         <itf-icon :name="prependIcon" />
@@ -40,7 +40,6 @@
         :parse="parse"
         :unmask="false"
         :lazy="!focused"
-        :placeholder="placeholder"
       />
     </div>
     <div style="display: none">
@@ -55,6 +54,18 @@
         ></itf-date-range-picker-inline>
       </div>
     </div>
+
+    <div class="addon-end" v-if="clearable && value && value[0]">
+      <slot name="clear">
+        <itf-button
+          icon
+          small
+          @click="$emit('input', '')"
+        >
+          <itf-icon name="close" />
+        </itf-button>
+      </slot>
+    </div>
   </div>
 </template>
 <style lang="scss">
@@ -66,6 +77,10 @@
     visibility: hidden;
   }
 
+  .addon-end {
+    pointer-events: all;
+    padding-right: 0.25rem;
+  }
   &__dropdown {
     width: max-content;
     overflow: hidden;
@@ -116,6 +131,7 @@ import { IMask, IMaskComponent } from 'vue-imask';
 import { DateTime } from 'luxon';
 import tippy from 'tippy.js';
 import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
 import itfDateRangePickerInline from './DateRangePickerInline.vue';
 import ITFSettings from '../../ITFSettings';
 
@@ -123,6 +139,7 @@ export default @Component({
   name: 'itfDateRangePicker',
   components: {
     itfIcon,
+    itfButton,
     itfDateRangePickerInline,
     IMaskComponent,
   },
@@ -136,6 +153,7 @@ class itfDateRangePicker extends Vue {
   @Prop({ type: String, default: ITFSettings.defaultDisplayDateFormat }) displayFormat;
   @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
   @Prop({ type: Boolean, default: false }) onlyCalendar;
+  @Prop({ type: Boolean, default: false }) clearable;
   @Prop({ type: String, default: '' }) placeholder;
   @Prop({ type: String, default: '' }) prependIcon;
 
@@ -187,7 +205,7 @@ class itfDateRangePicker extends Vue {
   }
 
   get valueAsLuxon() {
-    if (!this.value || this.value.length < 2) {
+    if (!this.value || this.value.length < 2 || !this.value[0] || !this.value[1]) {
       return null;
     }
     if (this.valueFormat === 'ISO') {

package/src/components/datepicker/DateRangePickerInline.vue

@@ -147,7 +147,7 @@ class itfDatePickerInline extends Vue {
   }
 
   get valueAsLuxon() {
-    if (!this.value || this.value.length < 2) {
+    if (!this.value || this.value.length < 2 || !this.value[0] || !this.value[1]) {
       return null;
     }
     if (this.valueFormat === 'ISO') {

package/src/components/form/Form.vue

@@ -90,7 +90,8 @@ class itfForm extends Vue {
   }
 
   doValidation(showError = true) {
-    const isValid = !this.components.filter(component => component.doValidation && !component.doValidation(true)).length;
+    // @todo remove validate when migrate from vuetify
+    const isValid = !this.components.filter(component => (component.doValidation && !component.doValidation(true)) || (component.validate && !component.validate(true))).length;
     if (showError && !isValid && this.$showError) {
       this.$showError('Please fix the errors below to proceed.', { duration: 3000 });
     }

package/src/components/modal/Modal.vue

@@ -13,10 +13,8 @@
         <div class="modal-body">
           <slot></slot>
         </div>
-        <div class="modal-footer">
-          <slot name="footer">
-            <itf-button primary data-bs-dismiss="modal">Close</itf-button>
-          </slot>
+        <div class="modal-footer" v-if="$slots.footer">
+          <slot name="footer"></slot>
         </div>
       </div>
     </div>
@@ -36,9 +34,9 @@
   }
 }
 .modal-open .itf-app {
-  -webkit-filter: blur(5px);
-  -moz-filter: blur(5px);
-  filter: blur(5px);
+  -webkit-filter: blur(5px) grayscale(1);
+  -moz-filter: blur(5px) grayscale(1);
+  filter: blur(5px) grayscale(1);
 }
 </style>
 <script>
@@ -98,14 +96,18 @@ class itfModal extends Vue {
         modalStack[modalStack.length - 1].unbindEvents();
         modalStack[modalStack.length - 1].hide(true);
       }
-      this.modalEl.show();
-      modalStack.push(this);
+      setTimeout(() => {
+        this.modalEl.show();
+        modalStack.push(this);
+      }, 500);
     } else {
       this.modalEl.hide();
       modalStack.pop();
       if (modalStack.length > 0) {
-        modalStack[modalStack.length - 1].show();
-        modalStack[modalStack.length - 1].bindEvents();
+        setTimeout(() => {
+          modalStack[modalStack.length - 1].show();
+          modalStack[modalStack.length - 1].bindEvents();
+        }, 500);
       }
     }
   }
@@ -158,5 +160,12 @@ class itfModal extends Vue {
       this.value = false;
     }
   }
+
+  scrollModalTop() {
+    const scrollEl = this.$el.closest('.itf-modal');
+    if (scrollEl) {
+      scrollEl.scrollTop = 0;
+    }
+  }
 }
 </script>

package/src/components/popover/Popover.vue

@@ -47,7 +47,7 @@
 }
 </style>
 <script>
-import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch, PropSync, Inject } from 'vue-property-decorator';
 
 let globalModalIndex = 0; // base modal z-index
 
@@ -57,6 +57,8 @@ export default @Component({
   },
 })
 class itfPopover extends Vue {
+  @Inject({ default: null }) appendContext;
+
   @PropSync('visible') value;
   @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
   @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
@@ -92,8 +94,11 @@ class itfPopover extends Vue {
     }
     const el = this.$refs.popover;
     const { default: Popover } = await import('bootstrap/js/src/popover.js');
+
+    const elContext = (this.appendContext && this.appendContext()) || document.body;
     this.modalEl = new Popover(this.$el, {
-      content: el,container: 'body',
+      content: el,
+      container: elContext,
       sanitize: false,
       html: true,
       customClass: this.customClass,

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

@@ -14,6 +14,8 @@
       class="itf-text-field__input form-control"
       type="text"
       :value="value"
+      :disabled="disabled"
+      :readonly="readonly"
       @input="onInput($event.target.value)"
     />
 
@@ -65,6 +67,8 @@ class itfTextField extends Vue {
   @Prop(String) prependIcon;
   @Prop(String) placeholder;
   @Prop(Boolean) clearable;
+  @Prop(Boolean) disabled;
+  @Prop(Boolean) readonly;
   @Prop({ type: [Number, String], default: 0 }) delayInput;
 
   onInput = null;

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

@@ -9,6 +9,8 @@
     <div v-if="autogrow" class="itf-textarea__autogrow-text form-control">{{value}}&nbsp;</div>
     <textarea
       :rows="rows"
+      :readonly="readonly"
+      :disabled="disabled"
       :placeholder="placeholder"
       :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
       class="itf-textarea__input form-control"
@@ -65,6 +67,8 @@ class itfTextarea extends Vue {
   @Prop(String) prependIcon;
   @Prop(String) placeholder;
   @Prop(Boolean) autogrow;
+  @Prop(Boolean) disabled;
+  @Prop(Boolean) readonly;
   @Prop({ type: [Number, String], default: 0 }) delayInput;
   @Prop({ type: [Number, String] }) rows;
 

package/src/helpers/validators.js

@@ -8,7 +8,7 @@ const LINKED_IN_REGEXP = /(http(s)?:\/\/)?([\w]+\.)?linkedin\.com\/(pub|in|profi
 const SPECIAL_CHARS_REGEXP = /^[\w_\-+~,/\\:'"().&*|[\]?# ]+$/i;
 const GREETINGS_REGEXP = /\b(dr|mr|mister|mrs|ms|miss|sir|hello|hi)\b/i;
 const PHONE_REGEXP = /(\+?\(?\+?[0-9]{1,3}\)?[-. ]+([0-9]{2,4})[-. ]?([0-9]{3,5}))|\+?[0-9]{7,}/gi;
-const DOUBLE_REGEXP = /^\d{0,11}(\.\d{0,2}){0,1}$/;
+const DOUBLE_REGEXP = /^-?\d{0,11}(\.\d{0,2}){0,1}$/;
 const EMAIL_REGEXP = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;
 const EMAIL_LIST_REGEXP = /^(\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]{2,4}\s*?,?\s*?)+$/g;
 const HEX_REGEXP = /[0-9A-Fa-f]{6}/;