JenniferSoft Design Docs

Appearance

Menu ​

Type (default) ​

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const items = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
const selectedValue = ref(1);
</script>
<template>
    <menu-box class="w-48">
        <menu-container
            v-model="selectedValue"
            :items="items"
            @select:index="(index) => console.log('select:index', index)"
        />
    </menu-box>
</template>

Props ​

이름타입필수 여부기본값설명
itemsArray<MenuItem>Yes-메뉴 항목 배열
menuType'default' | 'checkmark'No'default'메뉴 스타일 타입
highlightOnSelectbooleanNo-선택 시 항목 하이라이트 여부

Item 타입 정의 ​

메뉴 items는 다음과 같은 형태를 갖습니다. 중첩 메뉴를 위해 items(동일 타입 배열)를 선택적으로 포함할 수 있습니다.

ts
type MenuItemValue = string | number | boolean;

type MenuItem = {
    value: MenuItemValue;
    label: string;
    leadingIcon?: IconTypes;
    leadingBadge?: BadgeProps;
    trailingBadge?: BadgeProps;
    trailingLabel?: string;
    type?: 'text' | 'error-text';
    disabled?: boolean;
    tooltip?: TooltipProps;
    items?: MenuItem[]; // 서브 메뉴 (선택)
};

v-model ​

이름타입기본값설명
(기본)string | number | boolean | nullnull선택된 값(항목의 value) 바인딩

이벤트 ​

이름파라미터설명
select:indexindex: number항목 클릭 시 해당 인덱스 전달

Type (default) with header ​

Header
  • One
  • Two
  • Three
  • Four
  • Five
  • Six
vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const items = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="items2">
            <template #header>
                <span>Header</span>
            </template>
        </menu-container>
    </menu-box>
</template>

Type (default) with trailingLabel ​

  • UnDo
    ⌘+Z
  • Search
    ⌘+F
  • Copy
    ⌘+C
  • Paste
    ⌘+V
vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const trailingLabelItems = ref([
    { label: 'UnDo', value: 'UnDo', trailingLabel: '⌘+Z' },
    { label: 'Search', value: 'Search', trailingLabel: '⌘+F' },
    { label: 'Copy', value: 'Copy', trailingLabel: '⌘+C' },
    { label: 'Paste', value: 'Paste', trailingLabel: '⌘+V' },
]);
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="trailingLabelItems" />
    </menu-box>
</template>

Type (default) with submenu ​

  • One
  • Two
  • Three
    • Three-One
    • Three-Two
      • Three-Two-One
      • Three-Two-Two
      • Three-Two-Three
    • Three-Three
      • Three-Three-One
      • Three-Three-Two
      • Three-Three-Three
vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const hierarchyItems = ref([
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    {
        label: 'Three',
        value: 3,
        items: [
            { label: 'Three-One', value: 31 },
            {
                label: 'Three-Two',
                value: 32,
                items: [
                    { label: 'Three-Two-One', value: 331 },
                    { label: 'Three-Two-Two', value: 332 },
                    { label: 'Three-Two-Three', value: 323 },
                ],
            },
            {
                label: 'Three-Three',
                value: 33,
                items: [
                    { label: 'Three-Three-One', value: 331 },
                    { label: 'Three-Three-Two', value: 332 },
                    { label: 'Three-Three-Three', value: 333 },
                ],
            },
        ],
    },
]);
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="hierarchyItems" />
    </menu-box>
</template>

Type (default) with scroll ​

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
  • Seven
  • Eight
  • Nine
  • Ten
vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';

const items10 = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
    { label: 'Seven', value: 7 },
    { label: 'Eight', value: 8 },
    { label: 'Nine', value: 9 },
    { label: 'Ten', value: 1 },
];
</script>
<template>
    <menu-box class="w-48" style="max-height: 200px; overflow-y: auto;">
        <menu-container :items="items10" />
    </menu-box>
</template>

Type (default) with leading-icon ​

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
vue
<script setup lang="ts">
import {
    MenuContainer,
    MenuBox,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const iconItems = [
    { label: 'One', value: 1, leadingIcon: ICON_TYPE.cluster },
    { label: 'Two', value: 2, leadingIcon: ICON_TYPE.nodes },
    { label: 'Three', value: 3, leadingIcon: ICON_TYPE.storage },
    { label: 'Four', value: 4, leadingIcon: ICON_TYPE.deployment },
    { label: 'Five', value: 5, leadingIcon: ICON_TYPE.replicaset },
    { label: 'Six', value: 6, leadingIcon: ICON_TYPE.server },
];
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="items" />
    </menu-box>
</template>

Type (default) with error-text ​

  • One
  • Two
  • 일일
    Delete
vue
<script setup lang="ts">
import {
    MenuContainer,
    MenuBox,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const errorTextItems = [
    { label: 'One', value: 1, leadingIcon: ICON_TYPE.cluster },
    { label: 'Two', value: 2, leadingIcon: ICON_TYPE.nodes },
    {
        label: 'Delete',
        value: 3,
        leadingIcon: ICON_TYPE.storage,
        leadingBadge: { text: '일일' },
        type: 'error-text',
    },
];
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="errorTextItems" />
    </menu-box>
</template>

Type (default) with disabled ​

  • One
  • Two
  • Disabled
vue
<script setup lang="ts">
import {
    MenuContainer,
    MenuBox,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const disabledItems = [
    { label: 'One', value: 1, leadingIcon: ICON_TYPE.cluster },
    { label: 'Two', value: 2, leadingIcon: ICON_TYPE.nodes },
    {
        label: 'Disabled',
        value: 3,
        leadingIcon: ICON_TYPE.storage,
        disabled: true,
    },
];
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="disabledItems" />
    </menu-box>
</template>

Type (default) with group, header ​

Documents
  • New
  • Search
Profile
  • Settings
  • Logout
vue
<script setup lang="ts">
import {
    ICON_TYPE,
    MenuContainer,
    MenuBox,
} from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const items1OnGroup = [
    { label: 'New', value: 'New', leadingIcon: ICON_TYPE.add },
    { label: 'Search', value: 'Search', leadingIcon: ICON_TYPE.search },
];

const items2OnGroup = [
    { label: 'Settings', value: 'Settings', leadingIcon: ICON_TYPE.settings },
    { label: 'Logout', value: 'Logout', leadingIcon: ICON_TYPE.external },
];
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="items1OnGroup">
            <template #header>
                <span>Documents</span>
            </template>
        </menu-container>
        <menu-container :items="items2OnGroup">
            <template #header>
                <span>Profile</span>
            </template>
        </menu-container>
    </menu-box>
</template>

Type (default) with badge, leading-icon ​

Domain A
  • 시간당
    호출건수
  • 일일
    방문자수
  • 시간당
    동시사용자수
Domain B
  • 시간당
    호출건수
  • 일일
    방문자수
  • 시간당
    동시사용자수
vue
<script setup lang="ts">
const badgeItems = ref([
    {
        label: '호출건수',
        value: 'hitCount',
        leadingBadge: { text: '시간당' },
        leadingIcon: ICON_TYPE.daemonset,
    },
    {
        label: '방문자수',
        value: 'visitCount',
        leadingBadge: { text: '일일' },
        leadingIcon: ICON_TYPE.user,
    },
    {
        label: '동시사용자수',
        value: 'concurrentUser',
        leadingBadge: { text: '시간당' },
        leadingIcon: ICON_TYPE.cluster,
    },
]);
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="badgeItems">
            <template #header>
                <span>Domain A</span>
            </template>
        </menu-container>
        <menu-container :items="badgeItems">
            <template #header>
                <span>Domain B</span>
            </template>
        </menu-container>
    </menu-box>
</template>

Type (default) with tooltip ​

  • 호출건수
  • 방문자수
  • 동시사용자수
vue
<script setup lang="ts">
const tooltipItems = ref([
    {
        label: '호출건수',
        value: 'hitCount',
        tooltip: {
            text: '호출건수 입니다',
            placement: 'right',
        },
    },
    {
        label: '방문자수',
        value: 'visitCount',
        tooltip: {
            text: '방문자수 입니다',
            placement: 'right',
        },
    },
    {
        label: '동시사용자수',
        value: 'concurrentUser',
        tooltip: {
            text: '동시사용자수 입니다',
            placement: 'right',
        },
    },
]);
</script>
<template>
    <menu-box class="w-48">
        <menu-container :items="tooltipItems" />
    </menu-box>
</template>

Type (checkmark) ​

  • One
  • Two
  • Three
  • Four
  • Five
  • Six
vue
<script setup lang="ts">
import { MenuContainer, MenuBox } from '@jennifersoft/vue-components-v2';
import { ref } from 'vue';

const items = [
    { label: 'One', value: 1 },
    { label: 'Two', value: 2 },
    { label: 'Three', value: 3 },
    { label: 'Four', value: 4 },
    { label: 'Five', value: 5 },
    { label: 'Six', value: 6 },
];
const selectedValue = ref(1);
</script>
<template>
    <menu-box class="w-48">
        <menu-container
            menu-type="checkmark"
            v-model="selectedValue"
            :items="items"
        />
    </menu-box>
</template>