From 66c5b5d90c8016569a562c019cee8af6489691d9 Mon Sep 17 00:00:00 2001
From: flippedround <734243792@qq.com>
Date: Fri, 3 Feb 2023 11:22:30 +0800
Subject: [PATCH] feat(Menu): init menu

---
 components.d.ts                               |   5 +
 src/components/Navigation/Menu/menu.story.md  |  17 ++
 src/components/Navigation/Menu/menu.story.vue | 288 ++++++++++++++++++
 3 files changed, 310 insertions(+)
 create mode 100644 src/components/Navigation/Menu/menu.story.md
 create mode 100644 src/components/Navigation/Menu/menu.story.vue

diff --git a/components.d.ts b/components.d.ts
index 6dedeb5..60e2687 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -74,6 +74,9 @@ declare module '@vue/runtime-core' {
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElOptionGroup: typeof import('element-plus/es')['ElOptionGroup']
     ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
@@ -94,6 +97,7 @@ declare module '@vue/runtime-core' {
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElStep: typeof import('element-plus/es')['ElStep']
     ElSteps: typeof import('element-plus/es')['ElSteps']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTag: typeof import('element-plus/es')['ElTag']
@@ -116,6 +120,7 @@ declare module '@vue/runtime-core' {
     'Link.story': typeof import('./src/components/Basic/Link/link.story.vue')['default']
     'Loading.story': typeof import('./src/components/Feedback/Loading/loading.story.vue')['default']
     MainColor: typeof import('./src/components/Basic/Color/main-color.vue')['default']
+    'Menu.story': typeof import('./src/components/Navigation/Menu/menu.story.vue')['default']
     'Message.story': typeof import('./src/components/Feedback/Message/message.story.vue')['default']
     NeutralColor: typeof import('./src/components/Basic/Color/neutral-color.vue')['default']
     'Notification.story': typeof import('./src/components/Feedback/Notification/notification.story.vue')['default']
diff --git a/src/components/Navigation/Menu/menu.story.md b/src/components/Navigation/Menu/menu.story.md
new file mode 100644
index 0000000..f5b25a7
--- /dev/null
+++ b/src/components/Navigation/Menu/menu.story.md
@@ -0,0 +1,17 @@
+## Menu Attributes
+
+| Name                | Description                                                                                                                                                           | Type    | Accepted Values       | Default  |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | --------------------- | -------- |
+| mode                | menu display mode                                                                                                                                                     | string  | horizontal / vertical | vertical |
+| collapse            | whether the menu is collapsed (available only in vertical mode)                                                                                                       | boolean | —                     | false    |
+| ellipsis            | whether the menu is ellipsis (available only in horizontal mode)                                                                                                      | boolean | —                     | true     |
+| background-color    | background color of Menu (hex format) (deprecated, use `--bg-color` instead)                                                                                          | string  | —                     | #ffffff  |
+| text-color          | text color of Menu (hex format) (deprecated, use `--text-color` instead)                                                                                              | string  | —                     | #303133  |
+| active-text-color   | text color of currently active menu item (hex format) (deprecated, use `--active-color` instead)                                                                      | string  | —                     | #409EFF  |
+| default-active      | index of active menu on page load                                                                                                                                     | string  | —                     | —        |
+| default-openeds     | array that contains indexes of currently active sub-menus                                                                                                             | Array   | —                     | —        |
+| unique-opened       | whether only one sub-menu can be active                                                                                                                               | boolean | —                     | false    |
+| menu-trigger        | how sub-menus are triggered, only works when `mode` is 'horizontal'                                                                                                   | string  | hover / click         | hover    |
+| 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    |
+| collapse-transition | whether to enable the collapse transition                                                                                                                             | boolean | —                     | true     |
+| popper-effect       | Tooltip theme, built-in theme: `dark` / `light` when menu is collapsed                                                                                                | string  | dark / light          | dark     |
diff --git a/src/components/Navigation/Menu/menu.story.vue b/src/components/Navigation/Menu/menu.story.vue
new file mode 100644
index 0000000..6920f00
--- /dev/null
+++ b/src/components/Navigation/Menu/menu.story.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import type { MenuProps } from 'element-plus'
+import {
+  Location,
+} from '@element-plus/icons-vue'
+
+const basicData = reactive({
+  mode: 'vertical' as MenuProps['mode'],
+  defaultActive: 1,
+  collapse: false,
+  ellipsis: false,
+  bgColor: '#FFF',
+  textColor: '#303133',
+  activeTextColor: '#409EFF',
+  uniqueOpened: false,
+  menuTrigger: 'hover' as MenuProps['menuTrigger'],
+  router: false,
+  collapseTransition: true,
+  popperEffect: 'light' as MenuProps['popperEffect'],
+})
+
+const basicSource = computed(() => {
+  return `<el-menu
+  default-active="${basicData.defaultActive}"${isAttribute(
+    basicData.mode === 'horizontal',
+    'mode="horizontal"',
+  )}${isAttribute(
+    basicData.collapse && basicData.mode === 'vertical',
+    'collapse',
+  )}${isAttribute(
+    basicData.ellipsis && basicData.mode === 'horizontal',
+    ':ellipsis="false"',
+  )}${isAttribute(
+    basicData.bgColor !== '#FFF',
+    `background-color="${basicData.bgColor}"`,
+  )}${isAttribute(
+    basicData.textColor !== '#303133',
+    `text-color="${basicData.textColor}"`,
+  )}${isAttribute(
+    basicData.activeTextColor !== '#409EFF',
+    `active-text-color="${basicData.activeTextColor}"`,
+  )}${isAttribute(
+    basicData.uniqueOpened,
+    ':unique-opened="true"',
+  )}${isAttribute(
+    basicData.menuTrigger === 'click' && basicData.mode === 'horizontal',
+    'menu-trigger="click"',
+  )}${isAttribute(
+    basicData.router,
+    'router',
+  )}${isAttribute(
+    !basicData.collapseTransition,
+    'collapse-transition="false"',
+  )}${isAttribute(
+    basicData.popperEffect === 'dark',
+    'popper-effect="light"',
+  )}
+>
+  <el-menu-item
+    v-for="item in menuData"
+    v-if="!item.children"
+    :key="item.index"
+    :index="item.index"
+    :disabled="item.disabled"
+  >
+    <template #title>
+      <span>{{ item.title }}</span>
+    </template>
+  </el-menu-item>
+  <el-sub-menu
+    v-for="item in menuData"
+    v-if="item.children"
+    :key="item.index"
+    :index="item.index"
+    :disabled="item.disabled"
+  >
+    <template #title>
+      {{ item.title }}
+    </template>
+    <el-menu-item
+      v-for="child in item.children"
+      :key="child.index"
+      :index="child.index"
+      :disabled="child.disabled"
+    >
+      <template #title>
+        <span>{{ child.title }}</span>
+      </template>
+    </el-menu-item>
+  </el-sub-menu>
+<\/el-menu>
+
+<script setup lang="ts">
+const menuData = [
+  {
+    index: '1',
+    title: 'Navigator One',
+  },
+  {
+    index: '2',
+    title: 'Workspace',
+    children: [
+      {
+        index: '2-1',
+        title: 'item one',
+      },
+      {
+        index: '2-2',
+        title: 'item two',
+      },
+      {
+        index: '2-3',
+        title: 'item three',
+      },
+      {
+        index: '2-4',
+        title: 'item four',
+        children: [
+          {
+            index: '2-4-1',
+            title: 'item one',
+          },
+          {
+            index: '2-4-2',
+            title: 'item two',
+          },
+          {
+            index: '2-4-3',
+            title: 'item three',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    index: '3',
+    title: 'Info',
+    disabled: true,
+  },
+  {
+    index: '4',
+    title: 'Orders',
+  },
+]
+<\/script>
+  `
+})
+</script>
+
+<!-- icon from https://icones.js.org/collection/all?s=menu -->
+<template>
+  <Story
+    title="Navigation/Menu"
+    icon="bi:menu-button-wide-fill"
+    :layout="{
+      type: 'grid',
+      width: 600,
+    }"
+  >
+    <Variant
+      title="Basic Usage"
+      :source="basicSource"
+    >
+      <el-col
+        :span="
+          basicData.mode === 'vertical' || basicData.ellipsis
+            ? 12 : 100"
+      >
+        <el-menu
+          :default-active="String(basicData.defaultActive)"
+          :mode="basicData.mode"
+          :collapse="basicData.collapse"
+          :ellipsis="basicData.ellipsis"
+          :background-color="basicData.bgColor"
+          :text-color="basicData.textColor"
+          :active-text-color="basicData.activeTextColor"
+          :unique-opened="basicData.uniqueOpened"
+          :menu-trigger="basicData.menuTrigger"
+          :router="basicData.router"
+          :collapse-transition="basicData.collapseTransition"
+          :popper-effect="basicData.popperEffect"
+        >
+          <el-menu-item index="1">
+            <template #title>
+              <el-icon><location /></el-icon>
+              <span>Navigator One</span>
+            </template>
+          </el-menu-item>
+          <el-sub-menu index="2">
+            <template #title>
+              Workspace
+            </template>
+            <el-menu-item index="2-1">
+              item one
+            </el-menu-item>
+            <el-menu-item index="2-2">
+              item two
+            </el-menu-item>
+            <el-menu-item index="2-3">
+              item three
+            </el-menu-item>
+            <el-sub-menu index="2-4">
+              <template #title>
+                item four
+              </template>
+              <el-menu-item index="2-4-1">
+                item one
+              </el-menu-item>
+              <el-menu-item index="2-4-2">
+                item two
+              </el-menu-item>
+              <el-menu-item index="2-4-3">
+                item three
+              </el-menu-item>
+            </el-sub-menu>
+          </el-sub-menu>
+          <el-menu-item index="3" disabled>
+            Info
+          </el-menu-item>
+          <el-menu-item index="4">
+            Orders
+          </el-menu-item>
+        </el-menu>
+      </el-col>
+      <template #controls>
+        <HstInputNumber
+          v-model="basicData.defaultActive"
+          title="default-active"
+          :min="1" :max="4"
+        />
+        <HstButtonGroup
+          v-model="basicData.mode"
+          title="mode"
+          :options="[
+            { label: 'vertical', value: 'vertical' },
+            { label: 'horizontal', value: 'horizontal' },
+          ]"
+        />
+        <HstCheckbox
+          v-model="basicData.collapse"
+          :style="useElDisplay(basicData.mode === 'vertical')"
+          title="collapse"
+        />
+        <HstCheckbox
+          v-model="basicData.ellipsis"
+          :style="useElDisplay(basicData.mode === 'horizontal')"
+          title="ellipsis"
+        />
+        <HstCheckbox
+          v-model="basicData.uniqueOpened"
+          title="unique-opened"
+        />
+        <HstButtonGroup
+          v-model="basicData.menuTrigger"
+          :style="useElDisplay(basicData.mode === 'horizontal')"
+          title="menu-trigger"
+          :options="[
+            { label: 'hover', value: 'hover' },
+            { label: 'click', value: 'click' },
+          ]"
+        />
+        <HstCheckbox
+          v-model="basicData.router"
+          title="router"
+        />
+        <HstCheckbox
+          v-model="basicData.collapseTransition"
+          title="collapse-transition"
+        />
+        <HstButtonGroup
+          v-model="basicData.popperEffect"
+          title="popper-effect"
+          :options="[
+            { label: 'light', value: 'light' },
+            { label: 'dark', value: 'dark' },
+          ]"
+        />
+        <HstDivider content="Color" />
+        <HstColor v-model="basicData.bgColor" title="bg-color" />
+        <HstColor v-model="basicData.textColor" title="text-color" />
+        <HstColor v-model="basicData.activeTextColor" title="active-text-color" />
+      </template>
+    </Variant>
+  </Story>
+</template>
+
+<style scoped>
+</style>