vue-slide-toggle/dist/vue-slide-toggle.es.js

Vue component for like jQuery slideUp / slideDown animations

/*!
 * vue-slide-toggle v1.1.1
 * (c) 2018-present Nikita Nafranets <eddimensi@gmail.com>
 * Released under the MIT License.
 */
var SlideToggle = {
  name: 'VueSlideToggle',
  props: {
    open: Boolean,
    duration: {
      type: Number,
      default: 300
    },
    tag: {
      type: String,
      default: 'div'
    }
  },
  data: function data() {
    return {
      scrollHeight: 0,
      doneOpenTransition: false,
      innerOpen: this.open
    };
  },
  mounted: function mounted() {
    window.addEventListener('resize', this.getHeight); // recalc height on resize window

    this.getHeight();
  },
  updated: function updated() {
    this.getHeight(); // recalc for dynamic change content
  },
  destroyed: function destroyed() {
    window.removeEventListener('resize', this.getHeight);
  },
  watch: {
    open: function open(bool) {
      var _this = this;

      if (!bool) {
        this.getHeight();
        this.doneOpenTransition = false;
        this.$nextTick().then(function () {
          _this.innerOpen = false;
        });
      } else {
        this.innerOpen = true;
      }
    }
  },
  computed: {
    style: function style() {
      if (this.innerOpen && this.doneOpenTransition) return null;
      var heightSize = this.innerOpen ? this.scrollHeight : 0;
      return {
        overflow: 'hidden',
        transitionProperty: 'height',
        height: "".concat(heightSize, "px"),
        transitionDuration: "".concat(this.duration, "ms")
      };
    }
  },
  methods: {
    getHeight: function getHeight() {
      var container = this.$refs.container;
      this.scrollHeight = container.scrollHeight;
    },
    handleTransition: function handleTransition() {
      if (this.innerOpen) {
        this.doneOpenTransition = true;
      }
    }
  },
  render: function render(h) {
    return h(this.tag, {
      style: this.style,
      ref: 'container',
      on: {
        transitionend: this.handleTransition
      }
    }, this.$slots.default);
  }
};

function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component('VueSlideToggle', SlideToggle);
}

var plugin = {
  install: install
};
var VueSlideToggle = SlideToggle;
var GlobalVue = null;

if (typeof window !== 'undefined') {
  GlobalVue = window.Vue;
}

if (GlobalVue) {
  GlobalVue.use(plugin);
}

export default plugin;
export { VueSlideToggle };