@itfin/components 1.0.65 → 1.0.66

package/package.json

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

package/src/components/segmented-control/SegmentedControl.vue

@@ -1,18 +1,19 @@
 <template>
   <div class="itf-segmeneted-control">
-    <span v-if="!isUndefined" class="selection" :class="{'elevation-1': !disabled}"></span>
+    <span v-if="!isUndefined" ref="slider" class="selection" :class="{'elevation-1': !disabled}"></span>
 
     <div class="option" v-for="(item, n) in itemsWithNames" :key="n">
       <label>
         <input
+          ref="input"
           type="radio"
           :name="name"
           :value="n"
           :checked="isChecked(item)"
           @change="onItemChanged(item)" />
         <span>
-            <slot name="item" :item="item" :itemKey="n">{{item[itemText]}}</slot>
-          </span>
+          <slot name="item" :item="item" :itemKey="n">{{item[itemText]}}</slot>
+        </span>
       </label>
     </div>
   </div>
@@ -203,32 +204,30 @@ class itfSegmentedControl extends Vue {
   }
 
   init() {
-    const INDIVIDUAL_SEGMENT_SELECTOR = '.option input';
-    const BACKGROUND_PILL_SELECTOR = '.selection';
+    this.$el.addEventListener('change', () => updatePillPosition(this));
+    //window.addEventListener('resize', () => updatePillPosition(this.$el)); // Prevent pill from detaching from element when window resized. Becuase this is rare I haven't bothered with throttling the event
 
-    this.$el.addEventListener('change', () => updatePillPosition(this.$el));
-    window.addEventListener('resize', () => updatePillPosition(this.$el)); // Prevent pill from detaching from element when window resized. Becuase this is rare I haven't bothered with throttling the event
+    updatePillPosition(this);
 
-    updatePillPosition(this.$el);
-
-    function updatePillPosition (el) {
-      forEachElement(el, INDIVIDUAL_SEGMENT_SELECTOR, (elem, index) => {
+    function updatePillPosition (component) {
+      component.$refs.input.forEach((elem, index) => {
         if (elem.checked) {
-          moveBackgroundPillToElement(el, elem, index);
+          component.$nextTick(() => moveBackgroundPillToElement(component, elem, index));
+          setTimeout(() => moveBackgroundPillToElement(component, elem, index), 500);
+          setTimeout(() => moveBackgroundPillToElement(component, elem, index), 750);
+          setTimeout(() => moveBackgroundPillToElement(component, elem, index), 1500);
+          setTimeout(() => moveBackgroundPillToElement(component, elem, index), 3000);
         }
       })
     }
 
-    function moveBackgroundPillToElement (el, elem, index) {
-      const slider = el.querySelector(BACKGROUND_PILL_SELECTOR);
+    function moveBackgroundPillToElement (component, elem, index) {
+      const slider = component.$refs.slider;
+      console.info('init 2', slider);
       if (slider) {
         slider.style.transform = 'translateX(' + (elem.offsetWidth * index) + 'px)';
       }
     }
-
-    function forEachElement(el, className, fn) {
-      Array.from(el.querySelectorAll(className)).forEach(fn);
-    }
   }
 
   onItemChanged (item) {

package/src/components/tabs/Tab.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="itf-tab" :data-test="`itf-tab-${id}`" @click="tabsManager.setValue(id)" :class="{ 'active': tabsManager && tabsManager.getValue() === id }">
+    <span><slot /></span>
+  </div>
+</template>
+<style lang="scss" scoped>
+.itf-tab {
+
+}
+</style>
+<script>
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
+
+export default @Component({
+  name: 'itfTab',
+  components: {
+  }
+})
+class itfTab extends Vue {
+  @Inject() tabsManager;
+  @Prop() id;
+}
+</script>

package/src/components/tabs/TabContent.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-show="tabsManager && tabsManager.getValue() === id" class="itf-tab-content" :data-test="`itf-tab-content-${id}`">
+    <slot />
+  </div>
+</template>
+<style lang="scss" scoped>
+.itf-tab-content {
+
+}
+</style>
+<script>
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator';
+
+export default @Component({
+  name: 'itfTabContent',
+  components: {
+  }
+})
+class itfTabContent extends Vue {
+  @Inject({ default: null }) tabsManager;
+  @Prop() id;
+}
+</script>

package/src/components/tabs/Tabs.vue

@@ -0,0 +1,66 @@
+<script>
+import {
+  Vue, Component, Provide, Model, Emit,
+} from 'vue-property-decorator';
+import itfTab from './Tab';
+import './tabs.scss';
+
+export default @Component({
+  name: 'itfTabs',
+  components: {
+    itfTab
+  },
+})
+class itfTabs extends Vue {
+  @Provide() tabsManager = this;
+
+  @Model('input') value;
+
+  tabNodes;
+
+  render(createElement) {
+    const [tabNodes, contents] = parseNodes(this.$slots);
+    this.tabNodes = tabNodes;
+
+    return createElement('div', { staticClass: 'itf-tabs' }, [
+      createElement('div', { staticClass: 'itf-tabs-panel' }, tabNodes),
+      createElement('div', { staticClass: 'itf-tabs-content' }, contents)
+    ]);
+
+    function parseNodes(slots) {
+      const items = [];
+      const contents = [];
+      const nodes = (slots.default || []);
+
+      for (const vnode of nodes) {
+        if (!vnode.componentOptions) {
+          continue;
+        }
+        if (vnode.componentOptions.tag.includes('-tab-content')) {
+          contents.push(vnode);
+          continue;
+        }
+        if (vnode.componentOptions.tag.includes('-tab')) {
+          items.push(vnode);
+        }
+      }
+      return [items, contents];
+    }
+  }
+
+  @Emit('input')
+  setValue(value) {
+    this.tabNodes = null;
+  }
+
+  getValue() {
+    return this.value;
+  }
+
+  scrollToTop() {
+    this.$el.scrollIntoView({
+      behavior: 'smooth',
+    });
+  }
+}
+</script>

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

@@ -0,0 +1,60 @@
+import { storiesOf } from '@storybook/vue';
+import itfApp from '../app/App.vue';
+import itfButton from '../button/Button.vue';
+import itfTab from './Tab.vue';
+import itfTabContent from './TabContent.vue';
+import itfTabs from './Tabs.vue';
+import itfLabel from '../form/Label.vue';
+import itfDatePicker from '../datepicker/DatePicker.vue';
+import itfDateRangePicker from '../datepicker/DateRangePicker.vue';
+
+storiesOf('Common', module)
+  .add('Tabs', () => ({
+    components: {
+      itfApp,
+      itfTabs,
+      itfLabel,
+      itfDatePicker,
+      itfDateRangePicker,
+      itfTab,
+      itfTabContent,
+      itfButton
+    },
+    data() {
+      return {
+        tab: 'Test1'
+      }
+    },
+    methods: {
+    },
+    template: `<div>
+      <p>You need wrap whole application with this tag</p>
+
+      <h2>Usage</h2>
+{{tab}}
+<pre>
+  &lt;itf-tabs v-model="tab">
+    &lt;itf-tab id="Test1">
+    asd
+    </itf-tab>
+  &lt;/itf-tabs>
+</pre>
+
+      <h3>Example</h3>
+
+  <itf-tabs v-model="tab">
+    <itf-tab id="Test1">
+    Content 1
+    </itf-tab>
+    <itf-tab id="Test2">
+    Content 2
+    </itf-tab>
+    <itf-tab-content id="Test1">
+    asd
+    </itf-tab-content>
+    <itf-tab-content id="Test2">
+    asd123
+    </itf-tab-content>
+  </itf-tabs>
+    </div>`,
+  }));

package/src/components/tabs/tabs.scss

@@ -0,0 +1,90 @@
+@import '../../assets/scss/variables';
+@import '~bootstrap/scss/grid';
+@import '~bootstrap/scss/containers';
+
+:root {
+  --itf-tabs-active-bg: #fff;
+  --itf-tabs-active-color: #222;
+  --itf-tabs-active-border-color: #ffb20fc2;
+  --itf-tabs-inactive-bg: #fafafa;
+  --itf-tabs-inactive-color: #222;
+  --itf-tabs-inactive-border-color: rgba(0, 0, 0, .1);
+  --itf-tabs-hover-bg: #F4F7F9;
+  --itf-tabs-hover-color: #222;
+  --itf-tabs-hover-border-color: rgba(0, 0, 0, .5);
+  --itf-tabs-tab-padding: 10px;
+}
+
+.itf-tabs {
+  .itf-tabs-panel {
+    margin: 0px;
+    padding: 0px;
+    overflow: hidden;
+    padding-left: calc(var(--itf-tabs-tab-padding) * 2.1);
+    list-style-type: none;
+    display: flex;
+
+    .itf-tab {
+      display: block;
+      //float: right;
+      padding: 10px var(--itf-tabs-tab-padding) 8px;
+      margin-right: calc(var(--itf-tabs-tab-padding) * 3);
+      z-index: 2;
+      position: relative;
+      cursor: pointer;
+      transition: all 250ms ease;
+      border-radius: 8px 8px 0 0;
+      background-color: var(--itf-tabs-inactive-bg);
+      color: var(--itf-tabs-inactive-color);
+      border-top: 1px solid var(--itf-tabs-inactive-border-color);
+
+      & > span {
+        position: relative;
+        z-index: 4;
+      }
+      &:before, &:after {
+        display: block;
+        content: " ";
+        position: absolute;
+        top: -1px;
+        height: calc(100% + 1px);
+        width: calc(var(--itf-tabs-tab-padding) * 5);
+        background-color: var(--itf-tabs-inactive-bg);
+        color: var(--itf-tabs-inactive-color);
+        border-top: 1px solid var(--itf-tabs-inactive-border-color);
+        transition: all 250ms ease;
+      }
+      &:before {
+        right: calc(var(--itf-tabs-tab-padding) * -2);
+        border-radius: 0 8px 0 0;
+        transform: skew(30deg, 0deg);
+        box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0;
+      }
+      &:after {
+        left: calc(var(--itf-tabs-tab-padding) * -2);
+        border-radius: 8px 0 0 0;
+        //transform: skew(-30deg, 0deg);
+        box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0;
+      }
+      &:hover, &:hover:before, &:hover:after {
+        background-color: var(--itf-tabs-hover-bg);
+        color: var(--itf-tabs-hover-color);
+        border-top: 1px solid var(--itf-tabs-hover-border-color);
+      }
+      &.active {
+        z-index: 3;
+
+        &, &:before, &:after {
+          background-color: var(--itf-tabs-active-bg);
+          color: var(--itf-tabs-active-color);
+          border-top: 1px solid var(--itf-tabs-active-border-color);
+        }
+      }
+    }
+  }
+  .itf-tabs-content {
+    .itf-tab-content {
+
+    }
+  }
+}

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

@@ -19,6 +19,10 @@
       :readonly="readonly"
       @input="onInput($event.target.value)"
       @keydown="$emit('keydown', $event)"
+      @keyup="$emit('keyup', $event)"
+      @keypress="$emit('keypress', $event)"
+      @blur="$emit('blur', $event)"
+      @focus="$emit('focus', $event)"
       :min="min"
       :max="max"
       :step="step"
@@ -101,5 +105,13 @@ class itfTextField extends Vue {
     const endText = value.slice(position);
     this.$emit('input', `${startText}${text}${endText}`);
   }
+
+  focus() {
+    this.$refs.input.focus();
+  }
+
+  blur() {
+    this.$refs.input.blur();
+  }
 }
 </script>

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

@@ -18,6 +18,10 @@
       :value="value"
       @input="onInput($event.target.value)"
       @keydown="$emit('keydown', $event)"
+      @keyup="$emit('keyup', $event)"
+      @keypress="$emit('keypress', $event)"
+      @blur="$emit('blur', $event)"
+      @focus="$emit('focus', $event)"
     />
   </div>
 
@@ -95,5 +99,13 @@ class itfTextarea extends Vue {
     const endText = value.slice(position);
     this.$emit('input', `${startText}${text}${endText}`);
   }
+
+  focus() {
+    this.$refs.input.focus();
+  }
+
+  blur() {
+    this.$refs.input.blur();
+  }
 }
 </script>

package/src/components/wizard/Sidebar.vue

@@ -1,54 +1,19 @@
 <template>
 
-  <div class="eo-tabset breadcrumbs">
+  <div class="py-3 px-2">
 
-    <ul class="nav nav-pills flex-column mb-auto">
-      <li class="nav-item">
-        <a href="#" class="nav-link active" aria-current="page">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
-          Home
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
-          Dashboard
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
-          Orders
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
-          Products
-        </a>
-      </li>
-      <li>
-        <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg>
-          Customers
-        </a>
-      </li>
-    </ul>
-
-    <ul class="nav nav-pills nav-stacked" data-test="step-sidebar">
+    <ul class="nav nav-pills flex-column mb-auto ps-0" data-test="step-sidebar">
 
       <li v-for="(step, n) in sidebarItems" :class="{ active: selectedId === step.id, disabled: selectedId !== step.id }"
           :data-test="'step-sidebar-' + step.id">
-        <strong v-if="selectedId !== step.id && value.indexOf(step.id) !== -1">
-          <span aria-hidden="true" class="glyphicon m-0-left" :class="'air-icon-' + step['sidebar-icon']"></span>
+        <strong v-if="selectedId !== step.id && value.includes(step.id)" class="nav-link text-success">
+          <itf-icon :name="step['sidebar-icon'] || 'check_circle'"></itf-icon>
           {{step['sidebar-title']}}
         </strong>
-        <a href="" v-else @click.prevent="">
-          <span aria-hidden="true" class="glyphicon m-0-left" :class="'air-icon-' + step['sidebar-icon']"></span>
+        <a href="" v-else @click.prevent="" class="nav-link">
+          <itf-icon :name="step['sidebar-icon'] || 'circle'"></itf-icon>
           {{step['sidebar-title']}}
         </a>
-        <span aria-hidden="true" class="completed-icon glyphicon air-icon-verified"
-              :class="{ 'completed': value.indexOf(step.id) !== -1 }"></span>
       </li>
     </ul>
 
@@ -56,50 +21,18 @@
 
 </template>
 <style lang="scss">
-  .itf-wizard-sidebar {
-    .eo-tabset.breadcrumbs {
-      .completed-icon {
-        position: absolute;
-        right: 0;
-        top: 0;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        //color: $gray-light;
-
-        &.completed {
-          //color: $brand-primary;
-        }
-      }
-
-      li.active > a {
-        //box-shadow: $drop-shadow-darker;
-      }
-
-      li > a {
-        .glyphicon {
-          margin: 0 10px 0 0;
-          font-size: 14px;
-        }
-      }
-
-      li > strong {
-        display: block;
-        padding: 9px 20px;
-
-        .glyphicon {
-          margin: 0 10px 0 0;
-        }
-      }
-    }
-  }
+.itf-wizard-sidebar {
+}
 </style>
 <script>
 import { Vue, Component, Prop } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon';
 
 export default @Component({
   name: 'itfWizardSidebar',
-  components: {},
+  components: {
+    itfIcon
+  },
 })
 class itfWizardSidebar extends Vue {
   @Prop(Array) steps;

package/src/components/wizard/Wizard.vue

@@ -108,19 +108,19 @@ class itfWizard extends Vue {
     }
 
     return createElement('div', { staticClass: 'itf-wizard row gx-0' }, [
-      isSidebarNeeded ? createElement('div', { staticClass: 'col-md-4 d-none d-md-block itf-wizard-sidebar' }, [
+      isSidebarNeeded ? createElement('div', { staticClass: 'col-md-3 d-none d-md-flex' }, [
         createSidebar({
           value: (this.value || {}).completed || [],
           steps: this.stepsNodes,
           selectedId: this.currentSidebarId,
         }),
       ]) : null,
-      createElement('div', { staticClass: isSidebarNeeded ? 'col-md-8 itf-wizard-step' : 'col-xs-12 itf-wizard-step' }, [node])
+      createElement('div', { staticClass: isSidebarNeeded ? 'col-md-9 itf-wizard-step' : 'col-xs-12 itf-wizard-step' }, [node])
     ]);
 
     function createSidebar(props) {
       return createElement('itf-wizard-sidebar', {
-        staticClass: '',
+        staticClass: 'itf-wizard-sidebar w-100',
         props,
       });
     }