JenniferSoft Design Docs

Appearance

MultiDropdown ​

Basic ​

MultiDropdown은 선택한 아이템의 양방향 바인딩을 위해 v-model 로 함께 사용됩니다. 선택된 값이 없다면 label-when-no-checked의 내용이 표시됩니다. MultiDropdown을 선택하면 MultiMenu 가 표시됩니다.

선택된 Item 없음
vue
<script setup lang="ts">
import { MultiDropdown } from '@jennifersoft/vue-components-v2';

const items = [
    {
        label: 'argo-rollouts',
        value: 'argo-rollouts',
        tooltip: {
            text: 'argo-rollouts',
            placement: 'right',
        },
    },
    {
        label: 'argocd',
        value: 'argocd',
        tooltip: {
            text: 'argocd',
            placement: 'right',
        },
    },
    {
        label: 'default',
        value: 'default',
        tooltip: {
            text: 'default',
            placement: 'right',
        },
    },
    {
        label: 'java-demo',
        value: 'java-demo',
        tooltip: {
            text: 'java-demo',
            placement: 'right',
        },
    },
    {
        label: 'jennifer',
        value: 'jennifer',
        tooltip: {
            text: 'jennifer',
            placement: 'right',
        },
    },
    {
        label: 'kube-node-lease',
        value: 'kube-node-lease',
        tooltip: {
            text: 'kube-node-lease',
            placement: 'right',
        },
    },
    {
        label: 'kube-public',
        value: 'kube-public',
        tooltip: {
            text: 'kube-public',
            placement: 'right',
        },
    },
    {
        label: 'newrelic',
        value: 'newrelic',
        tooltip: {
            text: 'newrelic',
            placement: 'right',
        },
    },
    {
        label: 'prometheus',
        value: 'prometheus',
        tooltip: {
            text: 'prometheus',
            placement: 'right',
        },
    },
    {
        label: 'observability',
        value: 'observability',
        tooltip: {
            text: 'observability',
            placement: 'right',
        },
    },
    {
        label: 'sample-ns',
        value: 'sample-ns',
        tooltip: {
            text: 'sample-ns',
            placement: 'right',
        },
    },
];

const checkedValues = ref([]);
</script>
<template>
    <multi-dropdown
        class="w-60"
        v-model="checkedValues"
        :items="items"
        label-when-no-checked="선택된 Item 없음"
    />
</template>

Props ​

이름타입기본값설명
itemsArray<{ label: string, value: PropertyKey, tooltip?: TooltipProps }>(필수)드롭다운에 표시할 항목 목록
labelWhenNoCheckedstring(필수)선택값이 없을 때 라벨에 표시할 텍스트
dropdownType'outlined' | 'contained''outlined'드롭다운 스타일
visibleRowsnumber10표시할 최대 행 개수(스크롤 발생)
overlayStylePartial<CSSStyleDeclaration>-드롭다운 팝업(리스트) 영역에 적용할 인라인 스타일 객체
closeWhenPositionChangedbooleanfalse버튼 위치 변경 시 자동으로 닫힘
zIndexKey'toast' | 'tooltip' | 'menu' | 'dialog' | 'modal' | 'drawer' | 'mask''menu'팝업 레이어의 z-index 그룹 키
labelTooltipPlacement'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom'-라벨에 표시할 툴팁 위치
size'large' | 'medium' | 'small'-컴포넌트 크기
disabledbooleanfalse비활성화 여부

v-model ​

이름타입기본값설명
(기본)PropertyKey[][]선택된 값들의 배열(양방향)

이벤트 ​

이름파라미터설명
closevoid드롭다운 닫힘 이벤트

쿠버네티스 사용 예시 ​

쿠버네티스에서 네임스페이스를 선택할때 사용 예시입니다 FloatLabel 도 같이 사용 했습니다

모든 네임스페이스
vue
<script setup lang="ts">
import {
    Btn,
    MultiDropdown,
    EmptyMenuContainer,
    Badge,
    InputSearch,
    ICON_TYPE,
    SvgIcon,
    FloatLabel,
} from '@jennifersoft/vue-components-v2';

const items = [
    {
        label: 'argo-rollouts',
        value: 'argo-rollouts',
        tooltip: {
            text: 'argo-rollouts',
            placement: 'right',
        },
    },
    {
        label: 'argocd',
        value: 'argocd',
        tooltip: {
            text: 'argocd',
            placement: 'right',
        },
    },
    {
        label: 'default',
        value: 'default',
        tooltip: {
            text: 'default',
            placement: 'right',
        },
    },
    {
        label: 'java-demo',
        value: 'java-demo',
        tooltip: {
            text: 'java-demo',
            placement: 'right',
        },
    },
    {
        label: 'jennifer',
        value: 'jennifer',
        tooltip: {
            text: 'jennifer',
            placement: 'right',
        },
    },
    {
        label: 'kube-node-lease',
        value: 'kube-node-lease',
        tooltip: {
            text: 'kube-node-lease',
            placement: 'right',
        },
    },
    {
        label: 'kube-public',
        value: 'kube-public',
        tooltip: {
            text: 'kube-public',
            placement: 'right',
        },
    },
    {
        label: 'newrelic',
        value: 'newrelic',
        tooltip: {
            text: 'newrelic',
            placement: 'right',
        },
    },
    {
        label: 'prometheus',
        value: 'prometheus',
        tooltip: {
            text: 'prometheus',
            placement: 'right',
        },
    },
    {
        label: 'observability',
        value: 'observability',
        tooltip: {
            text: 'observability',
            placement: 'right',
        },
    },
    {
        label: 'sample-ns',
        value: 'sample-ns',
        tooltip: {
            text: 'sample-ns',
            placement: 'right',
        },
    },
];

const checkedValues = ref([]);

const search = ref();

const filteredItems = computed(() => {
    const searchKeyword = search.value;

    return searchKeyword === undefined || searchKeyword === ''
        ? items
        : items.filter((item) => item.label.includes(search.value));
});

const clearChecked = () => {
    checkedValues.value = [];
};
</script>
<template>
    <float-label :fixed="true" position="on">
        <multi-dropdown
            class="w-60"
            id="namespace"
            v-model="checkedValues"
            :items="filteredItems"
            label-when-no-checked="모든 네임스페이스"
        >
            <template #left>
                <svg-icon :width="18" :height="18" :icon="ICON_TYPE.guid" />
            </template>
            <template #top-of-menu-container>
                <empty-menu-container>
                    <btn
                        type="text"
                        text="네임스페이스 선택 초기화"
                        @click="clearChecked()"
                    />
                </empty-menu-container>
                <empty-menu-container>
                    <input-search
                        class="w-full"
                        type="plain"
                        v-model="search"
                        placeholder="네임스페이스 검색"
                    />
                </empty-menu-container>
            </template>
        </multi-dropdown>
        <label for="namespace">네임스페이스</label>
    </float-label>
</template>