@vuesax-alpha/nightly/es/directives/animate/index.mjs.map

A Component Library for Vue 3

{"version":3,"file":"index.mjs","sources":["../../../../../packages/directives/animate/index.ts"],"sourcesContent":["import { isNumber, isString } from 'lodash-unified'\nimport type { DirectiveBinding, ObjectDirective } from 'vue'\n\nconst animateCssPrefix = 'animate__'\n\ntype AnimateName = string\n\nexport type AnimateOptions = {\n  name: AnimateName\n\n  /**\n   * Duration of the animation in milliseconds.\n   */\n  duration?: number\n\n  /**\n   * Delay in milliseconds before the animation starts.\n   *\n   * @default 0\n   */\n  delay?: number\n  /**\n   * Number of times to repeat the animation.\n   *\n   * @default 1\n   */\n  repeat?: number | 'infinite'\n\n  type?: 'transition' | 'animation'\n}\n\nexport type AnimateWithInOut = {\n  in: AnimateOptions\n  out: AnimateOptions\n}\n\nexport type AnimateDirectiveOptions =\n  | AnimateName\n  | AnimateOptions\n  | AnimateWithInOut\n\nconst animated = (element: HTMLElement, animation: string) => {\n  const animationName = `${animateCssPrefix}${animation}`\n\n  element.classList.add(`${animateCssPrefix}animated`, animationName)\n\n  function handleAnimationEnd(event: AnimationEvent) {\n    event.stopPropagation()\n    element.classList.remove(`${animateCssPrefix}animated`, animationName)\n  }\n\n  element.addEventListener('animationend', handleAnimationEnd, { once: true })\n}\n\nconst Animate: ObjectDirective<HTMLElement, AnimateDirectiveOptions> = {\n  beforeMount(\n    element: HTMLElement,\n    binding: DirectiveBinding<AnimateDirectiveOptions>\n  ) {\n    const value = binding.value\n    let animationName = ''\n\n    // check value is a onject with type AnimateWithInOut\n    if (isString(value)) {\n      animationName = value\n    } else {\n      let options: AnimateOptions\n      if ('in' in value) {\n        options = value.in\n      } else {\n        options = value\n      }\n\n      const { name, delay, duration, repeat } = options\n\n      if (isNumber(duration)) {\n        element.style.setProperty('--animate-duration', `${duration}ms`)\n      }\n      if (isNumber(delay)) {\n        element.style.setProperty('--animate-delay', `${delay}ms`)\n      }\n      if (isNumber(repeat)) {\n        element.style.setProperty('--animate-repeat', `${repeat}`)\n      }\n      animationName = name\n    }\n\n    animated(element, animationName)\n  },\n}\n\nexport default Animate\n"],"names":[],"mappings":";;AAGA,MAAM,gBAAmB,GAAA,WAAA,CAAA;AAsCzB,MAAM,QAAA,GAAW,CAAC,OAAA,EAAsB,SAAsB,KAAA;AAC5D,EAAM,MAAA,aAAA,GAAgB,GAAG,gBAAmB,CAAA,EAAA,SAAA,CAAA,CAAA,CAAA;AAE5C,EAAA,OAAA,CAAQ,SAAU,CAAA,GAAA,CAAI,CAAG,EAAA,gBAAA,CAAA,QAAA,CAAA,EAA4B,aAAa,CAAA,CAAA;AAElE,EAAA,SAAS,mBAAmB,KAAuB,EAAA;AACjD,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAA,OAAA,CAAQ,SAAU,CAAA,MAAA,CAAO,CAAG,EAAA,gBAAA,CAAA,QAAA,CAAA,EAA4B,aAAa,CAAA,CAAA;AAAA,GACvE;AAEA,EAAA,OAAA,CAAQ,iBAAiB,cAAgB,EAAA,kBAAA,EAAoB,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAC7E,CAAA,CAAA;AAEA,MAAM,OAAiE,GAAA;AAAA,EACrE,WAAA,CACE,SACA,OACA,EAAA;AACA,IAAA,MAAM,QAAQ,OAAQ,CAAA,KAAA,CAAA;AACtB,IAAA,IAAI,aAAgB,GAAA,EAAA,CAAA;AAGpB,IAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,MAAgB,aAAA,GAAA,KAAA,CAAA;AAAA,KACX,MAAA;AACL,MAAI,IAAA,OAAA,CAAA;AACJ,MAAA,IAAI,QAAQ,KAAO,EAAA;AACjB,QAAA,OAAA,GAAU,KAAM,CAAA,EAAA,CAAA;AAAA,OACX,MAAA;AACL,QAAU,OAAA,GAAA,KAAA,CAAA;AAAA,OACZ;AAEA,MAAA,MAAM,EAAE,IAAA,EAAM,KAAO,EAAA,QAAA,EAAU,QAAW,GAAA,OAAA,CAAA;AAE1C,MAAI,IAAA,QAAA,CAAS,QAAQ,CAAG,EAAA;AACtB,QAAA,OAAA,CAAQ,KAAM,CAAA,WAAA,CAAY,oBAAsB,EAAA,CAAA,EAAG,QAAY,CAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OACjE;AACA,MAAI,IAAA,QAAA,CAAS,KAAK,CAAG,EAAA;AACnB,QAAA,OAAA,CAAQ,KAAM,CAAA,WAAA,CAAY,iBAAmB,EAAA,CAAA,EAAG,KAAS,CAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAC3D;AACA,MAAI,IAAA,QAAA,CAAS,MAAM,CAAG,EAAA;AACpB,QAAA,OAAA,CAAQ,KAAM,CAAA,WAAA,CAAY,kBAAoB,EAAA,CAAA,EAAG,MAAQ,CAAA,CAAA,CAAA,CAAA;AAAA,OAC3D;AACA,MAAgB,aAAA,GAAA,IAAA,CAAA;AAAA,KAClB;AAEA,IAAA,QAAA,CAAS,SAAS,aAAa,CAAA,CAAA;AAAA,GACjC;AACF;;;;"}