Legend

Legend는 차트나 리스트 등에서 색상과 라벨을 함께 보여주는 범례 컴포넌트입니다.

Props

Prop	Type	Default	Description
label	string	N/A	범례에 표시될 텍스트
color	string	N/A	배지의 배경색. CSS 색상 문자열(#0EA5E9, rgb(), CSS 변수 등)
type	'static' | 'interactive'	N/A	범례 타입
status	'default' | 'active' | 'inactive'	N/A	상태 값. 타입에 따라 허용되는 값이 다릅니다.

타입별 Props 제약

• static: type: 'static' | undefined, status: 'default' 고정
• interactive: type: 'interactive', status: 'default' | 'active' | 'inactive'

Usage

Static

CPU

<Legend label="CPU" color="#4F46E5" />

Interactive (상태별)

CPU

Memory

Disk

<Legend type="interactive" status="default" label="CPU" color="#22C55E" />
<Legend type="interactive" status="active" label="Memory" color="#3B82F6" />
<Legend type="interactive" status="inactive" label="Disk" color="#F97316" />

Interactive 상태 전환 예시

선택된 항목만 active, 나머지는 inactive, 선택이 없으면 모두 default로 표시되는 예시입니다. 같은 항목을 다시 클릭하면 선택이 해제되어 모두 default 상태로 돌아갑니다.

selected: none

CPU

Memory

Disk

<template>
    <div class="flex gap-4 items-start">
        <div>selected: {{ selected || 'none' }}</div>
        <div
            v-for="item in legendItems"
            :key="item.key"
            class="inline-flex"
            @click="toggleSelect(item.key)"
        >
            <Legend
                type="interactive"
                :status="getStatus(item.key)"
                :label="item.label"
                :color="item.color"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Legend } from '@jennifersoft/vue-components-v2';

const legendItems = [
    { key: 'cpu', label: 'CPU', color: '#22C55E' },
    { key: 'mem', label: 'Memory', color: '#3B82F6' },
    { key: 'disk', label: 'Disk', color: '#F97316' },
];
const selected = ref('');

const toggleSelect = (key: string) => {
    selected.value = selected.value === key ? '' : key;
};

const getStatus = (key: string) => {
    if (!selected.value) return 'default';
    return selected.value === key ? 'active' : 'inactive';
};
</script>