@itfin/components 1.0.18 → 1.0.22

package/src/components/datepicker/index.stories.js

@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/vue';
 import itfDatePicker from './DatePicker.vue';
+import itfMonthPicker from './MonthPicker.vue';
 import itfDatePickerInline from './DatePickerInline.vue';
 import itfDateRangePicker from './DateRangePicker.vue';
 import itfDateRangePickerInline from './DateRangePickerInline.vue';
@@ -10,6 +11,7 @@ storiesOf('Common', module)
     components: {
       itfApp,
       itfDatePicker,
+      itfMonthPicker,
       itfDateRangePicker,
       itfDatePickerInline,
       itfDateRangePickerInline
@@ -67,6 +69,9 @@ storiesOf('Common', module)
 
         <itf-date-range-picker-inline v-model="dateRange"></itf-date-range-picker-inline>
 
+        <h2>Month</h2>
+
+        <itf-month-picker :value="date" v-model.lazy="date"></itf-month-picker>
       </itf-app>
     </div>`,
   }));

package/src/components/icon/Icon.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <component :style="style" class="itf-icon" :is="iconComponent"></component>
+  <component @click="$emit('click')" :style="style" class="itf-icon" :is="iconComponent"></component>
 
 </template>
 <style lang="scss" scoped>

package/src/components/modal/Modal.vue

@@ -36,7 +36,7 @@
 }
 </style>
 <script>
-import { Vue, Component, Prop, Watch, PropSync, Provide } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch, PropSync, Inject } from 'vue-property-decorator';
 import itfButton from '../button/Button';
 
 let globalModalIndex = 0; // base modal z-index
@@ -52,6 +52,8 @@ export default @Component({
   }
 })
 class itfModal extends Vue {
+  @Inject({ default: null }) globalApp;
+
   @PropSync('visible') value;
   @Prop({ type: String }) title;
   @Prop({ type: String, default: '', validator: (value) => ['', 'sm', 'lg', 'xl'].includes(value) }) size;
@@ -105,7 +107,9 @@ class itfModal extends Vue {
     }
     if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
-      document.body.appendChild(this.$el);
+      const elContext = (this.globalApp && this.globalApp.$el) || document.body;
+      console.info(elContext);
+      elContext.appendChild(this.$el);
     }
     const { default: Modal } = await import('bootstrap/js/src/modal.js');
     this.modalEl = new Modal(this.$el);

package/src/components/popover/Popover.vue

@@ -60,7 +60,7 @@ class itfPopover extends Vue {
   @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;
-  @Prop({ type: String }) customClass;
+  @Prop({ type: String, default: '' }) customClass;
 
   modalId = '';
   modalEl = null;

package/src/components/select/Select.vue

@@ -40,7 +40,7 @@
               :aria-label="`Deselect ${getOptionLabel(option)}`"
               @click="deselect(option)"
             >
-              <deselect />
+              <itf-icon name="close" />
             </itf-button>
           </span>
         </slot>
@@ -66,22 +66,23 @@
           aria-label="Clear Selected"
           @click="clearSelection"
         >
-          <deselect />
+          <itf-icon name="close" />
         </itf-button>
 
         <slot name="open-indicator" v-bind="scope.openIndicator">
           <itf-button
+            tabindex="-1"
             small
             icon
             v-if="!noDrop && !mutableLoading && !disabled"
             v-bind="scope.openIndicator.attributes"
           >
-            <open-indicator />
+            <itf-icon name="chevron_down" />
           </itf-button>
         </slot>
 
         <slot name="spinner" v-bind="scope.spinner">
-          <div v-show="mutableLoading" class="itf-spinner">Loading...</div>
+          <div v-show="mutableLoading" class="itf-spinner itf-select__loader">Loading...</div>
         </slot>
       </div>
     </div>
@@ -178,7 +179,8 @@
     }
   }
   &.vs--multiple .form-control {
-    padding-top: 1px;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
   }
   &.vs--open .form-control {
     box-shadow: 0 0 0 0.125rem $input-focus-border;
@@ -193,9 +195,7 @@
   }
   .dropdown-menu {
     background-color: $body-bg;
-    border-left: 2px solid $input-focus-border;
-    border-right: 2px solid $input-focus-border;
-    border-bottom: 2px solid $input-focus-border;
+    border: 2px solid $input-focus-border;
     padding-left: 0.125rem;
     padding-right: 0.125rem;
     left: -2px;
@@ -204,9 +204,7 @@
 
     @media (prefers-color-scheme: notdark) {
       background-color: $dark-body-bg;
-      border-left-color: $dark-input-focus-border;
-      border-right-color: $dark-input-focus-border;
-      border-bottom-color: $dark-input-focus-border;
+      border-color: $dark-input-focus-border;
     }
 
     .dropdown-item {
@@ -226,8 +224,7 @@
 import pointerScroll from '../../mixins/pointerScroll';
 import typeAheadPointer from '../../mixins/typeAheadPointer';
 import ajax from '../../mixins/ajax';
-import Deselect from './Deselect';
-import OpenIndicator from './OpenIndicator';
+import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
 import appendToBody from '../../directives/appendToBody';
 import sortAndStringify from '../../helpers/sortAndStringify';
@@ -237,9 +234,8 @@ import uniqueId from '../../helpers/uniqueId';
  */
 export default {
   components: {
-    Deselect,
-    OpenIndicator,
     itfButton,
+    itfIcon
   },
   directives: { appendToBody },
   mixins: [pointerScroll, typeAheadPointer, ajax],
@@ -585,6 +581,14 @@ export default {
         return clearSearchOnSelect && !multiple
       },
     },
+    /**
+     * Disable the dropdown entirely.
+     * @type {Boolean}
+     */
+    opened: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Disable the dropdown entirely.
      * @type {Boolean}
@@ -866,7 +870,7 @@ export default {
      * @return {Boolean} True if open
      */
     dropdownOpen() {
-      return this.dropdownShouldOpen(this)
+      return this.opened || this.dropdownShouldOpen(this);
     },
     /**
      * Return the placeholder string if it's set

package/src/components/select/index.stories.js

@@ -32,7 +32,8 @@ storiesOf('Common', module)
         countries: [
           {code: 'CA', country: 'Canada'},
           {code: 'US', country: 'United states'},
-          {code: 'UA', country: 'Ukraine'}
+          {code: 'UA', country: 'Ukraine'},
+          {code: 'TEST', country: 'ASdasd sdas dasd sad sadas da ad asdsad ad d ada dsadsadsadasd sadsa das dasd asdasd asdas da '}
         ]
       }
     },
@@ -75,6 +76,12 @@ storiesOf('Common', module)
                   :reduce="country => country.code"
                   v-model="selected" label="country" :options="countries"></itf-select>
 
+                <itf-select
+                  loading
+                  placeholder="Country"
+                  :reduce="country => country.code"
+                  v-model="selected" label="country" :options="countries"></itf-select>
+
               </itf-label>
             </div>
             <div class="col-6">

package/src/components/table/Table.vue

@@ -44,14 +44,13 @@
             </div>
           </div>
         </div>
-<!--        <v-progress-linear v-if="loading" :height="3" class="com-table-loading" indeterminate />-->
       </div>
       <div v-show="rows && rows.length" class="itf-table__rows" ref="scrollContainer2">
         <div class="itf-table__row"
              :class="{'itf-table__summary-row': row.summary}"
              v-for="(row, r) in rows"
              :key="r"
-             @click="$emit('row-click', { row, index: r })">
+             @click="!row.summary && $emit('row-click', { row, index: r })">
           <div
             class="itf-table__cell"
             :class="{'itf-table__cell--sorted': sortedColumns[k]}"
@@ -137,7 +136,10 @@ html {
 
     & > .itf-table__row {
       display: contents;
-      cursor: var(--itf-table-row-cursor);
+
+      &:not(.itf-table__summary-row) {
+        cursor: var(--itf-table-row-cursor);
+      }
     }
   }
 
@@ -145,9 +147,13 @@ html {
     background-color: var(--itf-table-strip-color);
   }
 
+  &__cell.itf-table__cell--sorted {
+    background-color: var(--itf-table-sorted-color);
+  }
   &--hoverable &__rows{
-    & > .itf-table__row {
-      &:hover > div{
+    & > .itf-table__row:not(.itf-table__summary-row) {
+      &:hover > .itf-table__cell,
+      &:hover > .itf-table__cell--sorted {
         background-color: var(--itf-table-hover-color);
       }
     }
@@ -171,9 +177,6 @@ html {
     }
   }
 
-  &__cell.itf-table__cell--sorted {
-    background-color: var(--itf-table-sorted-color) !important;
-  }
   &__header {
     background-color: var(--itf-table-background-color);
     grid-row: header;
@@ -422,7 +425,7 @@ class itfTable extends Vue {
     function initSyncScroll(el1, el2, stuck, unstuck) {
       function isScrolledEnd(el) {
         return el.scrollWidth === el.getBoundingClientRect().width // якщо контейнер менший ширини екрану
-            || el.scrollLeft === el.scrollWidth - el.getBoundingClientRect().width; // якщо контейнер більший ширини екрану
+          || el.scrollLeft === el.scrollWidth - el.getBoundingClientRect().width; // якщо контейнер більший ширини екрану
       }
 
       function func1() {

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

@@ -3,7 +3,7 @@
   <div class="itf-text-field input-group with-addon addon-start">
     <div class="addon" v-if="prependIcon">
       <slot name="addon">
-        <itf-icon :name="prependIcon" />
+        <itf-icon :name="prependIcon"/>
       </slot>
     </div>
 
@@ -13,7 +13,7 @@
       class="itf-text-field__input form-control"
       type="text"
       :value="value"
-      @input="$emit('input', $event.target.value)"
+      @input="onInput($event.target.value)"
     />
 
   </div>
@@ -33,6 +33,7 @@
 <script>
 import { Vue, Component, Model, Inject, Prop } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';
+import { debounce } from '../../helpers/debounce';
 
 export default @Component({
   name: 'itfTextField',
@@ -45,6 +46,13 @@ class itfTextField extends Vue {
   @Model('input') value;
   @Prop(String) prependIcon;
   @Prop(String) placeholder;
+  @Prop({ type: [Number, String], default: 0 }) delayInput;
+
+  onInput = null;
+
+  created() {
+    this.onInput = debounce((val) => this.$emit('input', val), Number(this.delayInput));
+  }
 
   isInvalid() {
     return this.itemLabel && this.itemLabel.isHasError();

package/src/components/tooltip/Tooltip.vue

@@ -0,0 +1,39 @@
+<template>
+  <span>
+    <slot name="activator"></slot>
+    <div style="display: none"><div ref="tooltip"><slot></slot></div></div>
+  </span>
+</template>
+<script>
+import { Vue, Component, Model, Inject, Prop } from 'vue-property-decorator';
+import tippy from 'tippy.js';
+import '../../assets/scss/directives/tooltip.scss';
+
+export default @Component({
+  name: 'itfTooltip',
+  components: {
+  }
+})
+class itfTooltip extends Vue {
+  @Prop({ type: String, default: 'bottom', validator: (value) => [
+      'bottom-start', 'bottom-end', 'bottom',
+      'left', 'right',
+      'top-start', 'top-end', 'top'
+    ].includes(value) }) placement;
+
+  mounted() {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    this.tooltip = tippy(this.$el, {
+      content: this.$refs.tooltip,
+      allowHTML: true,
+      theme: 'itfin',
+      interactive: true,
+      delay: 500,
+      placement: this.placement,
+      appendTo: document.body,
+    });
+  }
+}
+</script>

package/src/components/tooltip/index.stories.js

@@ -0,0 +1,52 @@
+import { storiesOf } from '@storybook/vue';
+import itfApp from '../app/App.vue';
+import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+import itfTooltip from './Tooltip.vue';
+import tooltip from '../../directives/tooltip';
+
+storiesOf('Common', module)
+  .add('Tooltip', () => ({
+    components: {
+      itfApp,
+      itfIcon,
+      itfTooltip,
+      itfButton
+    },
+    directives: {
+      tooltip
+    },
+    data() {
+      return {
+        tooltip: 'Test tooltip'
+      }
+    },
+    template: `<div>
+      <p>You need wrap whole application with this tag</p>
+
+      <h2>Usage</h2>
+
+      <pre>
+          &lt;button v-tooltip="'Test tooltip'">Test&lt;/button>
+          &lt;button v-tooltip.delay="'Test tooltip with delay'">Test&lt;/button>
+      </pre>
+
+      <h3>Example</h3>
+
+      <itf-app>
+
+        <button v-tooltip="tooltip">Tooltip test</button>
+
+        <button v-tooltip.delay="tooltip">Tooltip test with delay</button>
+
+        <itf-tooltip>
+          <template #activator="{ on }">
+            <a href="" v-on="on">Test</a>
+          </template>
+
+          <span>Test</span>
+        </itf-tooltip>
+
+      </itf-app>
+    </div>`,
+  }));

package/src/components/tree/index.stories.js

@@ -16,10 +16,10 @@ storiesOf('Tree', module)
       return {
         selected: null,
         items: [
-          { Name: 'The Company', Id: null, Count: 69, Responsible: { FirstName: 'Anatolii', LastName: 'Maslov' } },
-          { Name: 'Delivery', Id: 1, ParentId: null, Count: 50, Type: 'Dep' },
-          { Name: 'Marketing', Id: 2, ParentId: null, Count: 1, Type: 'Dep' },
-          { Name: 'Sales', Id: 3, ParentId: null, Count: 4, Type: 'Dep' },
+          { Name: 'CEO', Id: null, Count: 69, Responsible: { FirstName: 'Anatolii', LastName: 'Maslov' } },
+          { Name: 'Delivery', Id: 1, ParentId: null, Count: 50, Type: 'Dep', Responsible: { FirstName: 'Andrii', LastName: 'Olek' } },
+          { Name: 'Marketing', Id: 2, ParentId: null, Count: 1, Type: 'Dep', Responsible: { FirstName: 'Emil', LastName: 'Tro' } },
+          { Name: 'Sales', Id: 3, ParentId: null, Count: 4, Type: 'Dep', Responsible: { FirstName: 'Yurii', LastName: 'Ko' } },
           { Name: 'Salesman', Id: 4, ParentId: 3, Count: 2, Type: 'Team' },
           { Name: 'Searchers', Id: 5, ParentId: 3, Count: 2, Type: 'Team' },
           { Name: 'PMO', Id: 6, ParentId: 1, Count: 69, Type: 'Dep' },
@@ -47,8 +47,12 @@ storiesOf('Tree', module)
           <div class="col-3">
             <itf-tree-view :items="items" v-model="selected">
               <template #item="{ item }">
-                <h6 class="mb-0">{{item.Name}}</h6>
-                <p class="mb-0 opacity-75" v-if="item.Responsible">
+                <h6 class="mb-0">
+                  <span>
+                  {{item.Name}}
+                    </span>
+                </h6>
+                <p v-if="item.Responsible" class="mb-0 opacity-75">
                   <small>
                     {{item.Responsible.FirstName}}
                     {{item.Responsible.LastName}}