diff --git a/next-ui/src/components/item/Card/ItemCard.stories.ts b/next-ui/src/components/item/Card/ItemCard.stories.ts index 340dd02e..78d3c431 100644 --- a/next-ui/src/components/item/Card/ItemCard.stories.ts +++ b/next-ui/src/components/item/Card/ItemCard.stories.ts @@ -28,6 +28,7 @@ const meta = { width: 150, onSelection: fn(), onClickFab: fn(), + onClickQuickAction: fn(), preSelect: false, selected: false, }, @@ -84,6 +85,15 @@ export const TopRightIcon: Story = { }, } +export const QuickActionIcon: Story = { + args: { + quickActionIcon: 'i-mdi:pencil', + }, + play: ({ canvas, userEvent }) => { + userEvent.hover(canvas.getByRole('img')) + }, +} + export const SelectableHover: Story = { args: {}, play: ({ canvas, userEvent }) => { diff --git a/next-ui/src/components/item/Card/ItemCard.vue b/next-ui/src/components/item/Card/ItemCard.vue index a11da58c..01e25e12 100644 --- a/next-ui/src/components/item/Card/ItemCard.vue +++ b/next-ui/src/components/item/Card/ItemCard.vue @@ -50,6 +50,7 @@ transition="fade-transition" content-class="fill-height w-100" > + + + + + @@ -145,13 +157,21 @@ const { * Icon displayed in the top-right corner. Takes precedence over `topRight`. */ topRightIcon?: string + /** + * Icon displayed in the middle. + */ fabIcon?: string + /** + * Icon displayed in the bottom-left corner. + */ + quickActionIcon?: string } >() const emit = defineEmits< ItemCardEmits & { clickFab: [] + clickQuickAction: [] } >() @@ -164,6 +184,7 @@ const isPreSelect = computed(() => preSelect && !selected && !disableSelection) const overlayTransparent = computed(() => (selected || isPreSelect.value) && !isHovering.value) const overlayShown = computed(() => isHovering.value || overlayTransparent.value || preSelect) const hideFab = computed(() => selected || isPreSelect.value) +const hideQuickAction = computed(() => selected || isPreSelect.value)