@itfin/components 1.0.17 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.17",
+  "version": "1.0.21",
   "main": "dist/itfin-components.umd.js",
   "unpkg": "dist/itfin-components.common.js",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",

package/src/assets/scss/_variables.scss

@@ -24,18 +24,21 @@ $link-color: #0B314F;
 $input-btn-focus-width: .125rem;
 
 $input-bg: #f3f3f3;
-$input-border-color: #f3f3f3;
+$input-border-color: rgba(#000, .08);
 $input-border-radius: 10px;
 $input-font-family: 'Fira Mono', monospace;
 
-$input-focus-bg: #f9f6e8;
-$input-focus-border-color: #f9f6e8;
-
-$input-focus-box-shadow: none;
+$input-focus-bg: #fff;
+$input-focus-border-color: #fff;
 
 $form-label-margin-bottom: .1rem;
 $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%);
+$dropdown-link-hover-bg: tint-color($primary, 50%);
+$dropdown-link-active-bg: tint-color($primary, 70%);
+
 $modal-backdrop-bg: #fff;
 $modal-backdrop-opacity: .7;
 $modal-content-border-radius: 0;

package/src/assets/scss/components/_dropdown-menu.scss

@@ -12,19 +12,17 @@ $min-width: $vs-dropdown-min-width;
 $max-height: $vs-dropdown-max-height;
 
 .vs__dropdown-menu {
+  overflow-x: hidden;
+  overflow-y: auto;
   display: block;
   box-sizing: border-box;
   position: absolute;
-  top: calc(100% - #{$border-width}); // -{#$border-width} here ensures the left and right borders of the dropdown appear flush with the toggle.
+  top: calc(100% + #{$border-width * 2}); // -{#$border-width} here ensures the left and right borders of the dropdown appear flush with the toggle.
   left: 0;
   z-index: $z-index;
   width: 100%;
   max-height: $max-height;
   min-width: $min-width;
-  overflow-y: auto;
-  border-top-style: none;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
   text-align: left;
   list-style: none;
 }

package/src/assets/scss/components/_dropdown-toggle.scss

@@ -25,9 +25,17 @@ $border-radius: $vs-border-radius;
   flex-wrap: wrap;
   padding: 0 2px 0 0;
   position: relative;
+  flex-shrink: 1;
+  overflow: hidden;
+  min-height: 26px;
+
+  .vs--multiple & {
+    min-height: 32px;
+  }
 }
 
 .vs__actions {
+  flex-shrink: 0;
   display: flex;
   margin-right: -9px;
   align-items: center;
@@ -46,7 +54,4 @@ $border-radius: $vs-border-radius;
   cursor: pointer;
 }
 .vs--open .vs__dropdown-toggle {
-  border-bottom-color: transparent;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
 }

package/src/assets/scss/components/_selected.scss

@@ -17,6 +17,10 @@
   color: #222;
   background-color: #ccc;
 
+  &.badge {
+    padding: 0.1875rem 0.5rem;
+  }
+
   @media (prefers-color-scheme: notdark) {
     background-color: #221;
     color: $dark-body-color;
@@ -43,6 +47,17 @@
   .vs__selected {
     background-color: transparent;
     border-color: transparent;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .vs__search {
+    top: 0;
+    position: absolute;
+    right: 0;
+    left: 0;
+    width: 100% !important;
+    padding-left: 0 !important;
   }
   &.vs--open .vs__selected,
   &.vs--loading .vs__selected {

package/src/assets/scss/components/_spinner.scss

@@ -3,7 +3,8 @@
   opacity: 0;
   transform: translateZ(0);
   transition: opacity .1s;
-  right: 1rem;
+  right: 0.75rem;
+  position: absolute;
   mix-blend-mode: normal;
   width: 1rem;
   height: 1rem;

package/src/assets/scss/directives/loading.scss

@@ -35,8 +35,12 @@
 
 .itf-loading-wrapper {
   position: relative;
+  pointer-events: none;
+  user-select: none;
 
   .itf-loading {
+    cursor: progress;
+    pointer-events: all;
     position: absolute;
     background-color: rgba(255, 255, 255, .4);
     top: 0;
@@ -45,6 +49,7 @@
     bottom: 0;
     z-index: 10;
     color: var(--loader-color);
+    backdrop-filter: blur(5px);
 
     @media (prefers-color-scheme: notdark) {
       background-color: rgba($dark-body-bg, .75);

package/src/components/button/Button.vue

@@ -14,21 +14,15 @@
       'btn-secondary': secondary,
       'btn-sm': small,
       'btn-lg': large,
-      'px-3': small && !icon,
-      'px-5': large && !icon,
-      'px-4': !icon && !large && !small,
+      // 'px-3': small && !icon,
+      // 'px-5': large && !icon,
+      // 'px-4': !icon && !large && !small,
       'btn-icon': icon,
       'loading': loading
     }">
-    <div>
-      <div class="itf-spinner" :class="{'white': primary}" v-if="loading"></div>
-      <div v-if="loading && loadingText">{{loadingText}}</div>
-      <slot v-else></slot>
-    </div>
-
-    <a class="ui basic left pointing label" v-if="labeled">
-      <slot name="label"></slot>
-    </a>
+    <div class="itf-spinner" :class="{'white': primary}" v-if="loading"></div>
+    <div v-if="loading && loadingText">{{loadingText}}</div>
+    <slot v-else></slot>
   </button>
 
 </template>
@@ -41,6 +35,7 @@
     display: flex;
     pointer-events: none;
     align-items: center;
+    text-align: left;
   }
   .itf-spinner {
     mix-blend-mode: normal;
@@ -63,7 +58,7 @@
     }
   }
   &.btn-basic {
-    &:hover {
+    &:hover, &.active {
       background-color: rgba(9, 30, 66, 0.08);
 
       @media (prefers-color-scheme: notdark) {

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,114 @@
+<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" />
+    <label :for="id" slot="label" class="form-check-label">
+      {{label}}
+    </label>
+  </div>
+
+</template>
+<style lang="scss">
+@import '../../assets/scss/variables';
+
+.itf-checkbox {
+  .form-check-input, .form-check-label {
+    cursor: pointer;
+  }
+  &__large {
+    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;
+      border-radius: 0.75rem;
+    }
+    &.form-switch {
+      padding-left: $form-switch-padding-start * 2;
+
+      .form-check-input {
+        width: $form-switch-width * 2;
+        margin-left: -$form-switch-padding-start * 2;
+        border-radius: 100px;
+      }
+    }
+  }
+  &__medium {
+    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;
+      border-radius: 0.5rem;
+    }
+    &.form-switch {
+      padding-left: $form-switch-padding-start * 1.5;
+
+      .form-check-input {
+        width: $form-switch-width * 1.5;
+        margin-left: -$form-switch-padding-start * 1.5;
+        border-radius: 100px;
+      }
+    }
+  }
+}
+</style>
+<script>
+import { Vue, Component, Prop, Model, Inject } from 'vue-property-decorator';
+
+let globalCheckboxId = 0;
+
+export default @Component({
+  name: 'itfCheckbox',
+  components: {
+  }
+})
+class itfCheckbox extends Vue {
+  @Inject({ default: null }) checkboxGroup;
+
+  @Model('input') value;
+  @Prop(String) label;
+
+  @Prop(Boolean) switch;
+  @Prop(Boolean) disabled;
+  @Prop(Boolean) medium;
+  @Prop(Boolean) large;
+
+  id = '';
+
+  created() {
+    globalCheckboxId += 1;
+    this.id = `checkbox${globalCheckboxId}`;
+  }
+
+  get isDisabled() {
+    if (this.checkboxGroup) {
+      return this.disabled || this.checkboxGroup.isDisabled(this.value);
+    }
+    return this.disabled;
+  }
+
+  get isChecked() {
+    if (this.checkboxGroup) {
+      return this.checkboxGroup.isChecked(this.value);
+    }
+    return this.value;
+  }
+
+  set isChecked(val) {
+    if (this.checkboxGroup) {
+      this.checkboxGroup.onToggleOption(this.value, val);
+    }
+    this.$emit('input', val);
+  }
+}
+</script>

package/src/components/checkbox/CheckboxGroup.vue

@@ -0,0 +1,54 @@
+<template>
+
+  <div>
+    <slot />
+  </div>
+
+</template>
+<style>
+
+</style>
+<script>
+  import { Vue, Component, Prop, Model, Provide } from 'vue-property-decorator';
+
+  export default @Component({
+    name: 'itfCheckboxGroup'
+  })
+  class itfCheckboxGroup extends Vue {
+    @Provide() checkboxGroup = this;
+
+    @Model('input', { type: Array, default: () => [] }) value;
+
+    @Prop(Boolean) disabled;
+
+    @Prop(String) itemKey;
+
+    @Prop(Number) max;
+
+    onToggleOption(value, isChecked) {
+      const index = this.getCheckedIndex(value);
+      const arr = this.value ? [ ...this.value ] : [];
+      if (index !== -1 && isChecked === false) {
+        arr.splice(index, 1);
+      } else if (isChecked === true) {
+        arr.push(value);
+      }
+      this.$emit('input', arr);
+    }
+
+    getCheckedIndex(value) {
+      if (this.itemKey) {
+        return this.value && this.value.findIndex(item => item[this.itemKey] === value[this.itemKey]);
+      }
+      return this.value.indexOf(value);
+    }
+
+    isChecked(value) {
+      return this.getCheckedIndex(value) !== -1;
+    }
+
+    isDisabled(value) {
+      return this.getCheckedIndex(value) === -1 && (this.max !== 'undefined' && this.value.length >= this.max);
+    }
+  }
+</script>

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

@@ -0,0 +1,74 @@
+import { storiesOf } from '@storybook/vue';
+import itfCheckbox from './Checkbox';
+import itfCheckboxGroup from './CheckboxGroup';
+import itfForm from '../form/Form.vue';
+import itfLabel from '../form/Label.vue';
+import itfDatePicker from '../datepicker/DatePicker.vue';
+import itfDateRangePicker from '../datepicker/DateRangePicker.vue';
+import itfApp from '../app/App.vue';
+
+storiesOf('Common', module)
+  .add('Checkbox', () => ({
+    components: {
+      itfApp,
+      itfCheckbox,
+      itfCheckboxGroup,
+      itfForm,
+      itfLabel,
+      itfDatePicker,
+      itfDateRangePicker,
+    },
+    data() {
+      return {
+        test: false,
+        group: []
+      }
+    },
+    methods: {
+    },
+    template: `<div>
+      <p>You need wrap whole application with this tag</p>
+
+      <h2>Usage</h2>
+
+  <pre>
+
+    &lt;itf-datepicker>&lt;/itf-datepicker>
+
+    &lt;button @click="$showSuccess('Success')">Show success&lt;/button>
+    &lt;button @click="$showError('Error')">Show error&lt;/button>
+    &lt;button @click="$try(() => { throw new Error('Invalid function'); })">Try function with error&lt;/button>
+  </pre>
+
+      <h2>Example</h2>
+
+      <itf-form>
+      <itf-checkbox label="Test" v-model="test" />
+
+      <itf-checkbox switch label="Test" v-model="test" />
+        {{test}}
+
+        <itf-checkbox-group v-model="group">
+          <itf-checkbox label="Test1" value="1" />
+          <itf-checkbox label="Test2" value="2" />
+        </itf-checkbox-group>
+
+        {{group}}
+
+        <h3>Medium</h3>
+        <itf-checkbox medium label="Test" v-model="test" />
+
+        <itf-checkbox medium switch label="Test" v-model="test" />
+
+
+
+        <h3>Large</h3>
+        <itf-checkbox large label="Test" v-model="test" />
+
+        <itf-checkbox large switch label="Test" v-model="test" />
+
+
+
+      </itf-form>
+    </div>`,
+  }));

package/src/components/datepicker/DatePicker.vue

@@ -22,15 +22,17 @@
       :lazy="!focused"
       :placeholder="placeholder"
     />
-    <div ref="dropdown" class="itf-datepicker__dropdown">
-      <itf-date-picker-inline
-        :value="value"
-        :start-view="startView"
-        :only-calendar="onlyCalendar"
-        :display-format="displayFormat"
-        :value-format="valueFormat"
-        @input="selectInlineDate"
-      ></itf-date-picker-inline>
+    <div style="display: none">
+      <div ref="dropdown" class="itf-datepicker__dropdown">
+        <itf-date-picker-inline
+          :value="value"
+          :start-view="startView"
+          :only-calendar="onlyCalendar"
+          :display-format="displayFormat"
+          :value-format="valueFormat"
+          @input="selectInlineDate"
+        ></itf-date-picker-inline>
+      </div>
     </div>
   </div>
 </template>

package/src/components/datepicker/DateRangePicker.vue

@@ -43,15 +43,17 @@
         :placeholder="placeholder"
       />
     </div>
-    <div ref="dropdown" class="itf-datepicker__dropdown">
-      <itf-date-range-picker-inline
-        :value="value"
-        :start-view="startView"
-        :only-calendar="onlyCalendar"
-        :display-format="displayFormat"
-        :value-format="valueFormat"
-        @input="selectInlineDate"
-      ></itf-date-range-picker-inline>
+    <div style="display: none">
+      <div ref="dropdown" class="itf-daterange-picker__dropdown">
+        <itf-date-range-picker-inline
+          :value="value"
+          :start-view="startView"
+          :only-calendar="onlyCalendar"
+          :display-format="displayFormat"
+          :value-format="valueFormat"
+          @input="selectInlineDate"
+        ></itf-date-range-picker-inline>
+      </div>
     </div>
   </div>
 </template>

package/src/components/icon/Icon.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <component class="itf-icon" :is="iconComponent"></component>
+  <component @click="$emit('click')" :style="style" class="itf-icon" :is="iconComponent"></component>
 
 </template>
 <style lang="scss" scoped>
@@ -21,6 +21,17 @@ export default @Component({
 })
 class itfIcon extends Vue {
   @Prop({ type: String, validator: (value) => !!icons[value] }) name;
+  @Prop([Number, String]) size;
+
+  get style() {
+    if (this.size) {
+      return {
+        width: `${this.size}px`,
+        height: `${this.size}px`
+      };
+    }
+    return [];
+  }
 
   get iconComponent() {
     return icons[this.name];

package/src/components/icon/components/department.vue

@@ -0,0 +1,8 @@
+<template><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
+     viewBox="0 0 160 160" style="enable-background:new 0 0 160 160;" xml:space="preserve"><g><path d="M9,106.4V80.1c0-3.7,2.6-6.9,6.1-7.6l7.1-2l4.1-1.2c0.5-0.1,0.9-0.6,0.9-1.1v-4.8L27,63.2c-2.1-1.6-3.4-4.1-3.7-6.7   c-0.1-0.9-0.1-1.6-0.2-2h-0.8c-0.8,0-1.5-0.6-1.6-1.3L20,49c-0.2-1.2,0.8-2.3,2-2.3l0.2-7.7c0-4.7,3.9-8.6,8.7-8.6h5.6   c4.8,0,8.7,3.8,8.7,8.6l0.2,7.7c1.2,0,2.2,1.1,2,2.3l-0.6,4c-0.1,0.8-0.8,1.3-1.6,1.3h-0.8c-0.1,0.4-0.1,1.2-0.2,2   c-0.2,2.6-1.6,5.1-3.7,6.7l-0.3,0.2v4.8c0,0.6,0.4,1,0.9,1.1l3.2,0.9c1.8-1.1,3.7-2,5.8-2.4l0.1,0l-6.1-1.7v-0.9   c2.1-2.1,3.4-4.7,3.8-7.5c1.4-0.8,2.5-2.3,2.7-3.9l0.6-4c0.3-1.7-0.2-3.5-1.4-4.8c-0.2-0.2-0.4-0.5-0.6-0.6L49.3,39   c0-6.9-5.7-12.5-12.7-12.5h-5.6c-7,0-12.7,5.6-12.7,12.5l-0.1,5.2c-0.2,0.2-0.4,0.4-0.7,0.7c-1.1,1.3-1.6,3.1-1.4,4.8l0.6,4   c0.3,1.7,1.3,3.1,2.7,4c0.4,2.9,1.8,5.5,3.8,7.5V66l-2.1,0.6l-7,2C8.8,69.8,5,74.6,5,80.1v26.3v2.3l2,1.2l28.6,16.9v-4.6L9,106.4z"/><path
+        d="M145.8,68.7l-9.1-2.6v-0.9c2-2,3.4-4.7,3.8-7.5c1.4-0.8,2.4-2.2,2.7-4l0.6-4c0.3-1.7-0.2-3.5-1.4-4.8   c-0.2-0.2-0.4-0.5-0.6-0.7l-0.1-5.2c0-6.9-5.7-12.5-12.7-12.5h-5.6c-7,0-12.7,5.6-12.7,12.5l-0.1,5.2c-0.2,0.2-0.4,0.4-0.6,0.6   c-1.1,1.3-1.6,3.1-1.4,4.8l0.6,4c0.3,1.7,1.3,3.2,2.7,4c0.4,2.8,1.8,5.5,3.8,7.5v0.9l-2.1,0.6l-3.8,1.1l0,0   c2.1,0.5,4.1,1.3,5.9,2.5l3-0.9c0.5-0.1,0.9-0.6,0.9-1.1v-4.8l-0.3-0.2c-2.1-1.6-3.5-4.1-3.7-6.7c-0.1-0.9-0.2-1.7-0.2-2h-0.8   c-0.8,0-1.5-0.6-1.6-1.3l-0.6-4c-0.2-1.2,0.8-2.3,2-2.3l0.2-7.7c0-4.7,3.9-8.5,8.7-8.5h5.6c4.8,0,8.7,3.8,8.7,8.5l0.2,7.7   c1.2,0,2.2,1.1,2,2.3l-0.6,4c-0.1,0.8-0.8,1.3-1.6,1.3h-0.8c-0.1,0.4-0.1,1.2-0.2,2c-0.2,2.6-1.6,5.1-3.7,6.7l-0.3,0.2v4.8   c0,0.5,0.4,1,0.9,1.1l11.2,3.2c3.6,0.7,6.1,3.9,6.1,7.6v26.3l-26.5,15.6v4.6l28.5-16.8l2-1.2v-2.3V80.2   C155,74.7,151.2,69.9,145.8,68.7z"/><path
+        d="M67.4,30c2.8,0,5.2-1.5,6.5-4l0.1-0.2c2.5,2.6,6,4.1,9.7,4.1h10.9v-3.6l0-0.4H83.7c-3.4,0-6.6-1.9-8.2-4.8l-1.8-3.3   l-3.3,6.3c-0.6,1.1-1.7,1.8-3,1.8h-1.9L65.4,30V30H67.4z"/><path
+        d="M109.2,70.7l-15.3-4.4v-1.2v-2.6c3.4-3.1,5.5-7.3,5.9-11.9c2.1-0.8,3.6-2.7,4-5l1-6.1c0.3-2-0.3-4.1-1.6-5.6   c-0.4-0.5-0.9-0.9-1.4-1.3l-0.2-8.9c0-9.3-7.7-16.9-17.2-16.9h-8.5c-9.5,0-17.2,7.6-17.2,16.9l-0.2,8.9c-0.5,0.4-1,0.8-1.4,1.3   c-1.3,1.5-1.9,3.6-1.6,5.6l1,6.1c0.4,2.3,1.9,4.1,4,4.9c0.4,4.6,2.6,8.8,5.9,11.9v3.8l-4.7,1.3l-10.6,3c-7.2,1.5-12.3,8-12.3,15.4   v39.8v2.3l2,1.2l38,22.5l2.1,1.2l2-1.2l37-22.5l1.9-1.2v-2.3V86.1C121.5,78.7,116.3,72.3,109.2,70.7z M117.5,125.9l-37,22.5   l-38-22.5V86.1c0-5.6,3.9-10.4,9.3-11.5l10.8-3.1l6.2-1.8c0.8-0.2,1.4-0.9,1.4-1.7v-2.5l0.3,0.2c2.1,1.4,4.5,2.2,7,2.2h2v-4h-2   c-1.7,0-3.3-0.5-4.7-1.5l-2.6-1.8v0l-0.4-0.3c-3.2-2.5-5.2-6.2-5.6-10.2c-0.1-1.3-0.2-2.5-0.3-3.1h-1.3c-1.2,0-2.2-0.9-2.4-2   l-1-6.1c-0.3-1.8,1.1-3.5,3-3.5l0.3-11.7c0-7.2,5.9-13,13.2-13h8.5c7.3,0,13.2,5.8,13.2,13l0.3,11.7c1.9,0,3.3,1.6,3,3.5l-1,6.1   c-0.2,1.2-1.2,2-2.4,2h-1.3c-0.1,0.6-0.2,1.8-0.3,3.1c-0.3,4-2.4,7.7-5.6,10.2l-0.4,0.3v4.5v2.9v7.5h4v-5.1l14.3,4.1   c5.4,1.1,9.3,5.9,9.3,11.5V125.9z"/><path
+        d="M86.6,92.4l2.7-9.5c0.2-0.6,0-1.3-0.3-1.8c-0.4-0.5-1-0.8-1.6-0.8H74c-0.6,0-1.2,0.3-1.6,0.8s-0.5,1.1-0.3,1.8l2.7,9.5   L71.1,135c-0.1,0.7,0.2,1.3,0.7,1.7l7.4,6.1c0.4,0.3,0.8,0.5,1.3,0.5s0.9-0.2,1.3-0.5l7.4-6.1c0.5-0.4,0.8-1.1,0.7-1.7L86.6,92.4z    M84.7,84.4l-1.6,5.8h-4.7l-1.7-5.8H84.7z M80.6,138.7l-5.4-4.4l3.4-40.1h4.1l3.2,40.1L80.6,138.7z"/></g>
+</svg>
+</template>