vue-flipper/dist/vue-flipper.js

A component to flip elements with a nice transition.

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.VueFlipper = factory());
}(this, (function () { 'use strict';

  /**
   * Curries a predicate function to check if value matches pattern.
   * @param {RegExp} pattern
   * @returns {(value: string) => boolean}
   */
  var isPattern = function (pattern) { return function (value) { return pattern.test(value); }; };
  /**
   * Check if value is a CSS Length.
   */


  var isCSSLength = isPattern(/^\+?(\d*\.)?\d+(em|ex|ch|rem|vh|vw|vmin|vmax|px|mm|cm|in|pt|pc|%)$/i);
  /**
   * Check if value is a CSS Time.
   */

  var isCSSTime = isPattern(/^\+?(\d*\.)?\d+(ms|s)$/i);

  //
  var script = {
    name: 'Flipper',
    props: {
      flipped: Boolean,
      width: {
        type: String,
        default: '100%',
        validator: isCSSLength
      },
      height: {
        type: String,
        default: '100%',
        validator: isCSSLength
      },
      duration: {
        type: String,
        default: '0.5s',
        validator: isCSSTime
      },
      transition: {
        type: String,
        default: 'ease-in'
      }
    },
    computed: {
      styles: function styles() {
        return {
          wrapper: {
            width: this.width,
            height: this.height
          },
          face: {
            transitionDuration: this.duration,
            transitionTimingFunction: this.transition
          }
        };
      }

    }
  };

  /* script */
              var __vue_script__ = script;
  /* template */
  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({class:['Flipper', { 'Flipper--flipped': _vm.flipped }],style:(_vm.styles.wrapper)},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"Flipper__face Flipper__face--front",style:(_vm.styles.face)},[_vm._t("front")],2),_vm._v(" "),_c('div',{staticClass:"Flipper__face Flipper__face--back",style:(_vm.styles.face)},[_vm._t("back")],2)])};
  var __vue_staticRenderFns__ = [];

    /* style */
    var __vue_inject_styles__ = undefined;
    /* scoped */
    var __vue_scope_id__ = undefined;
    /* module identifier */
    var __vue_module_identifier__ = undefined;
    /* functional template */
    var __vue_is_functional_template__ = false;
    /* component normalizer */
    function __vue_normalize__(
      template, style, script$$1,
      scope, functional, moduleIdentifier,
      createInjector, createInjectorSSR
    ) {
      var component = (typeof script$$1 === 'function' ? script$$1.options : script$$1) || {};

      // For security concerns, we use only base name in production mode.
      component.__file = "Flipper.vue";

      if (!component.render) {
        component.render = template.render;
        component.staticRenderFns = template.staticRenderFns;
        component._compiled = true;

        if (functional) { component.functional = true; }
      }

      component._scopeId = scope;

      return component
    }
    /* style inject */
    
    /* style inject SSR */
    

    
    var Flipper = __vue_normalize__(
      { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
      __vue_inject_styles__,
      __vue_script__,
      __vue_scope_id__,
      __vue_is_functional_template__,
      __vue_module_identifier__,
      undefined,
      undefined
    );

  return Flipper;

})));