vft 0.0.1

package/src/web/menu/index.scss

@@ -0,0 +1,336 @@
+$name: menu;
+
+@include set-root-css-vars($name, $menu);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@mixin menu-item {
+  display: flex;
+  align-items: center;
+  height: getCompCssVar('item-height');
+  line-height: getCompCssVar('item-height');
+  font-size: getCompCssVar('item-font-size');
+  color: getCompCssVar('text-color');
+  padding: 0 getCompCssVar('base-level-padding');
+  list-style: none;
+  cursor: pointer;
+  position: relative;
+  transition: border-color getCssVar('transition-duration'),
+  background-color getCssVar('transition-duration'),
+  color getCssVar('transition-duration');
+  box-sizing: border-box;
+  white-space: nowrap;
+
+  * {
+    vertical-align: bottom;
+  }
+
+  i {
+    margin-right: getCompCssVar('icon-mr');;
+  }
+
+  &:hover,
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    background-color: getCompCssVar('hover-bg-color');
+  }
+
+  @include when(disabled) {
+    opacity: 0.25;
+    cursor: not-allowed;
+    background: none !important;
+  }
+
+  span {
+    @include line-clamp(1);
+    word-break: break-all;
+  }
+}
+
+@include b(menu) {
+  border-right: solid 1px getCompCssVar('border-color');
+  list-style: none;
+  position: relative;
+  margin: 0;
+  padding-left: 0;
+  background-color: getCompCssVar('bg-color');
+  box-sizing: border-box;
+  @include m(vertical) {
+    &:not(.#{$namespace}-menu--collapse):not(.#{$namespace}-menu--popup-container) {
+      & .#{$namespace}-menu-item,
+      & .#{$namespace}-sub-menu__title,
+      & .#{$namespace}-menu-item-group__title {
+        //white-space: nowrap;
+        padding-left: calc(
+          #{getCompCssVar('base-level-padding')} + #{getCompCssVar('level')} *
+          #{getCompCssVar('level-padding')}
+        );
+      }
+    }
+    @include b(menu-item) {
+      white-space: initial;
+    }
+  }
+
+  @include m(horizontal) {
+    display: flex;
+    flex-wrap: nowrap;
+    border-bottom: getCompCssVar('border-bottom');
+    border-right: none;
+
+    & > .#{$namespace}-menu-item {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+
+      height: 100%;
+
+      margin: 0;
+      border-bottom: 2px solid transparent;
+      color: getCompCssVar('text-color');
+
+      a,
+      a:hover {
+        color: inherit;
+      }
+
+      &:not(.is-disabled):hover,
+      &:not(.is-disabled):focus {
+        background-color: #fff;
+      }
+    }
+    & > .#{$namespace}-sub-menu {
+      &:focus,
+      &:hover {
+        outline: none;
+      }
+
+      &:hover {
+        .#{$namespace}-sub-menu__title {
+          color: getCompCssVar('hover-text-color');
+        }
+      }
+
+      &.is-active {
+        .#{$namespace}-sub-menu__title {
+          border-bottom: 2px solid getCompCssVar('active-color');
+          color: getCompCssVar('active-color');
+
+          &:hover {
+            color: getCompCssVar('hover-text-color');
+          }
+        }
+      }
+
+      & .#{$namespace}-sub-menu__title {
+        height: 100%;
+        line-height: 100%;
+        border-bottom: 2px solid transparent;
+        color: getCompCssVar('text-color');
+
+        &:hover {
+          background-color: getCompCssVar('hover-bg-color');
+        }
+      }
+    }
+    & .#{$namespace}-menu {
+      & .#{$namespace}-menu-item,
+      & .#{$namespace}-sub-menu__title {
+        background-color: getCompCssVar('bg-color');
+        display: flex;
+        align-items: center;
+        height: getCompCssVar('horizontal-sub-item-height');
+        padding: 0 10px;
+        color: getCompCssVar('text-color');
+      }
+
+      & .#{$namespace}-sub-menu__title {
+        padding-right: 40px;
+      }
+
+      & .#{$namespace}-menu-item.is-active,
+      & .#{$namespace}-sub-menu.is-active > .#{$namespace}-sub-menu__title {
+        color: getCompCssVar('active-color');
+      }
+    }
+    & .#{$namespace}-menu-item:not(.is-disabled):hover {
+      outline: none;
+      color: getCompCssVar('hover-text-color');
+      background-color: getCompCssVar('hover-bg-color');
+    }
+    & .#{$namespace}-menu-item:not(.is-disabled):focus {
+      outline: none;
+      color: getCompCssVar('focus-text-color');
+      background-color: getCompCssVar('focus-bg-color');
+    }
+    & > .#{$namespace}-menu-item.is-active {
+      border-bottom: 2px solid getCompCssVar('active-color');
+      color: getCompCssVar('active-color');
+    }
+  }
+  @include m(collapse) {
+    width: calc(
+      #{getCompCssVar('icon-width')} + #{getCompCssVar('base-level-padding')} *
+      2
+    );
+
+    > .#{$namespace}-menu-item,
+    > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title,
+    > .#{$namespace}-menu-item-group > ul > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title {
+      [class^='#{$namespace}-icon'] {
+        margin: 0;
+        vertical-align: middle;
+        width: getCompCssVar('icon-width');
+        text-align: center;
+      }
+
+      .#{$namespace}-sub-menu__icon-arrow {
+        display: none;
+      }
+
+      > span {
+        height: 0;
+        width: 0;
+        overflow: hidden;
+        visibility: hidden;
+        display: inline-block;
+      }
+    }
+
+    > .#{$namespace}-menu-item.is-active i {
+      color: inherit;
+    }
+
+    .#{$namespace}-menu .#{$namespace}-sub-menu {
+      min-width: 200px;
+    }
+  }
+  @include m(popup) {
+    z-index: 100;
+    min-width: 200px;
+    border: none;
+    padding: 5px 0;
+    box-shadow: getCssVar('box-shadow-light');
+
+    // Todo radius
+    border-radius: getCompCssVar('popup-border-radius');
+
+  }
+
+  .#{$namespace}-icon {
+    flex-shrink: 0;
+  }
+}
+
+@include b(menu-item) {
+  @include menu-item;
+
+  & [class^='#{$namespace}-icon'] {
+    margin-right: 5px;
+    width: getCompCssVar('icon-width');
+    text-align: center;
+    font-size: 18px;
+    vertical-align: middle;
+  }
+  @include when(active) {
+    color: getCompCssVar('active-color');
+    i {
+      color: inherit;
+    }
+  }
+  .#{$namespace}-menu-tooltip__trigger {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 getCompCssVar('base-level-padding');
+  }
+}
+
+@include b(sub-menu) {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+  background: getCompCssVar('sub-menu-bg-color');;
+
+  @include e(title) {
+    @include menu-item;
+
+    &:hover {
+      background-color: getCompCssVar('hover-bg-color');
+    }
+
+    @include e(text) {
+      padding-right: 30px;
+    }
+
+  }
+  & .#{$namespace}-menu {
+    border: none;
+  }
+  & .#{$namespace}-menu-item {
+    height: getCompCssVar('sub-item-height');
+    line-height: getCompCssVar('sub-item-height');
+    min-width: getCompCssVar('item-min-width');
+  }
+  @include e(hide-arrow) {
+    .#{$namespace}-sub-menu__icon-arrow {
+      display: none !important;
+    }
+  }
+  @include when(active) {
+    .#{$namespace}-sub-menu__title {
+      border-bottom-color: getCompCssVar('active-color');
+    }
+  }
+  @include when(disabled) {
+    .#{$namespace}-sub-menu__title,
+    .#{$namespace}-menu-item {
+      opacity: 0.25;
+      cursor: not-allowed;
+      background: none !important;
+    }
+  }
+  .#{$namespace}-icon {
+    vertical-align: middle;
+    margin-right: getCompCssVar('icon-mr');;
+    text-align: center;
+
+    &.#{$namespace}-sub-menu__icon-more {
+      margin-right: 0 !important;
+    }
+  }
+  .#{$namespace}-sub-menu__icon-arrow {
+    position: absolute;
+    right: getCompCssVar('base-level-padding');
+    transition: transform getCssVar('transition-duration');
+    color: inherit;
+  }
+}
+
+@include b(menu-item-group) {
+  > ul {
+    padding: 0;
+  }
+  @include e(title) {
+    padding: 7px 0 7px getCompCssVar('base-level-padding');
+    line-height: normal;
+    font-size: 12px;
+    color: getCssVar('text-color', 'secondary');
+  }
+}
+
+.horizontal-collapse-transition .#{$namespace}-sub-menu__title .#{$namespace}-sub-menu__icon-arrow {
+  transition: getCssVar('transition-duration-fast');
+  opacity: 0;
+}
+

package/src/web/menu/index.ts

@@ -0,0 +1,8 @@
+import Menu from './menu.vue';
+import MenuItem from './menu-item.vue';
+import MenuItemGroup from './menu-item-group.vue';
+import SubMenu from './sub-menu.vue';
+
+export * from './types';
+
+export { Menu, MenuItem, MenuItemGroup, SubMenu };

package/src/web/menu/menu-collapse-transition.vue

@@ -0,0 +1,62 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useNamespace } from '../../use';
+import { addClass, hasClass, removeClass } from '@vri/utils';
+
+import type { BaseTransitionProps, TransitionProps } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const ns = useNamespace('menu');
+    const listeners = {
+      onBeforeEnter: (el) => (el.style.opacity = '0.2'),
+      onEnter(el, done) {
+        addClass(el, `${ns.namespace.value}-opacity-transition`);
+        el.style.opacity = '1';
+        done();
+      },
+
+      onAfterEnter(el) {
+        removeClass(el, `${ns.namespace.value}-opacity-transition`);
+        el.style.opacity = '';
+      },
+
+      onBeforeLeave(el) {
+        if (!el.dataset) {
+          ;(el as any).dataset = {};
+        }
+
+        if (hasClass(el, ns.m('collapse'))) {
+          removeClass(el, ns.m('collapse'));
+          el.dataset.oldOverflow = el.style.overflow;
+          el.dataset.scrollWidth = el.clientWidth.toString();
+          addClass(el, ns.m('collapse'));
+        } else {
+          addClass(el, ns.m('collapse'));
+          el.dataset.oldOverflow = el.style.overflow;
+          el.dataset.scrollWidth = el.clientWidth.toString();
+          removeClass(el, ns.m('collapse'));
+        }
+
+        el.style.width = `${el.scrollWidth}px`;
+        el.style.overflow = 'hidden';
+      },
+
+      onLeave(el: HTMLElement) {
+        addClass(el, 'horizontal-collapse-transition');
+        el.style.width = `${el.dataset.scrollWidth}px`;
+      }
+    } as BaseTransitionProps<HTMLElement> as TransitionProps;
+
+    return {
+      listeners
+    };
+  }
+});
+</script>
+
+<template>
+  <transition mode="out-in" v-bind="listeners">
+    <slot />
+  </transition>
+</template>

package/src/web/menu/menu-item-group.vue

@@ -0,0 +1,27 @@
+<template>
+  <li :class="ns.b()">
+    <div :class="ns.e('title')">
+      <template v-if="!$slots.title">{{ title }}</template>
+      <slot v-else name="title" />
+    </div>
+    <ul>
+      <slot />
+    </ul>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { useNamespace } from '../../use';
+
+interface Props {
+	title?: string
+}
+
+defineProps<Props>();
+
+const ns = /* hoist-static*/ useNamespace('menu-item-group');
+
+defineOptions({
+	name: ns.b()
+});
+</script>

package/src/web/menu/menu-item.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { renderTNode, singleAttrToObj, VNode } from '@vri/utils';
+import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, reactive } from 'vue';
+import { throwError } from '../../utils';
+import { useNamespace } from '../../use';
+import { type RouteLocationRaw } from 'vue-router';
+import useMenu from './use-menu';
+import { Icon, type IconProps } from '../../common';
+import { Divider, Tooltip } from '../../web';
+
+import type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types';
+
+interface Props {
+  /** 唯一标志 */
+  index?: string;
+  /** Vue Router 路径对象 */
+  route?: RouteLocationRaw;
+  /** 是否禁用 */
+  disabled?: boolean;
+  icon?: IconProps;
+  title?: string;
+  isAloneUse?: boolean;
+  divider?: boolean;
+  className?: string
+  reverse?: boolean
+}
+
+const { index, route, disabled, icon, isAloneUse, divider, className, reverse } = defineProps<Props>();
+
+const ns = /* hoist-static*/ useNamespace('menu-item');
+
+const emit = defineEmits(['click']);
+
+defineOptions({
+  name: ns.b()
+});
+
+const instance = getCurrentInstance()!;
+
+const nsMenu = useNamespace('menu');
+
+const nsMenuItem = useNamespace('menu-item');
+
+// 获取来自 menu.vue 中注入的数据
+const rootMenu = !isAloneUse ? inject<MenuProvider>('rootMenu') : null;
+if (!rootMenu && !isAloneUse) throwError(ns.b(), 'can not inject root menu');
+
+// indexPath：当前 menu-item 对应的 index 和 vri-sub-menu 的 index，parentMenu 为 vri-sub-menu 组件
+const { parentMenu, indexPath } = useMenu(
+  instance,
+  computed(() => index!)
+);
+
+// 注入来自 sub-menu 中的 provide 数据
+const subMenu = !isAloneUse ? inject<SubMenuProvider>(`subMenu:${parentMenu.value.uid}`) : null;
+if (!subMenu && !isAloneUse) throwError(ns.b(), 'can not inject sub menu');
+
+// 当前是否为 active
+const active = computed(() => index === rootMenu?.activeIndex);
+
+const item: MenuItemRegistered = reactive({
+  index: index!,
+  indexPath,
+  active
+});
+
+// 点击具体菜单项
+const handleClick = () => {
+  if (!disabled) {
+    rootMenu?.handleMenuItemClick({
+      index: index!,
+      indexPath: indexPath.value,
+      route: route
+    });
+    emit('click', item);
+  }
+};
+
+const _icon = computed(() => {
+  return singleAttrToObj(icon, 'icon') as IconProps;
+});
+
+const title = computed(() => {
+  return renderTNode(instance, 'title');
+});
+
+onMounted(() => {
+  if (!isAloneUse) {
+    // 触发 sub-menu,vue 中的 addSubMenu
+    subMenu?.addSubMenu(item);
+    // 触发 menu.vue 中的 addMenuItem 更新 items
+    rootMenu?.addMenuItem(item);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (!isAloneUse) {
+    subMenu?.removeSubMenu(item);
+    rootMenu?.removeMenuItem(item);
+  }
+});
+</script>
+
+<template>
+  <Divider v-if="reverse && divider" marginY="0" />
+  <li :class="[className, nsMenuItem.b(), nsMenuItem.is('active', isAloneUse ? false : active), nsMenuItem.is('disabled', disabled)]" role="menuitem" tabindex="-1" @click="handleClick">
+    <tooltip
+      v-if="parentMenu?.type?.name === 'vri-menu' && rootMenu?.props.collapse && $slots.title"
+      placement="right" :fallback-placements="['left']" persistent>
+      <template #content>
+        <slot name="title" />
+      </template>
+      <div :class="nsMenu.be('tooltip', 'trigger')">
+        <slot />
+      </div>
+    </tooltip>
+    <template v-else>
+      <slot v-if="$slots?.default"/>
+      <template v-else>
+        <Icon v-if="_icon?.icon" v-bind="_icon" />
+        <span :title="title"><v-node :content="title" /></span>
+      </template>
+    </template>
+  </li>
+  <Divider v-if="!reverse && divider" marginY="0" />
+</template>