@itfin/components 1.0.52 → 1.0.56

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.52",
-
+  "version": "1.0.56",
   "main": "dist/itfin-components.umd.js",
   "unpkg": "dist/itfin-components.common.js",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
@@ -31,7 +30,6 @@
     "lodash": "^4.17.20",
     "luxon": "^2.0.2",
     "pdfjs-dist": "^2.10.377",
-    "ramjet": "^0.5.0",
     "tippy.js": "^6.3.2",
     "vue": "^2.6.12",
     "vue-imask": "^6.2.2",

package/src/assets/scss/_variables.scss

@@ -67,6 +67,8 @@ $dark-btn-secondary-color: $dark-secondary;
 $dark-input-box-shadow: #3d3d3d;
 $dark-input-focus-border: rgb(244 206 176 / 25%);
 
+$pagination-border-width: 0;
+
 // 3. Include remainder of required Bootstrap stylesheets
 @import "~bootstrap/scss/variables.scss";
 @import "~bootstrap/scss/mixins.scss";

package/src/components/app/App.vue

@@ -81,9 +81,6 @@ export default @Component({
 })
 class itfApp extends Vue {
   @Provide() globalApp = this;
-  @Provide() appendContext = function appendContext() {
-    return globalApp.$el;
-  };
 
   created() {
     globalApp = this;

package/src/components/avatar/Avatar.vue

@@ -58,7 +58,7 @@ export default @Component({
   name: 'itfAvatar',
 })
 class itfAvatar extends Vue {
-  @Prop({ type: Number, default: 32 }) size;
+  @Prop({ type: [String, Number], default: 32 }) size;
 
   @Prop({ type: String, default: null }) src;
 

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -9,7 +9,7 @@
         :class="{'active': n === items.length - 1}"
         :aria-current="n === items.length - 1 ? 'page' : null"
       >
-        <span v-if="crumb.disabled">{{crumb.text}}</span>
+        <span v-if="crumb.disabled || !crumb.to">{{crumb.text}}</span>
         <nuxt-link v-else :to="crumb.to" :exact="crumb.exact">{{crumb.text}}</nuxt-link>
       </li>
     </ol>

package/src/components/button/Button.vue

@@ -163,7 +163,7 @@ class itfButton extends Vue {
   @Prop(String) target;
 
   get isLink() {
-    return this.to || this.href;
+    return this.href || this.to;
   }
 }
 </script>

package/src/components/datepicker/DatePicker.vue

@@ -74,7 +74,7 @@ import { IMask, IMaskComponent } from 'vue-imask';
 import { DateTime } from 'luxon';
 import { debounce } from '../../helpers/debounce';
 import tippy from 'tippy.js';
-import itfIcon from '../icon/Icon';
+import itfIcon from '../icon/Icon.vue';
 import itfDatePickerInline from './DatePickerInline.vue';
 import ITFSettings from '../../ITFSettings';
 
@@ -88,7 +88,6 @@ export default @Component({
 })
 class itfDatePicker extends Vue {
   @Inject({ default: null }) itemLabel;
-  @Inject({ default: null }) appendContext;
 
   @Prop({ type: String }) value;
   @Prop({ type: [Number, String], default: 300 }) delayInput;
@@ -131,7 +130,7 @@ class itfDatePicker extends Vue {
 
   mounted() {
     // якщо в модалці, то контекст модалки, якщо ні, то аплікейшена
-    const context = (this.appendContext && this.appendContext()) || document.body;
+    const context = this.$el.closest('.itf-append-context') || document.body;
     this.tooltip = tippy(this.$refs.input.$el, {
       interactiveBorder: 30,
       interactiveDebounce: 75,

package/src/components/datepicker/DatePickerInline.vue

@@ -118,9 +118,8 @@ class itfDatePickerInline extends Vue {
         }
         if (this.range) {
           this.updateValue(
-            DateTime.fromJSDate(this.calendar.rangeDateFrom).toFormat(this.displayFormat).
-              false,
-            DateTime.fromJSDate(this.calendar.rangeDateFrom).toFormat(this.displayFormat)
+            DateTime.fromJSDate(this.calendar.rangeDateFrom).toFormat(this.displayFormat),
+            false
           );
         } else {
           this.updateValue(DateTime.fromJSDate(date).toFormat(this.displayFormat));
@@ -131,7 +130,10 @@ class itfDatePickerInline extends Vue {
         if (!this.customDays[strDate]) {
           return { html: false, classes: false };
         }
-        return { html: this.customDays[strDate].text || false, classes: this.customDays[strDate].class || false };
+        return {
+          html: this.customDays[strDate].text || false,
+          classes: this.customDays[strDate].class || false
+        };
       },
     });
     if (this.valueAsLuxon) {

package/src/components/datepicker/DateRangePicker.vue

@@ -146,7 +146,6 @@ export default @Component({
 })
 class itfDateRangePicker extends Vue {
   @Inject({ default: null }) itemLabel;
-  @Inject({ default: null }) appendContext;
 
   @Prop({ default: () => ([]) }) value;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
@@ -189,7 +188,7 @@ class itfDateRangePicker extends Vue {
 
   mounted() {
     // якщо в модалці, то контекст модалки, якщо ні, то аплікейшена
-    const context = (this.appendContext && this.appendContext()) || document.body;
+    const context = this.$el.closest('.itf-append-context') || document.body;
     this.tooltip = tippy(this.$refs.group, {
       interactiveBorder: 30,
       interactiveDebounce: 75,

package/src/components/datepicker/MonthPicker.vue

@@ -80,7 +80,6 @@ export default @Component({
 })
 class itfMonthPicker extends Vue {
   @Inject({ default: null }) itemLabel;
-  @Inject({ default: null }) appendContext;
 
   @Prop({ type: String }) value;
   @Prop({ type: String, default: 'ISO' }) valueFormat;
@@ -102,7 +101,7 @@ class itfMonthPicker extends Vue {
 
   mounted() {
     // якщо в модалці, то контекст модалки, якщо ні, то аплікейшена
-    const context = (this.appendContext && this.appendContext()) || document.body;
+    const context = this.$el.closest('.itf-append-context') || document.body;
     this.tooltip = tippy(this.$refs.input, {
       interactiveBorder: 30,
       interactiveDebounce: 75,

package/src/components/datepicker/PeriodPicker.vue

@@ -233,6 +233,7 @@ class itfPeriodPicker extends Vue {
   }
 
   mounted() {
+    const context = this.$el.closest('.itf-append-context') || document.body;
     this.tooltip = tippy(this.$refs.input, {
       interactiveBorder: 30,
       interactiveDebounce: 75,
@@ -243,7 +244,7 @@ class itfPeriodPicker extends Vue {
       trigger: 'click',
       interactive: true,
       placement: this.placement,
-      appendTo: document.body,
+      appendTo: context,
     });
   }
 

package/src/components/modal/Modal.vue

@@ -51,9 +51,6 @@ export default @Component({
   name: 'itfModal',
   components: {
     itfButton
-  },
-  provide() {
-    return { appendContext: () => this.$refs.content };
   }
 })
 class itfModal extends Vue {

package/src/components/overlay/SensitiveOverlay.vue

@@ -1,9 +1,9 @@
 <template>
 
-  <div class="b-sensitive-overlay">
+  <div class="itf-sensitive-overlay">
     <slot></slot>
 
-    <div class="b-sensitive-overlay__cover">
+    <div class="itf-sensitive-overlay__cover">
       <slot name="hint">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 104.8 122.88" style="enable-background:new 0 0 104.8 122.88" xml:space="preserve"><g><path fill="currentColor" d="M39.92,0c11.02,0,21,4.47,28.23,11.69c7.22,7.22,11.69,17.2,11.69,28.23c0,3.8-0.53,7.47-1.52,10.95l-3.7-2.53 c0.65-2.7,1-5.52,1-8.42c0-9.86-4-18.78-10.46-25.24C58.7,8.21,49.78,4.22,39.92,4.22c-9.86,0-18.78,4-25.24,10.46 C8.21,21.13,4.22,30.06,4.22,39.92c0,9.86,4,18.78,10.46,25.24c4.79,4.79,10.93,8.22,17.8,9.68l0.34,4.36 c-8.17-1.47-15.48-5.43-21.11-11.06C4.47,60.92,0,50.94,0,39.92c0-11.02,4.47-21,11.69-28.23C18.91,4.47,28.89,0,39.92,0L39.92,0z M81.84,122.5c-0.89,0.41-1.88,0.48-2.76,0.25c-0.97-0.26-1.83-0.87-2.36-1.78l-9.91-17.08l-9.42,10.57 c-1.31,1.47-2.8,2.58-4.24,3.16c-1.11,0.45-2.2,0.59-3.22,0.37c-1.13-0.24-2.09-0.89-2.8-2c-0.56-0.89-0.93-2.07-1.05-3.59 l-5.25-68.42c-0.01-0.05-0.01-0.11-0.01-0.15c-0.01-0.43,0.07-0.85,0.25-1.23c0.19-0.44,0.51-0.84,0.91-1.13 c0.17-0.13,0.36-0.22,0.56-0.27c0.39-0.13,0.8-0.18,1.19-0.13c0.38,0.04,0.75,0.15,1.09,0.35c0.11,0.05,0.23,0.12,0.33,0.2 l56.52,38.7c1.25,0.86,2.09,1.77,2.58,2.7c0.62,1.17,0.69,2.32,0.33,3.42c-0.32,0.99-1,1.87-1.93,2.6 c-1.21,0.95-2.92,1.69-4.86,2.09c-0.02,0.01-0.05,0.01-0.07,0.01L83.92,94l9.84,17.13c0.52,0.91,0.62,1.96,0.36,2.92 c-0.25,0.94-0.85,1.8-1.72,2.37c-0.03,0.03-0.07,0.05-0.11,0.07l-10.21,5.9C81.99,122.43,81.92,122.47,81.84,122.5L81.84,122.5 L81.84,122.5z M79.99,119.28c0.1,0.03,0.2,0.03,0.29-0.01c0.03-0.02,0.07-0.04,0.11-0.05l10.08-5.82c0.09-0.07,0.15-0.17,0.19-0.27 c0.02-0.09,0.02-0.17-0.01-0.22L79.11,93.16h0.01c-0.09-0.16-0.16-0.34-0.2-0.53c-0.2-0.97,0.43-1.91,1.39-2.11l16.22-2.88 c0.02-0.01,0.04-0.01,0.07-0.01c1.4-0.29,2.58-0.79,3.38-1.41c0.39-0.31,0.65-0.61,0.74-0.9c0.06-0.18,0.03-0.4-0.1-0.65 c-0.23-0.43-0.69-0.89-1.43-1.41L45.01,46.02l5.12,65.4c0.07,0.91,0.25,1.54,0.5,1.94c0.15,0.23,0.33,0.37,0.51,0.41 c0.3,0.07,0.69-0.01,1.15-0.19c0.93-0.37,1.94-1.15,2.9-2.22l10.11-12.18l0,0c0.13-0.14,0.27-0.26,0.44-0.36 c0.85-0.49,1.95-0.21,2.44,0.65l11.63,19.69C79.85,119.22,79.91,119.26,79.99,119.28L79.99,119.28L79.99,119.28z M80.39,119.22 c0.23-0.11,0.5-0.18,0.78-0.18L80.39,119.22L80.39,119.22L80.39,119.22z M39.92,27.34c3.47,0,6.62,1.41,8.89,3.69 c0.23,0.23,0.46,0.48,0.67,0.73c-0.12-0.04-0.24-0.08-0.36-0.12c-0.65-0.21-1.35-0.37-2.09-0.48c-0.23-0.04-0.47-0.08-0.71-0.1 c-1.05-0.12-2.14-0.12-3.23,0c-0.15,0.02-0.3,0.04-0.46,0.06c-0.86-0.27-1.78-0.41-2.73-0.41c-2.55,0-4.86,1.03-6.52,2.69 l-0.01,0.01c-1.66,1.66-2.69,3.97-2.69,6.52c0,1.3,0.11,1.34-0.16,2.69c-0.14,0.68-0.22,1.44-0.24,2.28 c-0.04,0.56-0.04,1.13,0,1.71l0.12,1.58c-1.92-2.21-3.08-5.09-3.08-8.25c0-3.46,1.41-6.61,3.69-8.89l0.01-0.01 C33.31,28.74,36.45,27.34,39.92,27.34L39.92,27.34z M39.92,13.68c7.24,0,13.8,2.94,18.55,7.68c4.75,4.75,7.68,11.31,7.68,18.55 c0,0.86-0.04,1.7-0.12,2.54l-3.85-2.64c-0.03-6.11-2.51-11.64-6.52-15.64c-4.03-4.03-9.59-6.52-15.74-6.52 c-6.15,0-11.71,2.49-15.74,6.52c-4.03,4.03-6.52,9.59-6.52,15.74c0,6.15,2.49,11.71,6.52,15.74c2.04,2.04,4.48,3.69,7.19,4.82 l0.34,4.37c-3.94-1.3-7.47-3.51-10.34-6.37c-4.75-4.75-7.68-11.31-7.68-18.55c0-7.24,2.94-13.8,7.68-18.55 C26.11,16.62,32.67,13.68,39.92,13.68L39.92,13.68z"/></g></svg>
 
@@ -18,7 +18,7 @@
 
 </template>
 <style lang="scss">
-.b-sensitive-overlay {
+.itf-sensitive-overlay {
   position: relative;
   min-height: 100px;
 

package/src/components/pagination/Pagination.vue

@@ -0,0 +1,127 @@
+<template>
+
+  <nav aria-label="Page navigation example">
+    <ul class="pagination itf-pagination">
+      <li
+        v-for="(page, n) in pagesArr"
+        :key="n"
+        class="page-item"
+        :class="{'active': page.current, 'disabled': !page.active && !page.current }"
+      >
+        <a v-if="page.type === 'prev'" href="" class="page-link" aria-label="Previous" @click.prevent="onPage(page.number)">
+          <itf-icon name="chevron_left" aria-hidden="true" />
+          <span class="sr-only">Previous</span>
+        </a>
+        <a v-else-if="page.type === 'first'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
+        <a v-else-if="page.type === 'page'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
+        <a v-else-if="page.type === 'last'" class="page-link" href="" @click.prevent="onPage(page.number)">{{page.number}}</a>
+        <span v-else-if="page.type === 'more'" class="page-link">&hellip;</span>
+        <a v-if="page.type === 'next'" href="" class="page-link" aria-label="Next" @click.prevent="onPage(page.number)">
+          <span class="sr-only">Next</span>
+          <itf-icon name="chevron_right" aria-hidden="true" />
+        </a>
+      </li>
+    </ul>
+  </nav>
+
+</template>
+<style lang="scss">
+@import '../../assets/scss/variables';
+@import '~bootstrap/scss/pagination';
+
+.itf-pagination.pagination {
+  padding-left: 0;
+
+  .page-item {
+    margin-right: 3px;
+    .page-link {
+      border-radius: .5rem;
+    }
+  }
+}
+</style>
+<script>
+import { Vue, Component, Model, Prop } from 'vue-property-decorator';
+import itfIcon from '../icon/Icon.vue';
+
+const MIN_PAGES_BLOCKS = 2;
+const MAX_PAGES_BLOCKS = 6;
+
+export default @Component({
+  name: 'itfPagination',
+  components: {
+    itfIcon
+  }
+})
+class itfPagination extends Vue {
+  @Model('input') value;
+  @Prop({ type: [String, Number], default: 0 }) length;
+  @Prop({ type: [String, Number], default: 20 }) size;
+  @Prop({ type: [String, Number] }) pages;
+  @Prop({ type: [String, Number], default: MIN_PAGES_BLOCKS }) minBlocks;
+  @Prop({ type: [String, Number], default: MAX_PAGES_BLOCKS }) maxBlocks;
+
+  onPage(page) {
+    this.$emit('input', page);
+  }
+
+  get pagesArr () {
+    const pageSize = Number(this.size);
+    const totalItems = Number(this.length);
+    const currentPage = this.value;
+    let maxBlocks = Number(this.maxBlocks);
+    maxBlocks = maxBlocks && maxBlocks < MAX_PAGES_BLOCKS ? MAX_PAGES_BLOCKS : maxBlocks;
+    const minBlocks = Number(this.minBlocks);
+
+    const pages = [];
+    const numPages = this.pages ? Number(this.pages) : Math.ceil(totalItems / pageSize);
+
+    if (numPages > 1) {
+      pages.push({
+        type: 'prev',
+        number: Math.max(1, currentPage - 1),
+        active: currentPage > 1
+      });
+      pages.push({
+        type: 'first',
+        number: 1,
+        active: currentPage > 1,
+        current: currentPage === 1
+      });
+      const maxPivotPages = Math.round((maxBlocks - minBlocks) / 2);
+      let minPage = Math.max(2, currentPage - maxPivotPages);
+      const maxPage = Math.min(numPages - 1, currentPage + maxPivotPages * 2 - (currentPage - minPage));
+      minPage = Math.max(2, minPage - (maxPivotPages * 2 - (maxPage - minPage)));
+      let i = minPage;
+      while (i <= maxPage) {
+        if ((i === minPage && i !== 2) || (i === maxPage && i !== numPages - 1)) {
+          pages.push({
+            type: 'more',
+            active: false
+          });
+        } else {
+          pages.push({
+            type: 'page',
+            number: i,
+            active: currentPage !== i,
+            current: currentPage === i
+          });
+        }
+        i++;
+      }
+      pages.push({
+        type: 'last',
+        number: numPages,
+        active: currentPage !== numPages,
+        current: currentPage === numPages
+      });
+      pages.push({
+        type: 'next',
+        number: Math.min(numPages, currentPage + 1),
+        active: currentPage < numPages
+      });
+    }
+    return pages;
+  }
+}
+</script>

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

@@ -0,0 +1,41 @@
+import { storiesOf } from '@storybook/vue';
+import itfPagination from './Pagination.vue';
+import itfApp from '../app/App.vue';
+
+storiesOf('Common', module)
+  .add('Pagination', () => ({
+    components: {
+      itfApp,
+      itfPagination
+    },
+    data() {
+      return {
+        page: 1,
+        customDays: {
+          '2021-10-21': { text: '🎉', class: 'test' }
+        },
+        dateRange: null,
+        month: '09-2021'
+      }
+    },
+    template: `<div>
+      <p>You need wrap whole application with this tag</p>
+
+      <h2>Usage</h2>
+
+  <pre>
+
+  </pre>
+
+      <h2>Example</h2>
+
+      <itf-app ref="app">
+
+        {{page}}
+
+        <br />
+        <itf-pagination :length="500" v-model.lazy="page"></itf-pagination>
+
+      </itf-app>
+    </div>`,
+  }));

package/src/components/popover/Popover.vue

@@ -17,7 +17,7 @@
 .itf-popover {
   display: none;
 
-  .popover-body & {
+  .popover-body > & {
     display: block;
   }
   .border-right {
@@ -57,8 +57,6 @@ export default @Component({
   },
 })
 class itfPopover extends Vue {
-  @Inject({ default: null }) appendContext;
-
   @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;
@@ -95,23 +93,25 @@ class itfPopover extends Vue {
     const el = this.$refs.popover;
     const { default: Popover } = await import('bootstrap/js/src/popover.js');
 
-    const elContext = (this.appendContext && this.appendContext()) || document.body;
+    const context = this.$el.closest('.itf-append-context') || document.body;
     this.modalEl = new Popover(this.$el, {
       content: el,
-      container: elContext,
+      container: context,
       sanitize: false,
       html: true,
       customClass: this.customClass,
       placement: this.placement,
-      trigger: this.trigger
+      trigger: this.trigger,
     });
     this.onVisibleChanged(this.value);
     this.$el.addEventListener('shown.bs.popover', () => {
       document.body.addEventListener('click', this.clickOutside);
+      this.$emit('update:visible', true);
     });
     this.$el.addEventListener('hidden.bs.popover', () => {
       this.value = false;
       document.body.removeEventListener('click', this.clickOutside);
+      this.$emit('update:visible', false);
     });
   }
 

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

@@ -1,149 +1,238 @@
 <template>
-
   <div class="itf-segmeneted-control">
-    <div
-      v-for="(item, n) of items"
-      :key="n"
-      class="itf-segmeneted-control__segment">
-      <button
-        @click="onSelect(item, n)"
-        type="button"
-        class="itf-segmeneted-control__button"
-        :class="{'active': currentIndex === n}">
-        <span class="itf-segmeneted-control__slider" ref="button"></span>
-        <span class="itf-segmeneted-control__text">{{ itemText ? item[itemText] : item }}</span>
-      </button>
+    <span v-if="!isUndefined" class="selection" :class="{'elevation-1': !disabled}"></span>
+
+    <div class="option" v-for="(item, n) in itemsWithNames" :key="n">
+      <label>
+        <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>
+      </label>
     </div>
   </div>
-
 </template>
-<style lang="scss" scoped>
+<style lang="scss">
 @import '../../assets/scss/variables';
 
 .itf-segmeneted-control {
-  --shadow: 0 1px 3px rgba(0,0,0,0.1);
+  --itf-segmeneted-control--backgroung: #{$input-bg};
+  --itf-segmeneted-control--border-radius: #{$border-radius};
+  --itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
 
-  background-color: $input-bg;
-  border-radius: $border-radius;
-  display: inline-flex;
+  cursor: pointer;
+  background: var(--itf-segmeneted-control--backgroung);
+  border-radius: var(--itf-segmeneted-control--border-radius);
   margin: 0;
-  padding: 4px;
-
-  &__segment {
+  padding: 2px;
+  border: none;
+  outline: none;
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow: hidden;
+
+  .option {
     position: relative;
-    margin-bottom: 0;
-    line-height: 1;
-  }
+    cursor: pointer;
 
-  &__button {
-    position: relative;
-    margin: 0;
-    padding: 7px 30px;
-    line-height: 1;
-    background: transparent;
-    border: none;
-    outline: none;
-
-    &:hover,
-    &:focus {
-      cursor: pointer;
+    &:hover input:not(:checked) + label span,
+    &:active input:not(:checked) + label span,
+    &:focus input:not(:checked) + label span {
+      /*opacity: .2;*/
+      color: var(--v-primary-base);
     }
-    &:after {
-      position: absolute;
-      top: 15%;
-      right: -0.5px;
-      display: block;
-      width: 1px;
-      height: 70%;
-      background-color: rgba(0, 0, 0, 0.08);
-      -webkit-transition: opacity .2s ease-out;
-      transition: opacity .2s ease-out;
-      content: "";
+    &:active input:not(:checked) + label span {
+      transform: scale(.95);
     }
+    &:first-of-type {
+      grid-column: 1;
+      grid-row: 1;
+      box-shadow: none;
 
-    &.active:after {
-      opacity: 0;
+      label::before {
+        opacity: 0;
+      }
+      label::after {
+        opacity: 0;
+      }
     }
-  }
-  &__segment:last-child &__button:after {
-    display: none;
-  }
-
-  &__text {
-    position: relative;
-    z-index: 2;
-  }
-  &__slider {
-    -webkit-transition: opacity .2s ease-out;
-    transition: opacity .2s ease-out;
-    transition-delay: 400;
-    position: absolute;
-    opacity: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    background-color: #fff;
-    border-radius: calc(#{$border-radius} - 3px);
-    box-shadow: var(--shadow);
-    content: "";
-    &.active {
-      box-shadow: none;
-      opacity: 1 !important;
+    label {
+      cursor: pointer;
+      position: relative;
+      display: block;
+      text-align: center;
+      padding: .25rem 1.5rem;
+      background: rgba(255, 255, 255, 0);
+      color: rgba(0, 0, 0, 1);
+      font-size: 14px;
+
+      &::before,
+      &::after {
+        content: '';
+        width: 1px;
+        background: rgba(142, 142, 147, .15);
+        position: absolute;
+        top: 14%;
+        bottom: 14%;
+        border-radius: var(--itf-segmeneted-control--border-radius);
+        will-change: background;
+        -webkit-transition: background .2s ease;
+        transition: background .2s ease;
+      }
+      &::before {
+        left: 0;
+        transform: translateX(-.5px);
+      }
+      &::after {
+        right: 0;
+        transform: translateX(.5px);
+      }
+      span {
+        display: block;
+        position: relative;
+        z-index: 2;
+        -webkit-transition: all .2s ease;
+        transition: all .2s ease;
+        will-change: transform;
+      }
     }
-  }
-  &__button.active &__slider {
-    opacity: 1;
-  }
-
-  @media (prefers-color-scheme: notdark) {
-    background-color: $dark-input-bg;
 
-    &__slider {
-      background-color: $dark-primary;
-    }
-    &__button {
-      color: $dark-body-color;
+    input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      margin: 0;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      outline: none;
+      border: none;
+      opacity: 0;
 
-      &.active {
-        color: #222;
+      &:checked + label {
+        cursor: default;
       }
-      &:after {
-        border-color: rgba(255, 255, 255, 0.08);
+      &:checked + label::before,
+      &:checked + label::after {
+        background: var(--itf-segmeneted-control--backgroung);
+        z-index: 1;
       }
     }
   }
+  .selection {
+    background: rgba(255, 255, 255, 1);
+    border: .5px solid rgba(0, 0, 0, 0.04);
+    box-shadow: var(--itf-segmeneted-control--shadow);
+    /*box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);*/
+    border-radius: var(--itf-segmeneted-control--border-radius);
+    grid-column: 1;
+    grid-row: 1;
+    z-index: 2;
+    will-change: transform;
+    -webkit-transition: transform .2s ease;
+    transition: transform .2s ease;
+  }
 }
 </style>
 <script>
-import { Vue, Prop, Model, Component } from 'vue-property-decorator';
+import { Vue, Component, Model, Prop, Watch } from 'vue-property-decorator';
 
 export default @Component({
   name: 'itfSegmentedControl',
-  components: {
-  }
+  components: {}
 })
 class itfSegmentedControl extends Vue {
   @Model('input') value;
-  @Prop() items;
-  @Prop(String) itemKey;
-  @Prop(String) itemText;
+  @Prop({ type: Array, required: true }) items;
+  @Prop({ type: String, default: 'Id' }) itemKey;
+  @Prop({ type: String, default: 'Name' }) itemText;
+  @Prop({ type: Boolean, default: false }) returnObject;
+  @Prop({ type: Boolean, default: false }) disabled;
+
+  get name () {
+    return `sc${this._uid}`;
+  }
 
-  get currentIndex() {
-    return this.items.findIndex((item) => (this.itemKey ? item[this.itemKey] : item) === this.value);
+  get itemsWithNames() {
+    return this.items.map((item, n) => {
+      return {
+        ...item,
+        $itemName: this.disabled ? null : `item${this.name}${n}`
+      };
+    });
   }
 
-  mounted() {
+  mounted () {
+    this.$nextTick(() => this.init());
   }
 
-  async onSelect(item, index) {
-    const ramjet = await import('ramjet');
-    ramjet.transform(this.$refs.button[this.currentIndex], this.$refs.button[index], {
-      duration: 200
-    });
+  get itemValue () {
+    if (typeof this.value === 'undefined' || this.value === null) {
+      return this.value;
+    }
+    return typeof this.value === 'object' ? this.value[this.itemKey] : this.value;
+  }
+
+  isChecked (item) {
+    return this.itemValue === item[this.itemKey];
+  }
+
+  @Watch('value')
+  @Watch('items')
+  onItemsChanged() {
+    this.$nextTick(() => this.init());
+  }
+
+  get isUndefined () {
+    return typeof this.value === 'undefined';
+  }
+
+  init() {
+    const INDIVIDUAL_SEGMENT_SELECTOR = '.option input';
+    const BACKGROUND_PILL_SELECTOR = '.selection';
+
+    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.$el);
+
+    function updatePillPosition (el) {
+      forEachElement(el, INDIVIDUAL_SEGMENT_SELECTOR, (elem, index) => {
+        if (elem.checked) {
+          moveBackgroundPillToElement(el, elem, index);
+        }
+      })
+    }
+
+    function moveBackgroundPillToElement (el, elem, index) {
+      const slider = el.querySelector(BACKGROUND_PILL_SELECTOR);
+      if (slider) {
+        slider.style.transform = 'translateX(' + (elem.offsetWidth * index) + 'px)';
+      }
+    }
+
+    function forEachElement(el, className, fn) {
+      Array.from(el.querySelectorAll(className)).forEach(fn);
+    }
+  }
 
-    this.$emit('input', this.itemKey ? item[this.itemKey] : item);
+  onItemChanged (item) {
+    this.$emit('input', this.returnObject ? item : item[this.itemKey]);
   }
 }
 </script>

package/src/components/select/Select.vue

@@ -729,7 +729,7 @@ export default {
       _value: [], // Internal value managed by Vue Select if no `value` prop is passed
     }
   },
-  inject: { itemLabel: { default: null }, appendContext: { default: null } },
+  inject: { itemLabel: { default: null } },
   computed: {
     /**
      * Determine if the component needs to

package/src/directives/appendToBody.js

@@ -9,8 +9,7 @@ export default {
       } = context.$refs.toggle.getBoundingClientRect();
 
       const { calculatePosition } = context;
-      const { appendContext } = context;
-      const rootEl = appendContext && appendContext();
+      const rootEl = el.closest('.itf-append-context') || document.body;
       if (rootEl) {
         let {
           top: parentTop,