Filter

CAUTION

JenniferKubernetes 프로젝트에서 사용하는 필터 UI입니다. 별도의 패키지로 배포되지 않습니다.

Basic Usage

Props

Name	Type	Description
`title`	`string`	필터의 상단 헤더에 위치할 제목입니다.
`type (Optional)`	`'text' \| 'portion'`	필터의 타입입니다. portion 타입의 경우 바 차트 형식으로 나타냅니다.
`filterMap`	`Record<string, number>`	필터의 이름: 개수 쌍을 담고있는 객체입니다.
`filterOrder`	`string[]`	필터 아이템의 순서를 담고있는 배열입니다.
`activeFilterMap`	`Record<string, boolean> \| null`	체크가 활성화된 필터의 이름: boolean 쌍을 담고있는 객체입니다.
`searchText`	`string`	필터 내 검색 인풋 UI로 검색한 문자열입니다.

Event

Name	Parameter	Description
`update:active-filter-map`	`Record<string, boolean> \| null`	체크가 활성화된 필터의 이름: boolean 쌍을 담고있는 객체.
`update:search-text`	`string`	필터 내 검색 인풋 UI로 검색한 문자열.

vue

<script>
import Filter from '@component/filter/Filter.vue';

// 아이템 20개
const basicFilterMap = shallowRef({
    "this": 25555, "is": 20, "text": 18, "type": 15, "filter": 12, "microservicemicroservicemicroservicemicroservice-bb": 10, "authentication-bb": 8, "monitoring-bb": 7, "logging-bb": 6, "testing-bb": 5, "deployment-bb": 4, "security-bb": 4, "documentation-bb": 3, "analytics-bb": 3, "performance-bb": 3, "caching-bb": 2, "messaging-bb": 2, "storage-bb": 2,"backup-bb": 1, "configuration-bb": 1
});
// 개수 내림차순 예시
const basicFilterOrder = shallowRef(['this', 'is', 'text', 'type', 'filter', 'microservicemicroservicemicroservicemicroservice-bb', 'authentication-bb', 'monitoring-bb', 'logging-bb', 'testing-bb', 'deployment-bb', 'security-bb', 'documentation-bb', 'analytics-bb', 'performance-bb', 'caching-bb', 'messaging-bb', 'storage-bb', 'backup-bb', 'configuration-bb']);
const basicSearchText = ref("");
const basicActiveFilterMap = shallowRef(null);

const handleBasicActiveFilterMapUpdate = (newMap) => {
    basicActiveFilterMap.value = newMap;
};
const handleBasicSearchTextUpdate = (newText) => {
    basicSearchText.value = newText;
};

</script>
<template>
    <Filter
        title="Basic Example Title"
        :filter-map="basicFilterMap"
        :filter-order="basicFilterOrder"
        :search-text="basicSearchText"
        :active-filter-map="basicActiveFilterMap"
        @update:active-filter-map="handleBasicActiveFilterMapUpdate"
        @update:search-text="handleBasicSearchTextUpdate"
    />
</template>
<!-- prettier-ignore-end -->

Type: portion

필터 아이템이 바 차트 형식으로 나타납니다.

vue

<script setup>
import Filter from '@component/filter/Filter.vue';

// 아이템 20개
const portionFilterMap = shallowRef({'project-a-bb': 987654,'backend-service-bb': 876543,'frontend-app-bb': 765432,'database-bb': 654321,'api-gateway-bb': 543210,'microservice-bb': 432109,'authentication-bb': 321098,'monitoring-bb': 210987,'logging-bb': 198765,'testing-bb': 187654,'deployment-bb': 176543,'security-bb': 165432,'documentation-bb': 154321,'analytics-bb': 143210,'performanceperformanceperformanceperformanceperformance-bb': 132109,'portion': 123,'type': 1234,'filter': 12345,'this': 1,'is': 12});
// 개수 오름차순
const portionFilterOrder = shallowRef(['this', 'is', 'portion', 'type', 'filter', 'performanceperformanceperformanceperformanceperformance-bb', 'analytics-bb', 'documentation-bb', 'security-bb', 'deployment-bb', 'microservice-bb', 'monitoring-bb', 'logging-bb', 'testing-bb', 'api-gateway-bb', 'database-bb', 'frontend-app-bb', 'backend-service-bb', 'project-a-bb']);
const portionSearchText = ref("");
const portionActiveFilterMap = shallowRef(null);

const handlePortionActiveFilterMapUpdate = (newMap) => {
    portionActiveFilterMap.value = newMap;
};
const handlePortionSearchTextUpdate = (newText) => {
    portionSearchText.value = newText;
};
</script>

<template>
    <Filter
        type="portion"
        title="Portion Type Filter"
        :filter-map="portionFilterMap"
        :filter-order="portionFilterOrder"
        :search-text="portionSearchText"
        :active-filter-map="portionActiveFilterMap"
        @update:active-filter-map="handlePortionActiveFilterMapUpdate"
        @update:search-text="handlePortionSearchTextUpdate"
    />
</template>

드랍다운을 사용할 수 있는 <slot/>이 있습니다.

vue

<script setup>
import Filter from '@component/filter/Filter.vue';
import { Dropdown } from '@jennifetsoft/vue-components-v2';


// 아이템 20개
const filterWithDropdownMap = shallowRef({ 'project-a-bb': 25,'backend-service-bb': 20,'frontend-app-bb': 18, 'database-bb': 15,'api-gateway-bb': 12, "microservice-bb": 10, "authentication-bb": 8, "monitoring-bb": 7, "logging-bb": 6, "testing-bb": 5, "deployment-bb": 4, "security-bb": 4, "documentation-bb": 3, "analytics-bb": 3, "performance-bb": 3, "caching-bb": 2, "messaging-bb": 2, "storage-bb": 2, "backup-bb": 1, "configuration-bb": 1});
// 초기값: 이름 오름차순
const filterWithDropdownOrder = shallowRef(['analytics-bb','api-gateway-bb','authentication-bb','backend-service-bb','backup-bb','caching-bb','configuration-bb','database-bb','deployment-bb','documentation-bb','frontend-app-bb','logging-bb','messaging-bb','microservice-bb','monitoring-bb','performance-bb','project-a-bb','security-bb','storage-bb','testing-bb']);
const filterWithDropdownSearchText = ref("");
const filterWithDropdownActiveFilterMap = shallowRef(null);

// 드랍다운 관련
const dropdownItems = [{ label: '이름 오름차순', value: 'name-asc' }, {  label: '이름 내림차순', value:'name-desc' }, { label: '개수 오름차순', value: 'count-asc' }, { label: '개수 내림차순', value: 'count-desc' }];
const selectedDropdownValue = ref('name-asc');
const sortFunctionList = computed(() => {
    switch (selectedDropdownValue.value) {
        case 'name-asc': return (a, b) => a.localeCompare(b);
        case 'name-desc': return (a, b) => b.localeCompare(a);
        case 'count-asc': return (a, b) => filterMap3.value[a] - filterMap3.value[b];
        case 'count-desc': return (a, b) => filterMap3.value[b] - filterMap3.value[a];
    }
});
const handleDropdownSelect = (value) => {
    selectedDropdownValue.value = value;
};

</script>

<template>
    <Filter
        title="Dropdown Slot Filter"
        type="portion"
        :filter-map="filterWithDropdownMap"
        :filter-order="filterWithDropdownOrder"
        :search-text="filterWithDropdownSearchText"
        :active-filter-map="filterWithDropdownActiveFilterMap"
        @update:active-filter-map="handleActiveFilterMapUpdate3"
        @update:search-text="handleSearchTextUpdate3"
    >
        <template #dropdown>
            <Dropdown
                style="margin-top: 8px;"
                class="typo-body-small"
                size="small"
                v-model="selectedDropdownValue"
                dropdown-type="contained"
                :items="dropdownItems"
            >
                <template #left>
                    <svg-icon icon="filter" :width="16" :height="16" />
                </template>
            </Dropdown>
        </template>
    </Filter>
</template>

Filter ​

Basic Usage ​

Props ​

Event ​

Type: portion ​

Slot: Dropdown ​

Filter

Basic Usage

Props

Event

Type: portion

Slot: Dropdown