Skip to content

Commit aefe799

Browse files
FliPPeDroundFliPPeDround
authored
feat(Menu): init menu (#107)
1 parent 464ad3a commit aefe799

3 files changed

Lines changed: 310 additions & 0 deletions

File tree

‎components.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,9 @@ declare module '@vue/runtime-core' {
7474
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
7575
ElLink: typeof import('element-plus/es')['ElLink']
7676
ElMain: typeof import('element-plus/es')['ElMain']
77+
ElMenu: typeof import('element-plus/es')['ElMenu']
78+
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
79+
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
7780
ElOption: typeof import('element-plus/es')['ElOption']
7881
ElOptionGroup: typeof import('element-plus/es')['ElOptionGroup']
7982
ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
@@ -94,6 +97,7 @@ declare module '@vue/runtime-core' {
9497
ElSpace: typeof import('element-plus/es')['ElSpace']
9598
ElStep: typeof import('element-plus/es')['ElStep']
9699
ElSteps: typeof import('element-plus/es')['ElSteps']
100+
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
97101
ElSwitch: typeof import('element-plus/es')['ElSwitch']
98102
ElTable: typeof import('element-plus/es')['ElTable']
99103
ElTag: typeof import('element-plus/es')['ElTag']
@@ -116,6 +120,7 @@ declare module '@vue/runtime-core' {
116120
'Link.story': typeof import('./src/components/Basic/Link/link.story.vue')['default']
117121
'Loading.story': typeof import('./src/components/Feedback/Loading/loading.story.vue')['default']
118122
MainColor: typeof import('./src/components/Basic/Color/main-color.vue')['default']
123+
'Menu.story': typeof import('./src/components/Navigation/Menu/menu.story.vue')['default']
119124
'Message.story': typeof import('./src/components/Feedback/Message/message.story.vue')['default']
120125
NeutralColor: typeof import('./src/components/Basic/Color/neutral-color.vue')['default']
121126
'Notification.story': typeof import('./src/components/Feedback/Notification/notification.story.vue')['default']

‎src/components/Navigation/Menu/menu.story.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## Menu Attributes
2+
3+
| Name | Description | Type | Accepted Values | Default |
4+
| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------- | -------- |
5+
| mode | menu display mode | string | horizontal / vertical | vertical |
6+
| collapse | whether the menu is collapsed (available only in vertical mode) | boolean | — | false |
7+
| ellipsis | whether the menu is ellipsis (available only in horizontal mode) | boolean | — | true |
8+
| background-color | background color of Menu (hex format) (deprecated, use `--bg-color` instead) | string | — | #ffffff |
9+
| text-color | text color of Menu (hex format) (deprecated, use `--text-color` instead) | string | — | #303133 |
10+
| active-text-color | text color of currently active menu item (hex format) (deprecated, use `--active-color` instead) | string | — | #409EFF |
11+
| default-active | index of active menu on page load | string | — | — |
12+
| default-openeds | array that contains indexes of currently active sub-menus | Array | — | — |
13+
| unique-opened | whether only one sub-menu can be active | boolean | — | false |
14+
| menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string | hover / click | hover |
15+
| router | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action. Use with `default-active` to set the active item on load. | boolean | — | false |
16+
| collapse-transition | whether to enable the collapse transition | boolean | — | true |
17+
| popper-effect | Tooltip theme, built-in theme: `dark` / `light` when menu is collapsed | string | dark / light | dark |

‎src/components/Navigation/Menu/menu.story.vue‎

Lines changed: 288 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,288 @@
1+
<script setup lang="ts">
2+
import type { MenuProps } from 'element-plus'
3+
import {
4+
Location,
5+
} from '@element-plus/icons-vue'
6+
7+
const basicData = reactive({
8+
mode: 'vertical' as MenuProps['mode'],
9+
defaultActive: 1,
10+
collapse: false,
11+
ellipsis: false,
12+
bgColor: '#FFF',
13+
textColor: '#303133',
14+
activeTextColor: '#409EFF',
15+
uniqueOpened: false,
16+
menuTrigger: 'hover' as MenuProps['menuTrigger'],
17+
router: false,
18+
collapseTransition: true,
19+
popperEffect: 'light' as MenuProps['popperEffect'],
20+
})
21+
22+
const basicSource = computed(() => {
23+
return `<el-menu
24+
default-active="${basicData.defaultActive}"${isAttribute(
25+
basicData.mode === 'horizontal',
26+
'mode="horizontal"',
27+
)}${isAttribute(
28+
basicData.collapse && basicData.mode === 'vertical',
29+
'collapse',
30+
)}${isAttribute(
31+
basicData.ellipsis && basicData.mode === 'horizontal',
32+
':ellipsis="false"',
33+
)}${isAttribute(
34+
basicData.bgColor !== '#FFF',
35+
`background-color="${basicData.bgColor}"`,
36+
)}${isAttribute(
37+
basicData.textColor !== '#303133',
38+
`text-color="${basicData.textColor}"`,
39+
)}${isAttribute(
40+
basicData.activeTextColor !== '#409EFF',
41+
`active-text-color="${basicData.activeTextColor}"`,
42+
)}${isAttribute(
43+
basicData.uniqueOpened,
44+
':unique-opened="true"',
45+
)}${isAttribute(
46+
basicData.menuTrigger === 'click' && basicData.mode === 'horizontal',
47+
'menu-trigger="click"',
48+
)}${isAttribute(
49+
basicData.router,
50+
'router',
51+
)}${isAttribute(
52+
!basicData.collapseTransition,
53+
'collapse-transition="false"',
54+
)}${isAttribute(
55+
basicData.popperEffect === 'dark',
56+
'popper-effect="light"',
57+
)}
58+
>
59+
<el-menu-item
60+
v-for="item in menuData"
61+
v-if="!item.children"
62+
:key="item.index"
63+
:index="item.index"
64+
:disabled="item.disabled"
65+
>
66+
<template #title>
67+
<span>{{ item.title }}</span>
68+
</template>
69+
</el-menu-item>
70+
<el-sub-menu
71+
v-for="item in menuData"
72+
v-if="item.children"
73+
:key="item.index"
74+
:index="item.index"
75+
:disabled="item.disabled"
76+
>
77+
<template #title>
78+
{{ item.title }}
79+
</template>
80+
<el-menu-item
81+
v-for="child in item.children"
82+
:key="child.index"
83+
:index="child.index"
84+
:disabled="child.disabled"
85+
>
86+
<template #title>
87+
<span>{{ child.title }}</span>
88+
</template>
89+
</el-menu-item>
90+
</el-sub-menu>
91+
<\/el-menu>
92+
93+
<script setup lang="ts">
94+
const menuData = [
95+
{
96+
index: '1',
97+
title: 'Navigator One',
98+
},
99+
{
100+
index: '2',
101+
title: 'Workspace',
102+
children: [
103+
{
104+
index: '2-1',
105+
title: 'item one',
106+
},
107+
{
108+
index: '2-2',
109+
title: 'item two',
110+
},
111+
{
112+
index: '2-3',
113+
title: 'item three',
114+
},
115+
{
116+
index: '2-4',
117+
title: 'item four',
118+
children: [
119+
{
120+
index: '2-4-1',
121+
title: 'item one',
122+
},
123+
{
124+
index: '2-4-2',
125+
title: 'item two',
126+
},
127+
{
128+
index: '2-4-3',
129+
title: 'item three',
130+
},
131+
],
132+
},
133+
],
134+
},
135+
{
136+
index: '3',
137+
title: 'Info',
138+
disabled: true,
139+
},
140+
{
141+
index: '4',
142+
title: 'Orders',
143+
},
144+
]
145+
<\/script>
146+
`
147+
})
148+
</script>
149+
150+
<!-- icon from https://icones.js.org/collection/all?s=menu -->
151+
<template>
152+
<Story
153+
title="Navigation/Menu"
154+
icon="bi:menu-button-wide-fill"
155+
:layout="{
156+
type: 'grid',
157+
width: 600,
158+
}"
159+
>
160+
<Variant
161+
title="Basic Usage"
162+
:source="basicSource"
163+
>
164+
<el-col
165+
:span="
166+
basicData.mode === 'vertical' || basicData.ellipsis
167+
? 12 : 100"
168+
>
169+
<el-menu
170+
:default-active="String(basicData.defaultActive)"
171+
:mode="basicData.mode"
172+
:collapse="basicData.collapse"
173+
:ellipsis="basicData.ellipsis"
174+
:background-color="basicData.bgColor"
175+
:text-color="basicData.textColor"
176+
:active-text-color="basicData.activeTextColor"
177+
:unique-opened="basicData.uniqueOpened"
178+
:menu-trigger="basicData.menuTrigger"
179+
:router="basicData.router"
180+
:collapse-transition="basicData.collapseTransition"
181+
:popper-effect="basicData.popperEffect"
182+
>
183+
<el-menu-item index="1">
184+
<template #title>
185+
<el-icon><location /></el-icon>
186+
<span>Navigator One</span>
187+
</template>
188+
</el-menu-item>
189+
<el-sub-menu index="2">
190+
<template #title>
191+
Workspace
192+
</template>
193+
<el-menu-item index="2-1">
194+
item one
195+
</el-menu-item>
196+
<el-menu-item index="2-2">
197+
item two
198+
</el-menu-item>
199+
<el-menu-item index="2-3">
200+
item three
201+
</el-menu-item>
202+
<el-sub-menu index="2-4">
203+
<template #title>
204+
item four
205+
</template>
206+
<el-menu-item index="2-4-1">
207+
item one
208+
</el-menu-item>
209+
<el-menu-item index="2-4-2">
210+
item two
211+
</el-menu-item>
212+
<el-menu-item index="2-4-3">
213+
item three
214+
</el-menu-item>
215+
</el-sub-menu>
216+
</el-sub-menu>
217+
<el-menu-item index="3" disabled>
218+
Info
219+
</el-menu-item>
220+
<el-menu-item index="4">
221+
Orders
222+
</el-menu-item>
223+
</el-menu>
224+
</el-col>
225+
<template #controls>
226+
<HstInputNumber
227+
v-model="basicData.defaultActive"
228+
title="default-active"
229+
:min="1" :max="4"
230+
/>
231+
<HstButtonGroup
232+
v-model="basicData.mode"
233+
title="mode"
234+
:options="[
235+
{ label: 'vertical', value: 'vertical' },
236+
{ label: 'horizontal', value: 'horizontal' },
237+
]"
238+
/>
239+
<HstCheckbox
240+
v-model="basicData.collapse"
241+
:style="useElDisplay(basicData.mode === 'vertical')"
242+
title="collapse"
243+
/>
244+
<HstCheckbox
245+
v-model="basicData.ellipsis"
246+
:style="useElDisplay(basicData.mode === 'horizontal')"
247+
title="ellipsis"
248+
/>
249+
<HstCheckbox
250+
v-model="basicData.uniqueOpened"
251+
title="unique-opened"
252+
/>
253+
<HstButtonGroup
254+
v-model="basicData.menuTrigger"
255+
:style="useElDisplay(basicData.mode === 'horizontal')"
256+
title="menu-trigger"
257+
:options="[
258+
{ label: 'hover', value: 'hover' },
259+
{ label: 'click', value: 'click' },
260+
]"
261+
/>
262+
<HstCheckbox
263+
v-model="basicData.router"
264+
title="router"
265+
/>
266+
<HstCheckbox
267+
v-model="basicData.collapseTransition"
268+
title="collapse-transition"
269+
/>
270+
<HstButtonGroup
271+
v-model="basicData.popperEffect"
272+
title="popper-effect"
273+
:options="[
274+
{ label: 'light', value: 'light' },
275+
{ label: 'dark', value: 'dark' },
276+
]"
277+
/>
278+
<HstDivider content="Color" />
279+
<HstColor v-model="basicData.bgColor" title="bg-color" />
280+
<HstColor v-model="basicData.textColor" title="text-color" />
281+
<HstColor v-model="basicData.activeTextColor" title="active-text-color" />
282+
</template>
283+
</Variant>
284+
</Story>
285+
</template>
286+
287+
<style scoped>
288+
</style>

0 commit comments

Comments
 (0)