Unverified Commit 411237f6 authored by Alireza Heidari's avatar Alireza Heidari
Browse files

Adds highlight support to card component

Introduces a new highlighted prop to enable visual highlighting of cards, useful for indicating selection anchors or drawing attention to specific items.

Applies a subtle box shadow when the card is highlighted to provide clear visual feedback without being intrusive.
parent 84dd7212
Loading
Loading
Loading
Loading
+11 −1
Original line number Diff line number Diff line
@@ -176,6 +176,11 @@ interface Props {
     * @default "Last updated"
     */
    updateTimeTitle?: string;

    /** Whether this card is highlighted (for example, as a range selection anchor)
     * @default false
     */
    highlighted?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
@@ -207,6 +212,7 @@ const props = withDefaults(defineProps<Props>(), {
    updateTime: "",
    updateTimeIcon: () => faEdit,
    updateTimeTitle: "Last updated",
    highlighted: false,
});

/**
@@ -310,7 +316,7 @@ function onKeyDown(event: KeyboardEvent) {
        <div
            :id="`g-card-content-${props.id}`"
            class="g-card-content d-flex flex-column justify-content-between h-100 p-2"
            :class="contentClass">
            :class="[{ 'g-card-highlighted': props.highlighted }, contentClass]">
            <slot>
                <div class="d-flex flex-column flex-gapy-1">
                    <div
@@ -701,6 +707,10 @@ function onKeyDown(event: KeyboardEvent) {
        border-left: 0.25rem solid $brand-primary;
    }

    &.g-card-highlighted .g-card-content {
        box-shadow: 0 0 0 0.2rem transparentize($brand-primary, 0.75);
    }

    &.g-card-clickable {
        cursor: pointer;