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)