tav-ui/es/packages/directives/src/ripple2.mjs.map

Tav UI

{"version":3,"file":"ripple2.mjs","sources":["../../../../../../packages/directives/src/ripple.ts"],"sourcesContent":["import type { Directive } from 'vue'\nexport interface RippleOptions {\n  event: string\n  transition: number\n}\n\nexport interface RippleProto {\n  background?: string\n  zIndex?: string\n}\n\nexport type EventType = Event & MouseEvent & TouchEvent\n\nconst options: RippleOptions = {\n  event: 'mousedown',\n  transition: 400,\n}\n\nconst RippleDirective: Directive & RippleProto = {\n  beforeMount: (el: HTMLElement, binding) => {\n    if (binding.value === false) return\n\n    const bg = el.getAttribute('ripple-background')\n    setProps(Object.keys(binding.modifiers), options)\n\n    const background = bg || RippleDirective.background\n    const zIndex = RippleDirective.zIndex\n\n    // @ts-ignore\n    el.addEventListener(options.event, (event: EventType) => {\n      rippler({\n        event,\n        el,\n        background,\n        zIndex,\n      })\n    })\n  },\n  updated(el, binding) {\n    if (!binding.value) {\n      el?.clearRipple?.()\n      return\n    }\n    const bg = el.getAttribute('ripple-background')\n    el?.setBackground?.(bg)\n  },\n}\n\nfunction rippler({\n  event,\n  el,\n  zIndex,\n  background,\n}: { event: EventType; el: HTMLElement } & RippleProto) {\n  const targetBorder = parseInt(getComputedStyle(el).borderWidth.replace('px', ''))\n  const clientX = event.clientX || event.touches[0].clientX\n  const clientY = event.clientY || event.touches[0].clientY\n\n  const rect = el.getBoundingClientRect()\n  const { left, top } = rect\n  const { offsetWidth: width, offsetHeight: height } = el\n  const { transition } = options\n  const dx = clientX - left\n  const dy = clientY - top\n  const maxX = Math.max(dx, width - dx)\n  const maxY = Math.max(dy, height - dy)\n  const style = window.getComputedStyle(el)\n  const radius = Math.sqrt(maxX * maxX + maxY * maxY)\n  const border = targetBorder > 0 ? targetBorder : 0\n\n  const ripple = document.createElement('div')\n  const rippleContainer = document.createElement('div')\n\n  // Styles for ripple\n  ripple.className = 'ripple'\n\n  Object.assign(ripple.style ?? {}, {\n    marginTop: '0px',\n    marginLeft: '0px',\n    width: '1px',\n    height: '1px',\n    transition: `all ${transition}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n    borderRadius: '50%',\n    pointerEvents: 'none',\n    position: 'relative',\n    zIndex: zIndex ?? '9999',\n    backgroundColor: background ?? 'rgba(0, 0, 0, 0.12)',\n  })\n\n  // Styles for rippleContainer\n  rippleContainer.className = 'ripple-container'\n  Object.assign(rippleContainer.style ?? {}, {\n    position: 'absolute',\n    left: `${0 - border}px`,\n    top: `${0 - border}px`,\n    height: '0',\n    width: '0',\n    pointerEvents: 'none',\n    overflow: 'hidden',\n  })\n\n  const storedTargetPosition =\n    el.style.position.length > 0 ? el.style.position : getComputedStyle(el).position\n\n  if (storedTargetPosition !== 'relative') {\n    el.style.position = 'relative'\n  }\n\n  rippleContainer.appendChild(ripple)\n  el.appendChild(rippleContainer)\n\n  Object.assign(ripple.style, {\n    marginTop: `${dy}px`,\n    marginLeft: `${dx}px`,\n  })\n\n  const {\n    borderTopLeftRadius,\n    borderTopRightRadius,\n    borderBottomLeftRadius,\n    borderBottomRightRadius,\n  } = style\n  Object.assign(rippleContainer.style, {\n    width: `${width}px`,\n    height: `${height}px`,\n    direction: 'ltr',\n    borderTopLeftRadius,\n    borderTopRightRadius,\n    borderBottomLeftRadius,\n    borderBottomRightRadius,\n  })\n\n  setTimeout(() => {\n    const wh = `${radius * 2}px`\n    Object.assign(ripple.style ?? {}, {\n      width: wh,\n      height: wh,\n      marginLeft: `${dx - radius}px`,\n      marginTop: `${dy - radius}px`,\n    })\n  }, 0)\n\n  function clearRipple() {\n    setTimeout(() => {\n      ripple.style.backgroundColor = 'rgba(0, 0, 0, 0)'\n    }, 250)\n\n    setTimeout(() => {\n      rippleContainer?.parentNode?.removeChild(rippleContainer)\n    }, 850)\n    el.removeEventListener('mouseup', clearRipple, false)\n    el.removeEventListener('mouseleave', clearRipple, false)\n    el.removeEventListener('dragstart', clearRipple, false)\n    setTimeout(() => {\n      let clearPosition = true\n      for (let i = 0; i < el.childNodes.length; i++) {\n        if ((el.childNodes[i] as Record<string, any>).className === 'ripple-container') {\n          clearPosition = false\n        }\n      }\n\n      if (clearPosition) {\n        el.style.position = storedTargetPosition !== 'static' ? storedTargetPosition : ''\n      }\n    }, options.transition + 260)\n  }\n\n  if (event.type === 'mousedown') {\n    el.addEventListener('mouseup', clearRipple, false)\n    el.addEventListener('mouseleave', clearRipple, false)\n    el.addEventListener('dragstart', clearRipple, false)\n  } else {\n    clearRipple()\n  }\n\n  ;(el as Record<string, any>).setBackground = (bgColor: string) => {\n    if (!bgColor) {\n      return\n    }\n    ripple.style.backgroundColor = bgColor\n  }\n}\n\nfunction setProps(modifiers: Record<string, any>, props: Record<string, any>) {\n  modifiers.forEach((item: Record<string, any>) => {\n    if (isNaN(Number(item))) props.event = item\n    else props.transition = item\n  })\n}\n\nexport default RippleDirective\n"],"names":[],"mappings":"AAAA,MAAM,OAAO,GAAG;AAChB,EAAE,KAAK,EAAE,WAAW;AACpB,EAAE,UAAU,EAAE,GAAG;AACjB,CAAC,CAAC;AACG,MAAC,eAAe,GAAG;AACxB,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,OAAO,KAAK;AAChC,IAAI,IAAI,OAAO,CAAC,KAAK,KAAK,KAAK;AAC/B,MAAM,OAAO;AACb,IAAI,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;AACpD,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC;AACtD,IAAI,MAAM,UAAU,GAAG,EAAE,IAAI,eAAe,CAAC,UAAU,CAAC;AACxD,IAAI,MAAM,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;AAC1C,IAAI,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK;AAClD,MAAM,OAAO,CAAC;AACd,QAAQ,KAAK;AACb,QAAQ,EAAE;AACV,QAAQ,UAAU;AAClB,QAAQ,MAAM;AACd,OAAO,CAAC,CAAC;AACT,KAAK,CAAC,CAAC;AACP,GAAG;AACH,EAAE,OAAO,CAAC,EAAE,EAAE,OAAO,EAAE;AACvB,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;AACxB,MAAM,EAAE,EAAE,WAAW,IAAI,CAAC;AAC1B,MAAM,OAAO;AACb,KAAK;AACL,IAAI,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;AACpD,IAAI,EAAE,EAAE,aAAa,GAAG,EAAE,CAAC,CAAC;AAC5B,GAAG;AACH,EAAE;AACF,SAAS,OAAO,CAAC;AACjB,EAAE,KAAK;AACP,EAAE,EAAE;AACJ,EAAE,MAAM;AACR,EAAE,UAAU;AACZ,CAAC,EAAE;AACH,EAAE,MAAM,YAAY,GAAG,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;AACpF,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;AAC5D,EAAE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;AAC5D,EAAE,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;AAC1C,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAC7B,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAC1D,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;AACjC,EAAE,MAAM,EAAE,GAAG,OAAO,GAAG,IAAI,CAAC;AAC5B,EAAE,MAAM,EAAE,GAAG,OAAO,GAAG,GAAG,CAAC;AAC3B,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,GAAG,EAAE,CAAC,CAAC;AACxC,EAAE,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC,CAAC;AACzC,EAAE,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAC5C,EAAE,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AACtD,EAAE,MAAM,MAAM,GAAG,YAAY,GAAG,CAAC,GAAG,YAAY,GAAG,CAAC,CAAC;AACrD,EAAE,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC/C,EAAE,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACxD,EAAE,MAAM,CAAC,SAAS,GAAG,QAAQ,CAAC;AAC9B,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,EAAE;AACpC,IAAI,SAAS,EAAE,KAAK;AACpB,IAAI,UAAU,EAAE,KAAK;AACrB,IAAI,KAAK,EAAE,KAAK;AAChB,IAAI,MAAM,EAAE,KAAK;AACjB,IAAI,UAAU,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,+BAA+B,CAAC;AAClE,IAAI,YAAY,EAAE,KAAK;AACvB,IAAI,aAAa,EAAE,MAAM;AACzB,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,MAAM,EAAE,MAAM,IAAI,MAAM;AAC5B,IAAI,eAAe,EAAE,UAAU,IAAI,qBAAqB;AACxD,GAAG,CAAC,CAAC;AACL,EAAE,eAAe,CAAC,SAAS,GAAG,kBAAkB,CAAC;AACjD,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,IAAI,EAAE,EAAE;AAC7C,IAAI,QAAQ,EAAE,UAAU;AACxB,IAAI,IAAI,EAAE,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,EAAE,CAAC;AAC3B,IAAI,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,EAAE,CAAC;AAC1B,IAAI,MAAM,EAAE,GAAG;AACf,IAAI,KAAK,EAAE,GAAG;AACd,IAAI,aAAa,EAAE,MAAM;AACzB,IAAI,QAAQ,EAAE,QAAQ;AACtB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,oBAAoB,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC;AAChH,EAAE,IAAI,oBAAoB,KAAK,UAAU,EAAE;AAC3C,IAAI,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;AACnC,GAAG;AACH,EAAE,eAAe,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;AACtC,EAAE,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;AAClC,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;AAC9B,IAAI,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;AACxB,IAAI,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;AACzB,GAAG,CAAC,CAAC;AACL,EAAE,MAAM;AACR,IAAI,mBAAmB;AACvB,IAAI,oBAAoB;AACxB,IAAI,sBAAsB;AAC1B,IAAI,uBAAuB;AAC3B,GAAG,GAAG,KAAK,CAAC;AACZ,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,EAAE;AACvC,IAAI,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;AACvB,IAAI,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;AACzB,IAAI,SAAS,EAAE,KAAK;AACpB,IAAI,mBAAmB;AACvB,IAAI,oBAAoB;AACxB,IAAI,sBAAsB;AAC1B,IAAI,uBAAuB;AAC3B,GAAG,CAAC,CAAC;AACL,EAAE,UAAU,CAAC,MAAM;AACnB,IAAI,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AACjC,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,EAAE;AACtC,MAAM,KAAK,EAAE,EAAE;AACf,MAAM,MAAM,EAAE,EAAE;AAChB,MAAM,UAAU,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC,EAAE,CAAC;AACpC,MAAM,SAAS,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC,EAAE,CAAC;AACnC,KAAK,CAAC,CAAC;AACP,GAAG,EAAE,CAAC,CAAC,CAAC;AACR,EAAE,SAAS,WAAW,GAAG;AACzB,IAAI,UAAU,CAAC,MAAM;AACrB,MAAM,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,kBAAkB,CAAC;AACxD,KAAK,EAAE,GAAG,CAAC,CAAC;AACZ,IAAI,UAAU,CAAC,MAAM;AACrB,MAAM,eAAe,EAAE,UAAU,EAAE,WAAW,CAAC,eAAe,CAAC,CAAC;AAChE,KAAK,EAAE,GAAG,CAAC,CAAC;AACZ,IAAI,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;AAC1D,IAAI,EAAE,CAAC,mBAAmB,CAAC,YAAY,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;AAC7D,IAAI,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;AAC5D,IAAI,UAAU,CAAC,MAAM;AACrB,MAAM,IAAI,aAAa,GAAG,IAAI,CAAC;AAC/B,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrD,QAAQ,IAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,kBAAkB,EAAE;AAC/D,UAAU,aAAa,GAAG,KAAK,CAAC;AAChC,SAAS;AACT,OAAO;AACP,MAAM,IAAI,aAAa,EAAE;AACzB,QAAQ,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,oBAAoB,KAAK,QAAQ,GAAG,oBAAoB,GAAG,EAAE,CAAC;AAC1F,OAAO;AACP,KAAK,EAAE,OAAO,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC;AACjC,GAAG;AACH,EAAE,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW,EAAE;AAClC,IAAI,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;AACvD,IAAI,EAAE,CAAC,gBAAgB,CAAC,YAAY,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;AAC1D,IAAI,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;AACzD,GAAG,MAAM;AACT,IAAI,WAAW,EAAE,CAAC;AAClB,GAAG;AACH,EAAE,CAAC;AACH,EAAE,EAAE,CAAC,aAAa,GAAG,CAAC,OAAO,KAAK;AAClC,IAAI,IAAI,CAAC,OAAO,EAAE;AAClB,MAAM,OAAO;AACb,KAAK;AACL,IAAI,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,OAAO,CAAC;AAC3C,GAAG,CAAC;AACJ,CAAC;AACD,SAAS,QAAQ,CAAC,SAAS,EAAE,KAAK,EAAE;AACpC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK;AAC9B,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAC3B,MAAM,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;AACzB;AACA,MAAM,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC;AAC9B,GAAG,CAAC,CAAC;AACL;;;;"}