MultiDropdown

Basic

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

선택된 Item 없음

<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>

쿠버네티스 사용 예시

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

모든 네임스페이스

네임스페이스

<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>