xdesign-vue-next
Version:
XDesign Component for vue-next
1 lines • 8.39 kB
Source Map (JSON)
{"version":3,"file":"useRipple.mjs","sources":["../../src/hooks/useRipple.ts"],"sourcesContent":["import { ref, onMounted, onUnmounted, Ref } from 'vue';\nimport useKeepAnimation from './useKeepAnimation';\nimport { usePrefixClass } from './useConfig';\nimport setStyle from '../utils/set-style';\n\nconst period = 200;\nconst noneRippleBg = 'rgba(0, 0, 0, 0)';\nconst defaultRippleColor = 'rgba(0, 0, 0, 0.35)';\n\nconst getRippleColor = (el: HTMLElement, fixedRippleColor?: string) => {\n // get fixed color from params\n if (fixedRippleColor) {\n return fixedRippleColor;\n }\n // get dynamic color from the dataset\n if (el?.dataset?.ripple) {\n const rippleColor = el.dataset.ripple;\n return rippleColor;\n }\n // use css variable\n const cssVariable = getComputedStyle(el).getPropertyValue('--ripple-color');\n if (cssVariable) {\n return cssVariable;\n }\n return defaultRippleColor;\n};\n\n\nexport default function useRipple(el: Ref<HTMLElement>, fixedRippleColor?: Ref<string>) {\n const rippleContainer = ref(null);\n const classPrefix = usePrefixClass();\n\n const { keepRipple } = useKeepAnimation();\n\n const handleAddRipple = (e: MouseEvent) => {\n const dom = el.value;\n const rippleColor = getRippleColor(dom, fixedRippleColor?.value);\n if (e.button !== 0 || !el || !keepRipple) return;\n\n if (\n dom.classList.contains(`${classPrefix.value}-is-active`) ||\n dom.classList.contains(`${classPrefix.value}-is-disabled`) ||\n dom.classList.contains(`${classPrefix.value}-is-checked`) ||\n dom.classList.contains(`${classPrefix.value}-is-loading`)\n )\n return;\n\n const elStyle = getComputedStyle(dom);\n\n const elBorder = parseInt(elStyle.borderWidth, 10);\n const border = elBorder > 0 ? elBorder : 0;\n const width = dom.offsetWidth;\n const height = dom.offsetHeight;\n\n if (rippleContainer.value.parentNode === null) {\n setStyle(rippleContainer.value, {\n position: 'absolute',\n left: `${0 - border}px`,\n top: `${0 - border}px`,\n width: `${width}px`,\n height: `${height}px`,\n borderRadius: elStyle.borderRadius,\n pointerEvents: 'none',\n overflow: 'hidden',\n });\n dom.appendChild(rippleContainer.value);\n }\n const ripple = document.createElement('div');\n\n setStyle(ripple, {\n marginTop: '0',\n marginLeft: '0',\n right: `${width}px`,\n width: `${width + 20}px`,\n height: '100%',\n transition: `transform ${period}ms cubic-bezier(.38, 0, .24, 1), background ${period * 2}ms linear`,\n transform: 'skewX(-8deg)',\n pointerEvents: 'none',\n position: 'absolute',\n zIndex: 0,\n backgroundColor: rippleColor,\n opacity: '0.9',\n });\n\n const elMap = new WeakMap();\n for (let n = dom.children.length, i = 0; i < n; ++i) {\n const child = dom.children[i];\n if ((child as HTMLElement).style.zIndex === '' && child !== rippleContainer.value) {\n (child as HTMLElement).style.zIndex = '1';\n elMap.set(child, true);\n }\n }\n\n // fix position\n const initPosition = dom.style.position ? dom.style.position : getComputedStyle(dom).position;\n if (initPosition === '' || initPosition === 'static') {\n // eslint-disable-next-line no-param-reassign\n dom.style.position = 'relative';\n }\n rippleContainer.value.insertBefore(ripple, rippleContainer.value.firstChild);\n\n setTimeout(() => {\n ripple.style.transform = `translateX(${width}px)`;\n }, 0);\n const handleClearRipple = () => {\n ripple.style.backgroundColor = noneRippleBg;\n\n if (!el.value) return;\n\n el.value.removeEventListener('pointerup', handleClearRipple, false);\n el.value.removeEventListener('pointerleave', handleClearRipple, false);\n\n setTimeout(() => {\n ripple.remove();\n if (rippleContainer.value.children.length === 0) rippleContainer.value.remove();\n }, period * 2 + 100);\n };\n el.value.addEventListener('pointerup', handleClearRipple, false);\n el.value.addEventListener('pointerleave', handleClearRipple, false);\n };\n\n onMounted(() => {\n const dom = el?.value;\n if (!dom) return;\n\n rippleContainer.value = document.createElement('div');\n\n dom.addEventListener('pointerdown', handleAddRipple, false);\n });\n\n onUnmounted(() => {\n el?.value?.removeEventListener('pointerdown', handleAddRipple, false);\n });\n}\n"],"names":["setStyle","position","left","top","width","height","pointerEvents","overflow","dom","marginTop","marginLeft","right","transform","zIndex","backgroundColor","opacity","child","elMap","rippleContainer","setTimeout","ripple","onMounted","onUnmounted"],"mappings":"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"}