@itfin/components 1.0.17 → 1.0.21

package/src/components/modal/Modal.vue

@@ -30,9 +30,9 @@
 @import '~bootstrap/scss/transitions';
 
 .modal-open .itf-app {
-  -webkit-filter: blur(3px);
-  -moz-filter: blur(3px);
-  filter: blur(3px);
+  -webkit-filter: blur(5px);
+  -moz-filter: blur(5px);
+  filter: blur(5px);
 }
 </style>
 <script>

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,17 +66,18 @@
           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>
 
@@ -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/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/TreeView.vue

@@ -0,0 +1,82 @@
+<template>
+
+  <div class="itf-tree-view d-grid">
+    <itf-button
+      @click="onSelect(node)"
+      v-for="({ node, depth }, n) of list"
+      :key="n"
+      :class="{ [`depth-${depth}`]: true, 'active': value === node[itemKey] }"
+      class="align-items-center d-flex gap-2 py-2" aria-current="true">
+      <slot name="prepend" :item="node"></slot>
+      <div class="d-flex align-items-start gap-2 w-100 justify-content-between">
+        <div>
+          <slot name="item" :item="node"></slot>
+        </div>
+        <slot name="append" :item="node"></slot>
+      </div>
+    </itf-button>
+  </div>
+
+</template>
+<style lang="scss">
+@import '../../assets/scss/variables';
+@import '~bootstrap/scss/list-group';
+
+.itf-tree-view {
+  .itf-button {
+    &.depth-0 {
+      padding-left: $spacer;
+    }
+
+    &.depth-1 {
+      padding-left: $spacer * 2;
+    }
+
+    &.depth-2 {
+      padding-left: $spacer * 3;
+    }
+  }
+}
+</style>
+<script>
+import { Vue, Component, Model, Inject, Prop } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+
+export default @Component({
+  name: 'itfTreeView',
+  components: {
+    itfIcon,
+    itfButton
+  }
+})
+class itfTreeView extends Vue {
+  @Inject({ default: null }) itemLabel;
+  @Model('input') value;
+  @Prop(Array) items;
+  @Prop({ type: String, default: 'Id' }) itemKey;
+  @Prop({ type: String, default: 'ParentId' }) itemParentKey;
+
+  onSelect(item) {
+    this.$emit('input', item[this.itemKey]);
+  }
+
+  get list() {
+    if (!this.items || !this.items.length) {
+      return [];
+    }
+    const root = this.items.find((item) => item[this.itemKey] === null);
+    if (!root) {
+      throw new Error('Root not found');
+    }
+    function fillListWithNodes(items, node, itemKey, parentKey, depth = 0) {
+      const list = items
+        .filter((item) => item[parentKey] === node[itemKey])
+        // eslint-disable-next-line max-len
+        .reduce((acc, childNode) => acc.concat(fillListWithNodes(items, childNode, itemKey, parentKey, depth + 1)), []);
+      return [{ node, depth }, ...list];
+    }
+    return fillListWithNodes(this.items, root, this.itemKey, this.itemParentKey);
+  }
+}
+</script>

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

@@ -0,0 +1,86 @@
+import { storiesOf } from '@storybook/vue';
+import itfApp from '../app/App.vue';
+import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+import itfTreeView from './TreeView.vue';
+
+storiesOf('Tree', module)
+  .add('Tree View', () => ({
+    components: {
+      itfApp,
+      itfIcon,
+      itfTreeView,
+      itfButton
+    },
+    data() {
+      return {
+        selected: null,
+        items: [
+          { 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' },
+        ]
+      }
+    },
+    template: `<div>
+      <p>You need wrap whole application with this tag</p>
+
+      <h2>Usage</h2>
+
+<pre>
+  &lt;itf-table
+    :columns="columns"
+    :rows="list"
+  >
+    &lt;template #column.Employee="&#123; item }">&lt;/template>
+  &lt;/itf-table>
+</pre>
+
+      <h3>Example</h3>
+
+      <itf-app>
+        <div class="row">
+          <div class="col-3">
+            <itf-tree-view :items="items" v-model="selected">
+              <template #item="{ item }">
+                <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}}
+                  </small>
+                </p>
+              </template>
+              <template #prepend="{ item }">
+                <itf-icon v-if="!item.Id" name="globe" size="24" class="flex-shrink-0" />
+                <itf-icon v-else-if="item.Type === 'Dep'" name="folder_closed" size="24" class="flex-shrink-0" />
+                <itf-icon v-else-if="item.Type === 'Team'" name="users" size="24" class="flex-shrink-0" />
+              </template>
+              <template #append="{ item }">
+                <small class="opacity-50 text-nowrap">
+                  <itf-icon name="user_male" /> {{item.Count}}
+                </small>
+              </template>
+            </itf-tree-view>
+          </div>
+          <div class="col-9">
+
+            <h1 class="align-items-center d-flex">
+              <itf-icon class="me-2" name="globe" size="36" />
+              The Company
+            </h1>
+
+            {{selected}}
+          </div>
+        </div>
+      </itf-app>
+    </div>`,
+  }));

package/src/index.stories.js

@@ -63,31 +63,6 @@ storiesOf('Common', module)
     </itf-app>
     </div>`,
   }))
-  .add('Tooltip', () => ({
-    directives: {
-      tooltip,
-    },
-    components: { itfApp },
-    data() {
-      return { date: '2021-01-16', tooltip: 'This button run payroll calculation <br/><a href="/" target="_blank">Read more</a>' }
-    },
-    template: `<div>
-      <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>
-
-      <h2>Example</h2>
-
-      <button v-tooltip="tooltip">Tooltip test</button>
-
-      <button v-tooltip.delay="tooltip">Tooltip test with delay</button>
-
-    </div>`,
-  }))
   .add('Inline loader', () => ({
     directives: {
       loading,

package/src/assets/loading.css

@@ -1,49 +0,0 @@
-:root {
-  --loader-color: #1967d2; }
-
-.com-loading-wrapper {
-  pisition: relative; }
-  .com-loading-wrapper .com-loading {
-    position: absolute;
-    background-color: rgba(255, 255, 255, 0.4);
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 10;
-    color: var(--loader-color); }
-    .com-loading-wrapper .com-loading-message {
-      text-align: center;
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      margin-top: -16px;
-      margin-left: -16px; }
-    .com-loading-wrapper .com-loading-icon {
-      -webkit-animation: spinner 2s linear 0s infinite;
-      animation: spinner 2s linear 0s infinite;
-      width: 32px;
-      height: 32px;
-      display: inline-block; }
-      .com-loading-wrapper .com-loading-icon > svg {
-        fill: currentColor;
-        object-fit: contain;
-        width: 100%;
-        height: 100%;
-        display: block; }
-
-@-webkit-keyframes spinner {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg); }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg); } }
-
-@keyframes spinner {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg); }
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg); } }

package/src/components/select/Deselect.vue

@@ -1,3 +0,0 @@
-<template>
-  <svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="m7.5 7.5 6 6"/><path d="m13.5 7.5-6 6"/></g></svg>
-</template>

package/src/components/select/OpenIndicator.vue

@@ -1,3 +0,0 @@
-<template>
-  <svg height="21" viewBox="0 0 21 21" width="21" xmlns="http://www.w3.org/2000/svg"><path d="m8.5.5-4 4-4-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(6 8)"/></svg>
-</template>