diff --git a/docs/components/catalog.md b/docs/components/catalog.md index aac1c580a6..7c8ca77884 100644 --- a/docs/components/catalog.md +++ b/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. diff --git a/src/components/KCatalog/KCatalog.cy.ts b/src/components/KCatalog/KCatalog.cy.ts index 7d0ea40349..685ff9fc99 100644 --- a/src/components/KCatalog/KCatalog.cy.ts +++ b/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', () => { diff --git a/src/components/KCatalog/KCatalog.vue b/src/components/KCatalog/KCatalog.vue index fd8f5540a3..08797b54de 100644 --- a/src/components/KCatalog/KCatalog.vue +++ b/src/components/KCatalog/KCatalog.vue @@ -137,6 +137,7 @@ :item="(item as CatalogItem)" :test-mode="!!testMode || undefined" :truncate="!noTruncation" + @click="$emit('card:click', item)" >