@bagelink/vue 1.15.71 → 1.15.73

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.71",
+  "version": "1.15.73",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/ListItem.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import type { IconType, ThemeType } from '@bagelink/vue'
 import { Avatar, Icon } from '@bagelink/vue'
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
 	defineProps<{
@@ -31,9 +33,8 @@ const props = withDefaults(
 		/** Visually mark as selected (for non-router selection lists). */
 		active?: boolean
 		/** Render as an interactive row (cursor + hover) without needing a handler.
-		    Implied when `to`, `href`, or `onClick` is set. */
+		    Implied when `to`, `href`, or a `@click` listener is set. */
 		clickable?: boolean
-		onClick?: () => void
 	}>(),
 	{
 		ellipsis: true,
@@ -41,9 +42,34 @@ const props = withDefaults(
 	}
 )
 
+const attrs = useAttrs()
+
+// Split inherited attrs: event listeners (onClick, onClickStop, …) belong on the
+// clickable element so handlers + modifiers like `.stop` fire on the actual
+// button/link row; everything else (class, style, data-*, …) stays on the root
+// wrapper to preserve existing behavior.
+const listenerAttrs = computed(() => {
+	const out: Record<string, any> = {}
+	for (const k of Object.keys(attrs)) {
+		if (/^on[A-Z]/.test(k)) { out[k] = (attrs as any)[k] }
+	}
+	return out
+})
+const rootAttrs = computed(() => {
+	const out: Record<string, any> = {}
+	for (const k of Object.keys(attrs)) {
+		if (!/^on[A-Z]/.test(k)) { out[k] = (attrs as any)[k] }
+	}
+	return out
+})
+
 const hasTo = computed(() => props.to !== undefined && props.to !== '')
 const hasHref = computed(() => props.href !== undefined && props.href !== '')
-const isClickable = computed(() => hasTo.value || hasHref.value || props.onClick !== undefined || props.clickable === true)
+// A `@click` listener (with or without modifiers like `.stop`) shows up in
+// $attrs as `onClick` / `onClickStop` / etc — detect any of them so a clickable
+// row is recognized even when the handler uses modifiers.
+const hasClickListener = computed(() => Object.keys(attrs).some(k => /^onClick/i.test(k)))
+const isClickable = computed(() => hasTo.value || hasHref.value || hasClickListener.value || props.clickable === true)
 
 const isComponent = computed(() => {
 	if (hasTo.value) { return 'router-link' }
@@ -53,7 +79,10 @@ const isComponent = computed(() => {
 })
 
 const bind = computed(() => {
-	const obj: { [key: string]: any } = {}
+	// Spread the inherited event listeners (including `@click`/`@click.stop`) onto
+	// the clickable element itself, so the handler fires on the actual button/link
+	// row — not the outer wrapper — and modifiers like `.stop` keep working.
+	const obj: { [key: string]: any } = { ...listenerAttrs.value }
 	if (props.to !== undefined && props.to !== '') { obj.to = props.to }
 	else if (props.href !== undefined && props.href !== '') { obj.href = props.href }
 	if (props.target !== undefined && props.target !== undefined && ((props.to !== undefined && props.to !== '') || (props.href !== undefined && props.href !== ''))) { obj.target = props.target }
@@ -69,6 +98,7 @@ const bind = computed(() => {
 
 <template>
 	<div
+		v-bind="rootAttrs"
 		class="flex space-between list-item-row"
 		:class="{ 'no-border-list': props.flat || rounded, 'list-item-flush': props.fullWidth, 'list-item-fullrow': isClickable, 'list-item-rounded': rounded, 'list-item-active': active }"
 		:style="color ? { '--bgl-list-item-accent': `var(--bgl-${color})` } : undefined"
@@ -86,7 +116,7 @@ const bind = computed(() => {
 				'py-05': props.thin,
 				'px-1': !props.fullWidth,
 				'px-0': props.fullWidth,
-			}" @click="typeof onClick === 'function' && onClick()"
+			}"
 		>
 			<!-- Leading visual INSIDE the clickable area. Use #media for custom art
 			     (covers, thumbnails); `src`/`showAvatar` and `icon` are shortcuts. -->