@bagelink/vue 0.0.927 → 0.0.929

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.927",
+  "version": "0.0.929",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Card.vue

@@ -27,6 +27,7 @@ const is = $computed(() => (props.to ? 'router-link' : 'div'))
 <template>
 	<component
 		:is="is"
+		v-ripple="!!to"
 		:to="to"
 		class="bgl_card"
 		:class="{

package/src/plugins/ripple.ts

@@ -1,12 +1,7 @@
-import type { Directive } from 'vue'
-
-const ripple: Directive<HTMLElement> = {
-	mounted(el: HTMLElement) {
-		if (getComputedStyle(el).position === 'static') {
-			el.style.position = 'relative'
-		}
-		el.style.overflow = 'hidden'
+import type { Directive, DirectiveBinding } from 'vue'
 
+const ripple: Directive<HTMLElement, boolean> = {
+	mounted(el: HTMLElement, binding: DirectiveBinding<boolean>) {
 		const clickHandler = (e: MouseEvent) => {
 			const rect = el.getBoundingClientRect()
 			const size = Math.max(rect.width, rect.height)
@@ -27,11 +22,30 @@ const ripple: Directive<HTMLElement> = {
 			})
 
 			el.appendChild(ripple)
-			// setTimeout(() => { ripple.remove() }, 600)
+			setTimeout(() => { ripple.remove() }, 600)
 		};
 
 		(el as any).__rippleClickHandler = clickHandler
-		el.addEventListener('mousedown', clickHandler)
+
+		if (binding.value !== false) {
+			if (getComputedStyle(el).position === 'static') {
+				el.style.position = 'relative'
+			}
+			el.style.overflow = 'hidden'
+			el.addEventListener('mousedown', clickHandler)
+		}
+	},
+	updated(el: HTMLElement, binding: DirectiveBinding<boolean>) {
+		const clickHandler = (el as any).__rippleClickHandler
+		if (binding.value === false) {
+			el.removeEventListener('mousedown', clickHandler)
+		} else {
+			if (getComputedStyle(el).position === 'static') {
+				el.style.position = 'relative'
+			}
+			el.style.overflow = 'hidden'
+			el.addEventListener('mousedown', clickHandler)
+		}
 	},
 	unmounted(el: HTMLElement) {
 		const clickHandler = (el as any).__rippleClickHandler