@itfin/components 1.0.18 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.18",
+  "version": "1.0.22",
   "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,19 @@ $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%);
+
 $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

@@ -1,15 +1,16 @@
 /* Loading Spinner */
-.itf-select .itf-spinner {
+.itf-select .itf-select__loader {
   opacity: 0;
   transform: translateZ(0);
   transition: opacity .1s;
-  right: 1rem;
+  right: 0.75rem;
+  position: absolute;
   mix-blend-mode: normal;
   width: 1rem;
   height: 1rem;
 }
 
 /* Loading Spinner States */
-.vs--loading .itf-spinner {
+.vs--loading .itf-select__loader {
   opacity: 1;
 }

package/src/assets/scss/components/_states.scss

@@ -21,7 +21,6 @@ $disabled-cursor: $vs-state-disabled-cursor;
   .vs__open-indicator {
     cursor: $disabled-cursor;
     background-color: transparent;
-    border-color: transparent;
   }
 }
 

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

@@ -23,7 +23,7 @@
   animation: spinner 0.7s linear infinite;
   mix-blend-mode: difference;
 
-  &.white {
+  &.itf-spinner__white {
     border-color: rgba(158, 158, 158, 0.29);
     border-top-color: rgb(155, 155, 155);
   }

package/src/components/button/Button.vue

@@ -7,10 +7,11 @@
     tabindex="0"
     type="button"
     :class="{
+      [`btn-${color}`]: color,
       'labeled': labeled,
       'disabled': disabled || loading,
       'btn-primary': primary,
-      'btn-basic': !primary && !secondary,
+      'btn-basic': !primary && !secondary && !color,
       'btn-secondary': secondary,
       'btn-sm': small,
       'btn-lg': large,
@@ -20,7 +21,7 @@
       'btn-icon': icon,
       'loading': loading
     }">
-    <div class="itf-spinner" :class="{'white': primary}" v-if="loading"></div>
+    <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>
@@ -31,11 +32,11 @@
 @import '~bootstrap/scss/buttons';
 
 .itf-button {
+  display: inline-flex;
+  align-items: center;
+
   & > div {
-    display: flex;
     pointer-events: none;
-    align-items: center;
-    text-align: left;
   }
   .itf-spinner {
     mix-blend-mode: normal;
@@ -141,6 +142,7 @@ class itfButton extends Vue {
   @Prop(Boolean) large;
   @Prop(Boolean) icon;
   @Prop(String) loadingText;
+  @Prop(String) color;
   @Prop(Boolean) disabled;
 }
 </script>

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/DatePickerInline.vue

@@ -74,6 +74,7 @@ class itfDatePickerInline extends Vue {
   @Prop({ type: String, default: 'ISO' }) valueFormat;
   @Prop({ type: String, default: ITFSettings.defaultDisplayDateFormat }) displayFormat;
   @Prop({ type: String, default: 'days', validator: (value) => ['days', 'months', 'years'].includes(value) }) startView;
+  @Prop({ type: String, default: null, validator: (value) => ['days', 'months', 'years'].includes(value) }) minView;
   @Prop({ type: Boolean, default: false }) onlyCalendar;
   @Prop({ type: Boolean, default: false }) range;
   @Prop({ type: Object, default: () => ({}) }) customDays;
@@ -108,7 +109,8 @@ class itfDatePickerInline extends Vue {
       locale: localeEn,
       firstDay: 1,
       range: this.range,
-      view: this.valueAsLuxon ? 'days' : this.startView,
+      view: (this.valueAsLuxon && !this.minView) ? 'days' : this.startView,
+      minView: this.minView,
       selectedDates: this.valueAsLuxon ? [this.valueAsLuxon.toJSDate()] : [],
       onSelect: ({ date }) => {
         if (this.range && !this.calendar.rangeDateTo) {

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/datepicker/MonthPicker.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="itf-monthpicker" :class="{'with-addon addon-start': prependIcon}">
+    <div class="addon" v-if="prependIcon">
+      <slot name="addon">
+        <itf-icon :name="prependIcon" />
+      </slot>
+    </div>
+    <input
+      ref="input"
+      readonly
+      class="form-control"
+      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
+      @focus="onFocus"
+      @blur="onBlur"
+      :value="displayValue"
+      :placeholder="placeholder"
+    />
+    <div style="display: none">
+      <div ref="dropdown" class="itf-monthpicker__dropdown">
+        <itf-date-picker-inline
+          :value="value"
+          start-view="months"
+          min-view="months"
+          only-calendar
+          :display-format="displayFormat"
+          :value-format="valueFormat"
+          @input="selectInlineDate"
+        ></itf-date-picker-inline>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+@import '../../assets/scss/variables';
+@import '../../assets/scss/directives/tooltip';
+@import '../../assets/scss/input-addon';
+
+.itf-monthpicker {
+  &__dropdown {
+    width: max-content;
+    border: $input-border-width solid $input-border-color;
+    border-radius: $input-border-radius;
+    background-color: $body-bg;
+    overflow: hidden;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-btn-focus-box-shadow;
+    }
+
+    @media (prefers-color-scheme: notdark) {
+      background-color: $dark-body-bg;
+      border-color: $dark-border-color;
+      box-shadow: 0 0 0 2px $dark-input-focus-border;
+    }
+  }
+}
+</style>
+<script>
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
+import { DateTime } from 'luxon';
+import tippy from 'tippy.js';
+import itfIcon from '../icon/Icon';
+import itfDatePickerInline from './DatePickerInline.vue';
+
+export default @Component({
+  name: 'itfMonthPicker',
+  components: {
+    itfIcon,
+    itfDatePickerInline
+  },
+})
+class itfMonthPicker extends Vue {
+  @Inject({ default: null }) itemLabel;
+  @Inject({ default: null }) appendContext;
+
+  @Prop({ type: String }) value;
+  @Prop({ type: String, default: 'ISO' }) valueFormat;
+  @Prop({ type: String, default: 'MMMM yyyy' }) displayFormat;
+  @Prop({ type: String, default: '' }) placeholder;
+  @Prop({ type: String, default: '' }) prependIcon;
+
+  focused = false;
+
+  tooltip = null;
+
+  isInvalid() {
+    return this.itemLabel && this.itemLabel.isHasError();
+  }
+
+  isSuccess() {
+    return this.itemLabel && this.itemLabel.isHasSuccess();
+  }
+
+  mounted() {
+    // якщо в модалці, то контекст модалки, якщо ні, то аплікейшена
+    const context = (this.appendContext && this.appendContext()) || document.body;
+    this.tooltip = tippy(this.$refs.input, {
+      interactiveBorder: 30,
+      interactiveDebounce: 75,
+      animation: 'scale',
+      arrow: true,
+      content: this.$refs.dropdown,
+      allowHTML: true,
+      trigger: 'click',
+      interactive: true,
+      placement: 'bottom-start',
+      appendTo: context
+    });
+  }
+
+  get valueAsLuxon() {
+    if (!this.value) {
+      return null;
+    }
+    if (this.valueFormat === 'ISO') {
+      return DateTime.fromISO(this.value);
+    }
+    return DateTime.fromFormat(this.value, this.valueFormat);
+  }
+
+  get displayValue() {
+    if (!this.valueAsLuxon) {
+      return '';
+    }
+    return this.valueAsLuxon.toFormat(this.displayFormat);
+  }
+
+  updateValue(value, emitEmpty = false) {
+    const val = value && DateTime.fromFormat(value, this.displayFormat);
+    if (!val || !val.isValid) {
+      if (emitEmpty) {
+        this.$emit('input', null);
+      }
+      return;
+    }
+    this.$emit('input', this.valueFormat === 'ISO' ? val.toISO() : val.toFormat(this.valueFormat));
+  }
+
+  format(date) {
+    return DateTime.fromJSDate(date).toFormat(this.displayFormat);
+  }
+
+  parse(str) {
+    return DateTime.fromFormat(str, this.displayFormat).toJSDate();
+  }
+
+  onFocus() {
+    this.focused = true;
+  }
+
+  onBlur(e) {
+    this.focused = false;
+    this.updateValue(e.target.value, true);
+  }
+
+  selectInlineDate(date) {
+    this.$emit('input', date);
+    this.tooltip.hide();
+  }
+}
+</script>