@animxyz/vue3/dist/VueAnimXyz.esm.js

AnimXYZ is a composable animation library that makes your site shine

/**
   * VueAnimXyz v0.6.6
   * Copyright (c) 2020-present Ingram Projects
   * Released under the MIT License.
   * https://animxyz.com
   */
  
import { h, Transition, TransitionGroup } from 'vue';
import clsx from 'clsx';
import { getTransitionRawChildren } from '@vue/runtime-core';

function deleteUndefined (obj) {
  Object.keys(obj).forEach(function (key) {
    if (obj[key] === undefined) {
      delete obj[key];
    }
  });
}

function _typeof(obj) {
  "@babel/helpers - typeof";

  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function (obj) {
      return typeof obj;
    };
  } else {
    _typeof = function (obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    };
  }

  return _typeof(obj);
}

function getXyzDurationForMode (mode, duration) {
  switch (_typeof(duration)) {
    case 'number':
      return duration;

    case 'string':
      return duration;

    case 'object':
      if (duration === null) return null;
      return duration[mode];
  }

  return null;
}

function getXyzElementMode (el) {
  if (el.classList.contains('xyz-appear')) {
    return 'appear';
  }

  if (el.classList.contains('xyz-in')) {
    return 'in';
  }

  if (el.classList.contains('xyz-out')) {
    return 'out';
  }

  return null;
}

function clearXyzElementProperties(el) {
  if (el._xyzAppearObserver) {
    el._xyzAppearObserver.disconnect();
  }

  if (el._xyzAnimTimeout) {
    clearTimeout(el._xyzAnimTimeout);
  }

  el.removeEventListener('animationend', el._xyzAnimEnd);
  el.removeEventListener('animationcancelled', el._xyzAnimEnd);
  delete el._xyzAppearObserver;
  delete el._xyzAnimTimeout;
  delete el._xyzAnimEnd;
}

function getXyzAnimationHook (duration, appearVisible) {
  return function (el, done) {
    clearXyzElementProperties(el);

    function xyzAnimDone() {
      clearXyzElementProperties(el);
      done();
    }

    var mode = getXyzElementMode(el);

    function runAnim() {
      var modeDuration = getXyzDurationForMode(mode, duration);

      if (typeof modeDuration === 'number') {
        el._xyzAnimTimeout = setTimeout(xyzAnimDone, modeDuration);
        return;
      }

      var xyzModeKeyframes = "xyz-".concat(mode, "-keyframes");
      var xyzEls = new Set([el]);

      if (modeDuration === 'auto') {
        var xyzNestedEls = el.querySelectorAll(".xyz-nested, .xyz-".concat(mode, "-nested"));
        xyzNestedEls.forEach(xyzEls.add, xyzEls);
      }

      function removeXyzEl(xyzEl) {
        xyzEls.delete(xyzEl);

        if (xyzEls.size === 0) {
          xyzAnimDone();
        }
      } // After one tick remove any elements that are dont have active animations


      el._xyzAnimTimeout = setTimeout(function () {
        xyzEls.forEach(function (xyzEl) {
          // Remove if element isnt visible
          var visible = xyzEl.offsetParent || xyzEl.getClientRects().length;

          if (!visible) {
            removeXyzEl(xyzEl);
          } // Remove if element has xyz animation overridden


          var animationName = window.getComputedStyle(xyzEl).getPropertyValue('animation-name');

          if (animationName.indexOf(xyzModeKeyframes) === -1) {
            removeXyzEl(xyzEl);
          }
        });
      });

      el._xyzAnimEnd = function (event) {
        if (event.animationName === xyzModeKeyframes) {
          removeXyzEl(event.target);
        }
      };

      el.addEventListener('animationend', el._xyzAnimEnd, false);
      el.addEventListener('animationcancelled', el._xyzAnimEnd, false);
    }

    if (mode === 'appear' && appearVisible) {
      var observerOptions = Object.assign({}, appearVisible);
      el.classList.add('xyz-paused-all');
      el._xyzAppearObserver = new IntersectionObserver(function (entries, observer) {
        entries.forEach(function (entry) {
          if (entry.isIntersecting) {
            el.classList.remove('xyz-paused-all');
            observer.disconnect();
            runAnim();
          }
        });
      }, observerOptions);

      el._xyzAppearObserver.observe(el);
    } else {
      runAnim();
    }
  };
}

var xyzTransitionClasses = {
  appearFrom: 'xyz-appear-from',
  appearActive: 'xyz-appear',
  appearTo: 'xyz-appear-to',
  inFrom: 'xyz-in-from',
  inActive: 'xyz-in',
  inTo: 'xyz-in-to',
  outFrom: 'xyz-out-from',
  outActive: 'xyz-out',
  outTo: 'xyz-out-to'
};

var xyzTransitionProps = {
  appear: Boolean,
  appearVisible: [Boolean, Object],
  duration: [Number, String, Object],
  mode: String,
  appearFromClass: String,
  appearActiveClass: String,
  appearToClass: String,
  enterFromClass: String,
  enterActiveClass: String,
  enterToClass: String,
  leaveFromClass: String,
  leaveActiveClass: String,
  leaveToClass: String
};
var xyzTransitionGroupProps = Object.assign({}, xyzTransitionProps, {
  tag: {
    type: String,
    default: 'div'
  },
  moveClass: String
});
function mergeData() {
  var data1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var data2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  return Object.assign({}, data1, data2, {
    style: Object.assign({}, data1 === null || data1 === void 0 ? void 0 : data1.style, data2 === null || data2 === void 0 ? void 0 : data2.style),
    class: clsx(data1 === null || data1 === void 0 ? void 0 : data1.class, data2 === null || data2 === void 0 ? void 0 : data2.class)
  });
}
function getXyzTransitionData(data) {
  deleteUndefined(data);
  data.appear = Boolean(data.appear || data.appearVisible);
  var appear = data.appear,
      appearVisible = data.appearVisible,
      duration = data.duration;
  var animationHook = getXyzAnimationHook(duration, appearVisible);
  var transitionData = {
    css: true,
    type: 'animation',
    appearFromClass: xyzTransitionClasses.appearFrom,
    appearActiveClass: xyzTransitionClasses.appearActive,
    appearToClass: xyzTransitionClasses.appearTo,
    enterFromClass: xyzTransitionClasses.inFrom,
    enterActiveClass: xyzTransitionClasses.inActive,
    enterToClass: xyzTransitionClasses.inTo,
    leaveFromClass: xyzTransitionClasses.outFrom,
    leaveActiveClass: xyzTransitionClasses.outActive,
    leaveToClass: xyzTransitionClasses.outTo,
    onEnter: animationHook,
    onLeave: animationHook
  };

  if (appear) {
    transitionData.onAppear = animationHook;
  }

  var mergedData = mergeData(transitionData, data);
  delete mergedData.appearVisible;
  delete mergedData.duration;
  return mergedData;
}

function XyzTransition(props, context) {
  var data = getXyzTransitionData(Object.assign({}, context.attrs, props));
  return h(Transition, data, context.slots);
}

XyzTransition.props = xyzTransitionProps;

function XyzTransitionGroup(props, context) {
  var data = getXyzTransitionData(Object.assign({}, context.attrs, props));

  function childrenFn() {
    var children = context.slots.default ? context.slots.default() : [];
    var rawChildren = getTransitionRawChildren(children);
    rawChildren.forEach(function (node, index) {
      node.props = mergeData({
        style: {
          '--xyz-index': index,
          '--xyz-index-rev': rawChildren.length - index - 1
        }
      }, node.props);
    });
    return children;
  }

  return h(TransitionGroup, data, childrenFn);
}

XyzTransitionGroup.props = xyzTransitionGroupProps;

function updateDirective(el, _ref) {
  var value = _ref.value;
  el.setAttribute('xyz', clsx(el._xyzOriginal, value));
}

var xyz = {
  beforeMount: function beforeMount(el) {
    el._xyzOriginal = el.getAttribute('xyz');
    updateDirective.apply(void 0, arguments);
  },
  updated: updateDirective
};

var VueAnimXyz = {
  install: function install(app) {
    app.component('XyzTransition', XyzTransition);
    app.component('XyzTransitionGroup', XyzTransitionGroup);
    app.directive('xyz', xyz);
  }
};

export default VueAnimXyz;
export { XyzTransition, XyzTransitionGroup, xyz };