feat(kcatalog): emit on card click (#1608)

Add an event emission for when a `KCatalogItem` is clicked.

docs/components/catalog.md

@@ -602,6 +602,10 @@ fetcher(payload) {
 
 ## Events
 
+### @card:click
+
+Emitted when a `KCatalogItem` is clicked, the payload is the clicked item's object.
+
 ### CTA Clicks
 
 - `@kcatalog-empty-state-cta-clicked` - If using a CTA button in the empty state, this event is fired when clicked.

src/components/KCatalog/KCatalog.cy.ts

@@ -289,6 +289,24 @@ describe('KCatalog', () => {
         .should('have.callCount', 3) // fetcher's 3rd call
         .should('returned', { data: [{ query: '' }], total: 1 })
     })
+
+    it('emits an event when card is clicked', () => {
+      mount(KCatalog, {
+        props: {
+          testMode: 'true',
+          cacheIdentifier: 'general-props-long',
+          fetcher: () => {
+            return { data: [longItem], total: 1 }
+          },
+          noTruncation: true,
+        },
+      })
+
+      cy.get('.k-card-catalog .catalog-item').first().click().then(() => {
+        // Check for emitted event
+        cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'card:click')
+      })
+    })
   })
 
   describe('states', () => {

src/components/KCatalog/KCatalog.vue

@@ -137,6 +137,7 @@
           :item="(item as CatalogItem)"
           :test-mode="!!testMode || undefined"
           :truncate="!noTruncation"
+          @click="$emit('card:click', item)"
         >
           <template #cardTitle>
             <slot
@@ -435,6 +436,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits<{
+  (e: 'card:click', item: CatalogItem): void
   (e: 'kcatalog-error-cta-clicked'): void
   (e: 'kcatalog-empty-state-cta-clicked'): void
   (e: 'update:catalog-preferences', preferences: CatalogPreferences): void

src/components/KCatalog/KCatalogItem.vue

@@ -51,10 +51,10 @@ defineProps({
   },
 })
 
-const emit = defineEmits(['clicked'])
+const emit = defineEmits(['card:click'])
 
 const handleCardClick = (evt: Event, item: CatalogItem): void => {
-  emit('clicked', {
+  emit('card:click', {
     evt,
     item,
   })