Unverified Commit e7830bc9 authored by Alireza Heidari's avatar Alireza Heidari
Browse files

Refactors range selection highlighting to use prop-based approach 

Replaces CSS class-based highlighting with a dedicated highlighted prop for better component encapsulation and maintainability.

Removes custom CSS styling and ESLint disable comment while consolidating the highlighting logic into the component's prop system.
parent 411237f6

client/src/components/Workflow/List/WorkflowCard.vue

+3 −1
Original line number Diff line number Diff line
@@ -23,6 +23,7 @@ interface Props { 
    selected?: boolean;

    selectable?: boolean;

    clickable?: boolean;

    highlighted?: boolean;

}



const props = withDefaults(defineProps<Props>(), {
@@ -36,6 +37,7 @@ const props = withDefaults(defineProps<Props>(), { 
    selected: false,

    selectable: false,

    clickable: false,

    highlighted: false,

});



const emit = defineEmits<{
@@ -126,7 +128,6 @@ function onKeyDown(event: KeyboardEvent) { 
</script>



<template>

    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->

    <GCard

        :id="workflow.id"

        class="workflow-card"
@@ -151,6 +152,7 @@ function onKeyDown(event: KeyboardEvent) { 
        :update-time="workflow.update_time"

        :bookmarked="!!workflow.show_in_tool_panel"

        :clickable="props.clickable"

        :highlighted="props.highlighted"

        @bookmark="() => toggleBookmark(!workflow?.show_in_tool_panel)"

        @rename="emit('rename', props.workflow.id, props.workflow.name)"

        @select="emit('select', workflow)"

client/src/components/Workflow/List/WorkflowCardList.vue

+1 −8
Original line number Diff line number Diff line
@@ -109,8 +109,8 @@ const workflowPublished = ref<InstanceType<typeof WorkflowPublished>>(); 
            :compact="props.compact"

            :current="workflow.id === props.currentWorkflowId"

            :clickable="props.clickable"

            :highlighted="props.rangeSelectAnchor?.id === workflow.id"

            class="workflow-card-in-list"

            :class="{ 'range-select-anchor-workfow': props.rangeSelectAnchor?.id === workflow.id }"

            @select="(...args) => emit('select', ...args)"

            @tagClick="(...args) => emit('tagClick', ...args)"

            @refreshList="(...args) => emit('refreshList', ...args)"
@@ -170,12 +170,5 @@ const workflowPublished = ref<InstanceType<typeof WorkflowPublished>>(); 


.workflow-card-list {

    container: cards-list / inline-size;

    .workflow-card-in-list {

        &.range-select-anchor-workfow {

            &:deep(.g-card-content) {

                box-shadow: 0 0 0 0.2rem transparentize($brand-primary, 0.75);

            }

        }

    }

}

</style>