@veltra/desktop 1.2.4 → 1.2.5

package/src/components/dual-nav/style.scss

@@ -0,0 +1,153 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+@include m.b(dual-nav) {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  background-color: var(--u-nav-bg-color);
+  border: 1px solid fn.use-var(border, color);
+  border-radius: calc(fn.use-var(radius, large) + 6px);
+  overflow: hidden;
+
+  @include m.e(rail) {
+    flex-shrink: 0;
+    width: var(--u-nav-rail-width);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 6px;
+    background-color: fn.use-var(bg-color, middle);
+  }
+
+  @include m.e(divider) {
+    flex-shrink: 0;
+    width: 1px;
+    background-color: fn.use-var(border, color);
+  }
+
+  @include m.e(panel) {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include m.e(panel-header) {
+    flex-shrink: 0;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 12px 12px 10px;
+    border-bottom: 1px solid fn.use-var(border, color);
+  }
+
+  @include m.e(panel-header-main) {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  @include m.e(panel-title) {
+    margin: 0;
+    font-size: fn.use-var(font-size, default);
+    font-weight: 600;
+    line-height: 1.4;
+    color: fn.use-var(text-color, title);
+  }
+
+  @include m.e(description) {
+    margin: 0;
+    font-size: fn.use-var(font-size-assist, default);
+    line-height: 1.5;
+    color: fn.use-var(text-color, second);
+  }
+
+  @include m.e(toggle-expand) {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    border-radius: fn.use-var(radius, default);
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover {
+      background-color: var(--u-nav-hover-bg);
+      color: var(--u-nav-hover-color);
+    }
+  }
+
+  @include m.e(panel-body) {
+    flex: 1;
+    min-height: 0;
+
+    .u-nav {
+      height: 100%;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      background-color: transparent;
+    }
+  }
+
+  @include m.e(app) {
+    width: 100%;
+    aspect-ratio: 1;
+    max-width: calc(var(--u-nav-rail-width) - 12px);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    border-radius: calc(fn.use-var(radius, default) + 2px);
+    background: transparent;
+    color: fn.use-var(text-color, second);
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    &:hover:not(:disabled) {
+      background-color: var(--u-nav-hover-bg);
+      color: var(--u-nav-hover-color);
+    }
+
+    @include m.is(active) {
+      background-color: var(--u-nav-active-bg);
+      color: var(--u-nav-active-color);
+    }
+
+    @include m.is(disabled) {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+  }
+
+  @include m.e(app-icon) {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    object-fit: contain;
+  }
+
+  @include m.e(app-fallback) {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1;
+  }
+}

package/src/components/dual-nav/style.ts

@@ -0,0 +1,4 @@
+import '../icon/style'
+import '../nav/style'
+import '../tip/style'
+import './style.scss'

package/src/components/index.ts

@@ -108,7 +108,9 @@ export * from './list'
 
 export * from './rich-text-editor'
 
-export * from './menu'
+export * from './nav'
+
+export * from './dual-nav'
 
 export * from './grid-input'
 

package/src/components/nav/di.ts

@@ -0,0 +1,17 @@
+import { type BEM, ExpandTransition } from '@veltra/utils'
+import type { ComputedRef, InjectionKey } from 'vue'
+
+import type { NavProps, NavEmits } from '../../types'
+import type { ComponentSize } from '../../types'
+
+export interface NavContext {
+  cls: BEM<'nav', 'u-'>
+  collapsedCls: BEM<'collapsed-nav', 'u-'>
+  navProps: NavProps
+  navEmit: NavEmits
+  expandedPath: Set<string>
+  size: ComputedRef<ComponentSize>
+  expandTransition: ExpandTransition
+}
+
+export const NavDIKey: InjectionKey<NavContext> = Symbol('NavDIKey')

package/src/components/nav/helper.ts

@@ -0,0 +1,22 @@
+import type { NavItem } from '../../types'
+import { walkNavWithPath } from './walk-nav-path'
+
+export function getKey(index: number, parentKey: string): string {
+  return `${parentKey}-${index}`
+}
+
+/** 收集导航树中所有含子级的节点 path */
+export function collectNavBranchPaths(menus?: NavItem[]): string[] {
+  const paths: string[] = []
+  if (!menus?.length) return paths
+
+  for (const menu of menus) {
+    walkNavWithPath(menu, (node) => {
+      if (node.children?.length) {
+        paths.push(node.path)
+      }
+    })
+  }
+
+  return paths
+}

package/src/components/nav/index.ts

@@ -0,0 +1,3 @@
+export { default as UNav } from './nav.vue'
+export { default as UNavSub } from './nav-sub.vue'
+export { default as UNavItem } from './nav-item.vue'

package/src/components/{menu/menu-icon.vue → nav/nav-icon.vue}

@@ -11,7 +11,7 @@ import type { DefineComponent } from 'vue'
 
 import { UIcon } from '../icon'
 
-defineOptions({ name: 'MenuIcon' })
+defineOptions({ name: 'NavIcon' })
 
 defineProps<{ icon: string | DefineComponent }>()
 </script>

package/src/components/nav/nav-item-collapsed.vue

@@ -0,0 +1,66 @@
+<template>
+  <!-- 一级导航 -->
+  <u-tip v-if="depth === 0" direction="right" hide-arrow>
+    <li
+      :class="[
+        collapsedCls.e('item'),
+        bem.is('active', active),
+        bem.is('first-level'),
+        bem.is('disabled', item.disabled ?? false)
+      ]"
+      ref="item"
+      @click="handleClickItem"
+    >
+      <UNavIcon v-if="item.icon" :icon="item.icon" :class="collapsedCls.e('icon')" />
+      <span v-else>{{ item.title[0] }}</span>
+    </li>
+
+    <template #content>
+      {{ item.title }}
+    </template>
+  </u-tip>
+
+  <!-- 二级以及二级以下导航 -->
+  <li
+    v-else
+    :class="[
+      collapsedCls.e('item'),
+      bem.is('active', active),
+      bem.is('disabled', item.disabled ?? false)
+    ]"
+    ref="item"
+    @click="_handleClickItem"
+  >
+    <UNavIcon v-if="item.icon" :icon="item.icon" :class="collapsedCls.e('icon')" />
+
+    <!-- 文本 -->
+    <span :class="collapsedCls.e('item-title')">
+      {{ item.title }}
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { bem } from '@veltra/utils'
+import { useTemplateRef } from 'vue'
+
+import type { NavItem } from '../../types'
+import { UTip } from '../tip'
+import UNavIcon from './nav-icon.vue'
+import { useNavItem } from './use-nav-item'
+
+defineOptions({ name: 'NavItemCollapsed' })
+
+const props = defineProps<{ item: NavItem; depth: number }>()
+
+const itemRef = useTemplateRef('item')
+
+const emit = defineEmits(['click'])
+
+const { collapsedCls, active, handleClickItem } = useNavItem({ itemProps: props, itemRef })
+
+function _handleClickItem() {
+  handleClickItem()
+  emit('click')
+}
+</script>

package/src/components/nav/nav-item.vue

@@ -0,0 +1,36 @@
+<template>
+  <li
+    :class="[
+      cls.e('item'),
+      bem.is('first-level', depth === 0),
+      bem.is('active', active),
+      bem.is('disabled', item.disabled ?? false)
+    ]"
+    ref="item"
+    @click="handleClickItem"
+  >
+    <NavIcon v-if="item.icon" :icon="item.icon" :class="cls.e('icon')" />
+
+    <!-- 文本 -->
+    <span :class="cls.e('item-title')">
+      {{ item.title }}
+    </span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { bem } from '@veltra/utils'
+import { useTemplateRef } from 'vue'
+
+import type { NavItem } from '../../types'
+import NavIcon from './nav-icon.vue'
+import { useNavItem } from './use-nav-item'
+
+defineOptions({ name: 'NavItem' })
+
+const props = defineProps<{ item: NavItem; depth: number }>()
+
+const itemRef = useTemplateRef('item')
+
+const { cls, active, handleClickItem } = useNavItem({ itemProps: props, itemRef })
+</script>

package/src/components/{menu/menu-sub-collapsed.vue → nav/nav-sub-collapsed.vue}

@@ -8,13 +8,13 @@
     v-model:visible="visible"
   >
     <li :class="[collapsedCls.e('sub-content'), bem.is('first-level', depth === 0)]">
-      <MenuIcon v-if="menu.icon" :icon="menu.icon" :class="collapsedCls.e('icon')" />
+      <NavIcon v-if="item.icon" :icon="item.icon" :class="collapsedCls.e('icon')" />
 
-      <span v-else>{{ menu.title[0] }}</span>
+      <span v-else>{{ item.title[0] }}</span>
 
       <template v-if="depth !== 0">
         <span :class="collapsedCls.e('sub-title')">
-          {{ menu.title }}
+          {{ item.title }}
         </span>
 
         <!-- 展开图标 -->
@@ -26,17 +26,17 @@
 
     <template #content>
       <u-scroll tag="ul" :class="collapsedCls.e('sub-list')">
-        <template v-for="(child, index) of menu.children!" :key="getKey(index, parentKey)">
-          <UMenuItemCollapsed
+        <template v-for="(child, index) of item.children!" :key="getKey(index, parentKey)">
+          <UNavItemCollapsed
             v-if="!child.children?.length"
-            :menu="child"
+            :item="child"
             :depth="depth + 1"
             @click="closeSubMenu"
           />
 
-          <MenuSubCollapsed
+          <NavSubCollapsed
             v-else
-            :menu="child"
+            :item="child"
             :parent-key="getKey(index, parentKey)"
             :depth="depth + 1"
           />
@@ -51,18 +51,18 @@ import { ArrowRight } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { inject, ref } from 'vue'
 
-import type { MenuItem } from '../../types'
+import type { NavItem } from '../../types'
 import { UIcon } from '../icon'
 import { UScroll } from '../scroll'
 import { UTip } from '../tip'
-import { MenuDIKey } from './di'
+import { NavDIKey } from './di'
 import { getKey } from './helper'
-import MenuIcon from './menu-icon.vue'
-import UMenuItemCollapsed from './menu-item-collapsed.vue'
+import NavIcon from './nav-icon.vue'
+import UNavItemCollapsed from './nav-item-collapsed.vue'
 
-defineOptions({ name: 'MenuSubCollapsed' })
+defineOptions({ name: 'NavSubCollapsed' })
 
-defineProps<{ menu: MenuItem; parentKey: string; depth: number }>()
+defineProps<{ item: NavItem; parentKey: string; depth: number }>()
 
 const visible = ref(false)
 
@@ -70,5 +70,5 @@ function closeSubMenu() {
   visible.value = false
 }
 
-const { collapsedCls, size } = inject(MenuDIKey)!
+const { collapsedCls, size } = inject(NavDIKey)!
 </script>

package/src/components/{menu/menu-sub.vue → nav/nav-sub.vue}

@@ -1,5 +1,5 @@
 <template>
-  <li :class="[cls.e('sub'), bem.is('expanded', expanded)]">
+  <li :class="cls.e('sub')">
     <div
       :class="[
         cls.e('sub-content'),
@@ -9,11 +9,11 @@
       ]"
       @click="handleToggleExpand"
     >
-      <UMenuIcon v-if="menu.icon" :icon="menu.icon" :class="cls.e('icon')" />
+      <UNavIcon v-if="item.icon" :icon="item.icon" :class="cls.e('icon')" />
 
       <!-- 文本 -->
       <span :class="cls.e('sub-title')">
-        {{ menu.title }}
+        {{ item.title }}
       </span>
 
       <!-- 展开图标 -->
@@ -31,9 +31,9 @@
       @after-leave="(el: Element) => expandTransition.afterLeave(el as HTMLElement)"
     >
       <ul :class="cls.e('sub-list')" v-show="expanded">
-        <template v-for="(child, index) of menu.children!" :key="getKey(index, parentKey)">
-          <UMenuItem v-if="!child.children?.length" :menu="child" :depth="depth + 1" />
-          <MenuSub v-else :menu="child" :parent-key="getKey(index, parentKey)" :depth="depth + 1" />
+        <template v-for="(child, index) of item.children!" :key="getKey(index, parentKey)">
+          <UNavItem v-if="!child.children?.length" :item="child" :depth="depth + 1" />
+          <NavSub v-else :item="child" :parent-key="getKey(index, parentKey)" :depth="depth + 1" />
         </template>
       </ul>
     </transition>
@@ -45,34 +45,34 @@ import { ArrowRight } from '@veltra/icons/normal'
 import { bem } from '@veltra/utils'
 import { computed, inject } from 'vue'
 
-import type { MenuItem } from '../../types'
+import type { NavItem } from '../../types'
 import { UIcon } from '../icon'
-import { MenuDIKey } from './di'
+import { NavDIKey } from './di'
 import { getKey } from './helper'
-import UMenuIcon from './menu-icon.vue'
-import UMenuItem from './menu-item.vue'
+import UNavIcon from './nav-icon.vue'
+import UNavItem from './nav-item.vue'
 
-defineOptions({ name: 'MenuSub' })
+defineOptions({ name: 'NavSub' })
 
-const props = defineProps<{ menu: MenuItem; parentKey: string; depth: number }>()
+const props = defineProps<{ item: NavItem; parentKey: string; depth: number }>()
 
-const { cls, expandedPath, menuProps, expandTransition } = inject(MenuDIKey)!
+const { cls, expandedPath, navProps, expandTransition } = inject(NavDIKey)!
 
-const expanded = computed(() => expandedPath.has(props.menu.path))
+const expanded = computed(() => expandedPath.has(props.item.path))
 
 const branchActive = computed(() => {
-  const currentPath = menuProps.currentPath
+  const currentPath = navProps.currentPath
   if (!currentPath) return false
 
-  const check = (items?: MenuItem[]) => {
+  const check = (items?: NavItem[]) => {
     return items?.some((item) => item.path === currentPath || check(item.children)) ?? false
   }
 
-  return check(props.menu.children)
+  return check(props.item.children)
 })
 
 function handleToggleExpand() {
-  const { menu } = props
-  expandedPath.has(menu.path) ? expandedPath.delete(menu.path) : expandedPath.add(menu.path)
+  const { item } = props
+  expandedPath.has(item.path) ? expandedPath.delete(item.path) : expandedPath.add(item.path)
 }
 </script>

package/src/components/{menu/menu.vue → nav/nav.vue}

@@ -1,32 +1,23 @@
 <template>
-  <u-scroll
-    tag="ul"
-    :class="[menuCls.b, menuCls.m(size)]"
-    :container-class="menuCls.e('container')"
-  >
+  <u-scroll tag="ul" :class="[navCls.b, navCls.m(size)]" :container-class="navCls.e('container')">
     <!-- 常规 -->
     <template v-if="!collapsed">
-      <template v-for="(menu, index) of menus" :key="index">
-        <UMenuSub
-          v-if="menu.children?.length"
-          :menu="menu"
-          :parent-key="String(index)"
-          :depth="0"
-        />
-        <UMenuItem v-else :menu="menu" :key="index" :depth="0" />
+      <template v-for="(item, index) of menus" :key="index">
+        <UNavSub v-if="item.children?.length" :item="item" :parent-key="String(index)" :depth="0" />
+        <UNavItem v-else :item="item" :key="index" :depth="0" />
       </template>
     </template>
 
     <!-- 折叠 -->
     <template v-else>
-      <template v-for="(menu, index) of menus" :key="index">
-        <UMenuSubCollapsed
-          v-if="menu.children?.length"
-          :menu="menu"
+      <template v-for="(item, index) of menus" :key="index">
+        <UNavSubCollapsed
+          v-if="item.children?.length"
+          :item="item"
           :parent-key="String(index)"
           :depth="0"
         />
-        <UMenuItemCollapsed v-else :menu="menu" :key="index" :depth="0" />
+        <UNavItemCollapsed v-else :item="item" :key="index" :depth="0" />
       </template>
     </template>
   </u-scroll>
@@ -35,32 +26,29 @@
 <script lang="ts" setup>
 import { useFallbackProps } from '@veltra/compositions'
 import { bem, ExpandTransition } from '@veltra/utils'
+import type { ComponentSize } from '@veltra/utils'
 import { computed, provide, shallowReactive, watch } from 'vue'
 
-import type { MenuEmits, MenuProps, ComponentSize } from '../../types'
+import type { NavEmits, NavProps } from '../../types/nav'
 import { UScroll } from '../scroll'
-import { MenuDIKey } from './di'
-import UMenuItemCollapsed from './menu-item-collapsed.vue'
-import UMenuItem from './menu-item.vue'
-import UMenuSubCollapsed from './menu-sub-collapsed.vue'
-import UMenuSub from './menu-sub.vue'
-import { walkMenuWithPath } from './walk-menu-path'
-
-defineOptions({ name: 'Menu' })
-
-const props = withDefaults(defineProps<MenuProps>(), {
-  expand: false,
-  activeIndex: '',
-  collapsed: false,
-  uniqueOpened: false
-})
+import { NavDIKey } from './di'
+import { collectNavBranchPaths } from './helper'
+import UNavItemCollapsed from './nav-item-collapsed.vue'
+import UNavItem from './nav-item.vue'
+import UNavSubCollapsed from './nav-sub-collapsed.vue'
+import UNavSub from './nav-sub.vue'
+import { walkNavWithPath } from './walk-nav-path'
+
+defineOptions({ name: 'Nav' })
 
-const emit = defineEmits<MenuEmits>()
+const props = withDefaults(defineProps<NavProps>(), { collapsed: false })
 
-const cls = bem('menu')
-const collapsedCls = bem('collapsed-menu')
+const emit = defineEmits<NavEmits>()
 
-const menuCls = computed(() => {
+const cls = bem('nav')
+const collapsedCls = bem('collapsed-nav')
+
+const navCls = computed(() => {
   return props.collapsed ? collapsedCls : cls
 })
 
@@ -81,7 +69,7 @@ watch(
   ([currentPath, menus]) => {
     if (!currentPath || !menus) return
     menus.forEach((menu) => {
-      walkMenuWithPath(menu, (node, nodePath) => {
+      walkNavWithPath(menu, (node, nodePath) => {
         if (node.path === currentPath) {
           nodePath.slice(0, -1).forEach((path) => {
             expandedPath.add(path.path)
@@ -94,13 +82,25 @@ watch(
   { immediate: true }
 )
 
-provide(MenuDIKey, {
+provide(NavDIKey, {
   cls,
   collapsedCls,
-  menuProps: props,
-  menuEmit: emit,
+  navProps: props,
+  navEmit: emit,
   expandedPath,
   size,
   expandTransition
 })
+
+function expandAll() {
+  collectNavBranchPaths(props.menus).forEach((path) => {
+    expandedPath.add(path)
+  })
+}
+
+function collapseAll() {
+  expandedPath.clear()
+}
+
+defineExpose({ expandAll, collapseAll })
 </script>