@itfin/components 1.0.21 → 1.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.0.21",
+  "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

@@ -36,8 +36,6 @@ $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;

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

@@ -1,5 +1,5 @@
 /* Loading Spinner */
-.itf-select .itf-spinner {
+.itf-select .itf-select__loader {
   opacity: 0;
   transform: translateZ(0);
   transition: opacity .1s;
@@ -11,6 +11,6 @@
 }
 
 /* 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/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/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>

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

@@ -1,5 +1,6 @@
 import { storiesOf } from '@storybook/vue';
 import itfDatePicker from './DatePicker.vue';
+import itfMonthPicker from './MonthPicker.vue';
 import itfDatePickerInline from './DatePickerInline.vue';
 import itfDateRangePicker from './DateRangePicker.vue';
 import itfDateRangePickerInline from './DateRangePickerInline.vue';
@@ -10,6 +11,7 @@ storiesOf('Common', module)
     components: {
       itfApp,
       itfDatePicker,
+      itfMonthPicker,
       itfDateRangePicker,
       itfDatePickerInline,
       itfDateRangePickerInline
@@ -67,6 +69,9 @@ storiesOf('Common', module)
 
         <itf-date-range-picker-inline v-model="dateRange"></itf-date-range-picker-inline>
 
+        <h2>Month</h2>
+
+        <itf-month-picker :value="date" v-model.lazy="date"></itf-month-picker>
       </itf-app>
     </div>`,
   }));

package/src/components/modal/Modal.vue

@@ -36,7 +36,7 @@
 }
 </style>
 <script>
-import { Vue, Component, Prop, Watch, PropSync, Provide } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch, PropSync, Inject } from 'vue-property-decorator';
 import itfButton from '../button/Button';
 
 let globalModalIndex = 0; // base modal z-index
@@ -52,6 +52,8 @@ export default @Component({
   }
 })
 class itfModal extends Vue {
+  @Inject({ default: null }) globalApp;
+
   @PropSync('visible') value;
   @Prop({ type: String }) title;
   @Prop({ type: String, default: '', validator: (value) => ['', 'sm', 'lg', 'xl'].includes(value) }) size;
@@ -105,7 +107,9 @@ class itfModal extends Vue {
     }
     if (this.appendToBody && this.$el instanceof Node && this.$el.parentNode) {
       this.$el.parentNode.removeChild(this.$el);
-      document.body.appendChild(this.$el);
+      const elContext = (this.globalApp && this.globalApp.$el) || document.body;
+      console.info(elContext);
+      elContext.appendChild(this.$el);
     }
     const { default: Modal } = await import('bootstrap/js/src/modal.js');
     this.modalEl = new Modal(this.$el);

package/src/components/popover/Popover.vue

@@ -60,7 +60,7 @@ class itfPopover extends Vue {
   @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;
-  @Prop({ type: String }) customClass;
+  @Prop({ type: String, default: '' }) customClass;
 
   modalId = '';
   modalEl = null;

package/src/components/select/Select.vue

@@ -82,7 +82,7 @@
         </slot>
 
         <slot name="spinner" v-bind="scope.spinner">
-          <div v-show="mutableLoading" class="itf-spinner">Loading...</div>
+          <div v-show="mutableLoading" class="itf-spinner itf-select__loader">Loading...</div>
         </slot>
       </div>
     </div>

package/src/components/table/Table.vue

@@ -44,14 +44,13 @@
             </div>
           </div>
         </div>
-<!--        <v-progress-linear v-if="loading" :height="3" class="com-table-loading" indeterminate />-->
       </div>
       <div v-show="rows && rows.length" class="itf-table__rows" ref="scrollContainer2">
         <div class="itf-table__row"
              :class="{'itf-table__summary-row': row.summary}"
              v-for="(row, r) in rows"
              :key="r"
-             @click="$emit('row-click', { row, index: r })">
+             @click="!row.summary && $emit('row-click', { row, index: r })">
           <div
             class="itf-table__cell"
             :class="{'itf-table__cell--sorted': sortedColumns[k]}"
@@ -137,7 +136,10 @@ html {
 
     & > .itf-table__row {
       display: contents;
-      cursor: var(--itf-table-row-cursor);
+
+      &:not(.itf-table__summary-row) {
+        cursor: var(--itf-table-row-cursor);
+      }
     }
   }
 
@@ -145,9 +147,13 @@ html {
     background-color: var(--itf-table-strip-color);
   }
 
+  &__cell.itf-table__cell--sorted {
+    background-color: var(--itf-table-sorted-color);
+  }
   &--hoverable &__rows{
-    & > .itf-table__row {
-      &:hover > div{
+    & > .itf-table__row:not(.itf-table__summary-row) {
+      &:hover > .itf-table__cell,
+      &:hover > .itf-table__cell--sorted {
         background-color: var(--itf-table-hover-color);
       }
     }
@@ -171,9 +177,6 @@ html {
     }
   }
 
-  &__cell.itf-table__cell--sorted {
-    background-color: var(--itf-table-sorted-color) !important;
-  }
   &__header {
     background-color: var(--itf-table-background-color);
     grid-row: header;
@@ -422,7 +425,7 @@ class itfTable extends Vue {
     function initSyncScroll(el1, el2, stuck, unstuck) {
       function isScrolledEnd(el) {
         return el.scrollWidth === el.getBoundingClientRect().width // якщо контейнер менший ширини екрану
-            || el.scrollLeft === el.scrollWidth - el.getBoundingClientRect().width; // якщо контейнер більший ширини екрану
+          || el.scrollLeft === el.scrollWidth - el.getBoundingClientRect().width; // якщо контейнер більший ширини екрану
       }
 
       function func1() {

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

@@ -3,7 +3,7 @@
   <div class="itf-text-field input-group with-addon addon-start">
     <div class="addon" v-if="prependIcon">
       <slot name="addon">
-        <itf-icon :name="prependIcon" />
+        <itf-icon :name="prependIcon"/>
       </slot>
     </div>
 
@@ -13,7 +13,7 @@
       class="itf-text-field__input form-control"
       type="text"
       :value="value"
-      @input="$emit('input', $event.target.value)"
+      @input="onInput($event.target.value)"
     />
 
   </div>
@@ -33,6 +33,7 @@
 <script>
 import { Vue, Component, Model, Inject, Prop } from 'vue-property-decorator';
 import itfIcon from '../icon/Icon';
+import { debounce } from '../../helpers/debounce';
 
 export default @Component({
   name: 'itfTextField',
@@ -45,6 +46,13 @@ class itfTextField extends Vue {
   @Model('input') value;
   @Prop(String) prependIcon;
   @Prop(String) placeholder;
+  @Prop({ type: [Number, String], default: 0 }) delayInput;
+
+  onInput = null;
+
+  created() {
+    this.onInput = debounce((val) => this.$emit('input', val), Number(this.delayInput));
+  }
 
   isInvalid() {
     return this.itemLabel && this.itemLabel.isHasError();

package/src/directives/sticky.js

@@ -0,0 +1,298 @@
+const namespace = 'itf-sticky';
+const events = [
+  'resize',
+  'scroll',
+  'touchstart',
+  'touchmove',
+  'touchend',
+  'pageshow',
+  'load',
+];
+
+const batchStyle = (el, style = {}, className = {}) => {
+  for (let k in style) {
+    el.style[k] = style[k];
+  }
+  for (let k in className) {
+    if (className[k] && !el.classList.contains(k)) {
+      el.classList.add(k);
+    } else if (!className[k] && el.classList.contains(k)) {
+      el.classList.remove(k);
+    }
+  }
+};
+
+class Sticky {
+  constructor(el, vm) {
+    this.el = el;
+    this.vm = vm;
+    this.unsubscribers = [];
+    this.isPending = false;
+    this.state = {
+      isTopSticky: null,
+      isBottomSticky: null,
+      height: null,
+      width: null,
+      xOffset: null,
+    };
+
+    this.lastState = {
+      top: null,
+      bottom: null,
+      sticked: false,
+    };
+
+    const offset = this.getAttribute('sticky-offset') || {};
+    const side = this.getAttribute('sticky-side') || 'top';
+    const zIndex = this.getAttribute('sticky-z-index') || '10';
+    const onStick = this.getAttribute('on-stick') || null;
+
+    this.options = {
+      topOffset: Number(offset.top) || 0,
+      bottomOffset: Number(offset.bottom) || 0,
+      shouldTopSticky: side === 'top' || side === 'both',
+      shouldBottomSticky: side === 'bottom' || side === 'both',
+      zIndex: zIndex,
+      onStick: onStick,
+    };
+  }
+
+  doBind() {
+    if (this.unsubscribers.length > 0) {
+      return;
+    }
+    const { el, vm } = this;
+    vm.$nextTick(() => {
+      this.placeholderEl = document.createElement('div');
+      this.containerEl = this.getContainerEl();
+      el.parentNode.insertBefore(this.placeholderEl, el);
+      events.forEach(event => {
+        const fn = this.update.bind(this);
+        this.unsubscribers.push(() => window.removeEventListener(event, fn));
+        this.unsubscribers.push(() =>
+          this.containerEl.removeEventListener(event, fn),
+        );
+        window.addEventListener(event, fn, { passive: true });
+        this.containerEl.addEventListener(event, fn, { passive: true });
+      });
+    });
+  }
+
+  doUnbind() {
+    this.unsubscribers.forEach(fn => fn());
+    this.unsubscribers = [];
+    this.resetElement();
+  }
+
+  update() {
+    if (!this.isPending) {
+      requestAnimationFrame(() => {
+        this.isPending = false;
+        this.recomputeState();
+        this.updateElements();
+      });
+      this.isPending = true;
+    }
+  }
+
+  isTopSticky() {
+    if (!this.options.shouldTopSticky) return false;
+    const fromTop = this.state.placeholderElRect.top;
+    const fromBottom = this.state.containerElRect.bottom;
+
+    const topBreakpoint = this.options.topOffset;
+    const bottomBreakpoint = this.options.bottomOffset;
+
+    return fromTop <= topBreakpoint && fromBottom >= bottomBreakpoint;
+  }
+
+  isBottomSticky() {
+    if (!this.options.shouldBottomSticky) return false;
+    const fromBottom =
+      window.innerHeight - this.state.placeholderElRect.top - this.state.height;
+    const fromTop = window.innerHeight - this.state.containerElRect.top;
+
+    const topBreakpoint = this.options.topOffset;
+    const bottomBreakpoint = this.options.bottomOffset;
+
+    return fromBottom <= bottomBreakpoint && fromTop >= topBreakpoint;
+  }
+
+  recomputeState() {
+    this.state = Object.assign({}, this.state, {
+      height: this.getHeight(),
+      width: this.getWidth(),
+      xOffset: this.getXOffset(),
+      placeholderElRect: this.getPlaceholderElRect(),
+      containerElRect: this.getContainerElRect(),
+    });
+    this.state.isTopSticky = this.isTopSticky();
+    this.state.isBottomSticky = this.isBottomSticky();
+  }
+
+  fireEvents() {
+    if (
+      typeof this.options.onStick === 'function' &&
+      (this.lastState.top !== this.state.isTopSticky ||
+        this.lastState.bottom !== this.state.isBottomSticky ||
+        this.lastState.sticked !==
+        (this.state.isTopSticky || this.state.isBottomSticky))
+    ) {
+      this.lastState = {
+        top: this.state.isTopSticky,
+        bottom: this.state.isBottomSticky,
+        sticked: this.state.isBottomSticky || this.state.isTopSticky,
+      };
+      this.options.onStick(this.lastState);
+    }
+  }
+
+  updateElements() {
+    const placeholderStyle = { paddingTop: 0 };
+    const elStyle = {
+      position: 'static',
+      top: 'auto',
+      bottom: 'auto',
+      left: 'auto',
+      width: 'auto',
+      zIndex: this.options.zIndex,
+    };
+    const placeholderClassName = { 'vue-sticky-placeholder': true };
+    const elClassName = {
+      'vue-sticky-el': true,
+      'top-sticky': false,
+      'bottom-sticky': false,
+    };
+
+    if (this.state.isTopSticky) {
+      elStyle.position = 'fixed';
+      elStyle.top = this.options.topOffset + 'px';
+      elStyle.left = this.state.xOffset + 'px';
+      elStyle.width = this.state.width + 'px';
+      const bottomLimit =
+        this.state.containerElRect.bottom -
+        this.state.height -
+        this.options.bottomOffset -
+        this.options.topOffset;
+      if (bottomLimit < 0) {
+        elStyle.top = bottomLimit + this.options.topOffset + 'px';
+      }
+      placeholderStyle.paddingTop = this.state.height + 'px';
+      elClassName['top-sticky'] = true;
+    } else if (this.state.isBottomSticky) {
+      elStyle.position = 'fixed';
+      elStyle.bottom = this.options.bottomOffset + 'px';
+      elStyle.left = this.state.xOffset + 'px';
+      elStyle.width = this.state.width + 'px';
+      const topLimit =
+        window.innerHeight -
+        this.state.containerElRect.top -
+        this.state.height -
+        this.options.bottomOffset -
+        this.options.topOffset;
+      if (topLimit < 0) {
+        elStyle.bottom = topLimit + this.options.bottomOffset + 'px';
+      }
+      placeholderStyle.paddingTop = this.state.height + 'px';
+      elClassName['bottom-sticky'] = true;
+    } else {
+      placeholderStyle.paddingTop = 0;
+    }
+
+    batchStyle(this.el, elStyle, elClassName);
+    batchStyle(this.placeholderEl, placeholderStyle, placeholderClassName);
+
+    this.fireEvents();
+  }
+
+  resetElement() {
+    ['position', 'top', 'bottom', 'left', 'width', 'zIndex'].forEach(attr => {
+      this.el.style.removeProperty(attr);
+    });
+    this.el.classList.remove('bottom-sticky', 'top-sticky');
+    const { parentNode } = this.placeholderEl;
+    if (parentNode) {
+      parentNode.removeChild(this.placeholderEl);
+    }
+  }
+
+  getContainerEl() {
+    let node = this.el.parentNode;
+    while (
+      node &&
+      node.tagName !== 'HTML' &&
+      node.tagName !== 'BODY' &&
+      node.nodeType === 1
+      ) {
+      if (node.hasAttribute('sticky-container')) {
+        return node;
+      }
+      node = node.parentNode;
+    }
+    return this.el.parentNode;
+  }
+
+  getXOffset() {
+    return this.placeholderEl.getBoundingClientRect().left;
+  }
+
+  getWidth() {
+    return this.placeholderEl.getBoundingClientRect().width;
+  }
+
+  getHeight() {
+    return this.el.getBoundingClientRect().height;
+  }
+
+  getPlaceholderElRect() {
+    return this.placeholderEl.getBoundingClientRect();
+  }
+
+  getContainerElRect() {
+    return this.containerEl.getBoundingClientRect();
+  }
+
+  getAttribute(name) {
+    const expr = this.el.getAttribute(name);
+    let result = undefined;
+    if (expr) {
+      if (this.vm[expr]) {
+        result = this.vm[expr];
+      } else {
+        try {
+          result = eval(`(${expr})`);
+        } catch (error) {
+          result = expr;
+        }
+      }
+    }
+    return result;
+  }
+}
+
+export default {
+  inserted(el, bind, vnode) {
+    if (typeof bind.value === 'undefined' || bind.value) {
+      el[namespace] = new Sticky(el, vnode.context);
+      el[namespace].doBind();
+    }
+  },
+  unbind(el, bind, vnode) {
+    if (el[namespace]) {
+      el[namespace].doUnbind();
+      el[namespace] = undefined;
+    }
+  },
+  componentUpdated(el, bind, vnode) {
+    if (typeof bind.value === 'undefined' || bind.value) {
+      if (!el[namespace]) {
+        el[namespace] = new Sticky(el, vnode.context);
+      }
+      el[namespace].doBind();
+    } else {
+      if (el[namespace]) {
+        el[namespace].doUnbind();
+      }
+    }
+  },
+};