refactor(ui/breadcrumbs): optimize code

varletjs · Dec 26, 2022 · 4a28b51 · 4a28b51
1 parent 522d7bb
commit 4a28b51
Show file tree

Hide file tree

Showing 12 changed files with 137 additions and 59 deletions.
diff --git a/packages/varlet-ui/src/breadcrumb/Breadcrumb.vue b/packages/varlet-ui/src/breadcrumb/Breadcrumb.vue
@@ -1,6 +1,8 @@
 <template>
-  <div :class="classes(n(), [!isLast, n('--active')])" @click="onClick">
-    <slot />
+  <div :class="n()">
+    <div :class="classes(n('content'), [!isLast, n('--active')])" @click="handleClick">
+      <slot />
+    </div>
     <slot v-if="!isLast" name="separator">
       <div :class="n('separator')">
         {{ separator ?? parentSeparator }}
@@ -13,25 +15,34 @@
 import { defineComponent, computed } from 'vue'
 import { props } from './props'
 import { useBreadcrumb } from './provide'
-import { createNamespace } from '../utils/components'
+import { call, createNamespace } from '../utils/components'
 
 const { n, classes } = createNamespace('breadcrumb')
 
 export default defineComponent({
   name: 'VarBreadcrumb',
   props,
-  setup() {
+  setup(props) {
     const { index, breadcrumb, bindBreadcrumb } = useBreadcrumb()
     const isLast = computed(() => index.value === breadcrumb.length.value - 1)
     const parentSeparator = computed(() => breadcrumb.separator.value)
 
+    const handleClick = (e: Event) => {
+      if (isLast.value) {
+        return
+      }
+
+      call(props.onClick, e)
+    }
+
     bindBreadcrumb(null)
 
     return {
       n,
       classes,
       isLast,
       parentSeparator,
+      handleClick,
     }
   },
 })

diff --git a/packages/varlet-ui/src/breadcrumb/__tests__/index.spec.js b/packages/varlet-ui/src/breadcrumb/__tests__/index.spec.js
diff --git a/packages/varlet-ui/src/breadcrumb/breadcrumb.less b/packages/varlet-ui/src/breadcrumb/breadcrumb.less
@@ -9,7 +9,6 @@
   display: flex;
   align-items: center;
   color: var(--breadcrumb-inactive-color);
-  transition: opacity 0.25s;
 
   &__separator {
     margin: var(--breadcrumb-separator-margin);
@@ -18,6 +17,7 @@
 
   &--active {
     color: var(--breadcrumb-active-color);
+    transition: opacity 0.25s;
 
     &:hover {
       opacity: 0.7;

diff --git a/packages/varlet-ui/src/breadcrumbs/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/breadcrumbs/__tests__/__snapshots__/index.spec.js.snap
@@ -2,45 +2,65 @@
 
 exports[`test breadcrumbs basic usage 1`] = `
 "<div class=\\"var-breadcrumbs\\">
-  <div class=\\"var-breadcrumb var-breadcrumb--active\\">HOME<div class=\\"var-breadcrumb__separator\\">/</div>
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content var-breadcrumb--active\\">HOME</div>
+    <div class=\\"var-breadcrumb__separator\\">/</div>
   </div>
-  <div class=\\"var-breadcrumb var-breadcrumb--active\\">LINK 1<div class=\\"var-breadcrumb__separator\\">/</div>
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content var-breadcrumb--active\\">LINK 1</div>
+    <div class=\\"var-breadcrumb__separator\\">/</div>
   </div>
-  <div class=\\"var-breadcrumb\\">LINK 2
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content\\">LINK 2</div>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`test breadcrumbs parent and child separator 1`] = `
 "<div class=\\"var-breadcrumbs\\">
-  <div class=\\"var-breadcrumb var-breadcrumb--active\\">HOME<div class=\\"var-breadcrumb__separator\\">-</div>
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content var-breadcrumb--active\\">HOME</div>
+    <div class=\\"var-breadcrumb__separator\\">-</div>
   </div>
-  <div class=\\"var-breadcrumb var-breadcrumb--active\\">LINK 1<div class=\\"var-breadcrumb__separator\\">-</div>
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content var-breadcrumb--active\\">LINK 1</div>
+    <div class=\\"var-breadcrumb__separator\\">-</div>
   </div>
-  <div class=\\"var-breadcrumb\\">LINK 2
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content\\">LINK 2</div>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`test breadcrumbs parent separator 1`] = `
 "<div class=\\"var-breadcrumbs\\">
-  <div class=\\"var-breadcrumb var-breadcrumb--active\\">HOME<div class=\\"var-breadcrumb__separator\\">+</div>
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content var-breadcrumb--active\\">HOME</div>
+    <div class=\\"var-breadcrumb__separator\\">+</div>
   </div>
-  <div class=\\"var-breadcrumb var-breadcrumb--active\\">LINK 1<div class=\\"var-breadcrumb__separator\\">+</div>
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content var-breadcrumb--active\\">LINK 1</div>
+    <div class=\\"var-breadcrumb__separator\\">+</div>
   </div>
-  <div class=\\"var-breadcrumb\\">LINK 2
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content\\">LINK 2</div>
     <!--v-if-->
   </div>
 </div>"
 `;
 
 exports[`test breadcrumbs slots 1`] = `
 "<div class=\\"var-breadcrumbs\\">
-  <div class=\\"var-breadcrumb var-breadcrumb--active\\">HOME<span>*</span></div>
-  <div class=\\"var-breadcrumb var-breadcrumb--active\\">LINK 1<span>*</span></div>
-  <div class=\\"var-breadcrumb\\">LINK 2
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content var-breadcrumb--active\\">HOME</div><span>*</span>
+  </div>
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content var-breadcrumb--active\\">LINK 1</div><span>*</span>
+  </div>
+  <div class=\\"var-breadcrumb\\">
+    <div class=\\"var-breadcrumb__content\\">LINK 2</div>
     <!--v-if-->
   </div>
 </div>"

diff --git a/packages/varlet-ui/src/breadcrumbs/__tests__/index.spec.js b/packages/varlet-ui/src/breadcrumbs/__tests__/index.spec.js
@@ -76,7 +76,8 @@ test('test breadcrumbs events', async () => {
   })
 
   await delay(0)
-  await wrapper.find('.var-breadcrumb').trigger('click')
+  await wrapper.findAll('.var-breadcrumb__content').at(0).trigger('click')
+  await wrapper.findAll('.var-breadcrumb__content').at(2).trigger('click')
   expect(onClick).toHaveBeenCalledTimes(1)
   wrapper.unmount()
 })

diff --git a/packages/varlet-ui/src/breadcrumbs/docs/en-US.md b/packages/varlet-ui/src/breadcrumbs/docs/en-US.md
@@ -45,21 +45,41 @@ Used to display information hierarchically.
 Custom content can be used as separator by setting slot.
 
 ```html
-<var-breadcrumbs>
-   <var-breadcrumb>
-     Home
-     <template #separator>
-       <var-icon name="menu-right" style="margin: 0 4px" />
-     </template>
-   </var-breadcrumb>
-   <var-breadcrumb>
-     Link 1
-     <template #separator>
-       <var-icon name="menu-right" style="margin: 0 4px" />
-     </template>
-   </var-breadcrumb>
-   <var-breadcrumb>Link 2</var-breadcrumb>
-</var-breadcrumbs>
+<template>
+  <var-breadcrumbs>
+    <var-breadcrumb>
+      Home
+      <template #separator>
+        <var-icon name="menu-right" style="margin: 1px 4px 0" />
+      </template>
+    </var-breadcrumb>
+    <var-breadcrumb>
+      Link 1
+      <template #separator>
+        <var-icon name="menu-right" style="margin: 1px 4px 0" />
+      </template>
+    </var-breadcrumb>
+    <var-breadcrumb>Link 2</var-breadcrumb>
+  </var-breadcrumbs>
+</template>
+```
+
+### Events
+
+Register the click event of the breadcrumb through `@click`, the last breadcrumb will not trigger the click event.
+
+```html
+<script setup>
+import { Snackbar } from '@varlet/ui'
+</script>
+
+<template>
+  <var-breadcrumbs>
+    <var-breadcrumb @click="Snackbar('Home')">Home</var-breadcrumb>
+    <var-breadcrumb @click="Snackbar('Link 1')">Link 1</var-breadcrumb>
+    <var-breadcrumb @click="Snackbar('Link 2')">Link 2</var-breadcrumb>
+  </var-breadcrumbs>
+</template>
 ```
 
 ## API

diff --git a/packages/varlet-ui/src/breadcrumbs/docs/zh-CN.md b/packages/varlet-ui/src/breadcrumbs/docs/zh-CN.md
@@ -45,21 +45,41 @@
 通过设置插槽可以使用自定义内容作为分隔符。
 
 ```html
-<var-breadcrumbs>
-  <var-breadcrumb>
-    首页
-    <template #separator>
-      <var-icon name="menu-right" style="margin: 0 4px" />
-    </template>
-  </var-breadcrumb>
-  <var-breadcrumb>
-    一级
-    <template #separator>
-      <var-icon name="menu-right" style="margin: 0 4px" />
-    </template>
-  </var-breadcrumb>
-  <var-breadcrumb>二级</var-breadcrumb>
-</var-breadcrumbs>
+<template>
+  <var-breadcrumbs>
+    <var-breadcrumb>
+      首页
+      <template #separator>
+        <var-icon name="menu-right" style="margin: 1px 4px 0" />
+      </template>
+    </var-breadcrumb>
+    <var-breadcrumb>
+      一级
+      <template #separator>
+        <var-icon name="menu-right" style="margin: 1px 4px 0" />
+      </template>
+    </var-breadcrumb>
+    <var-breadcrumb>二级</var-breadcrumb>
+  </var-breadcrumbs>
+</template>
+```
+
+### 注册事件
+
+通过 `@click` 注册面包屑的点击事件，最后一个面包屑不会触发点击事件。
+
+```html
+<script setup>
+import { Snackbar } from '@varlet/ui'
+</script>
+
+<template>
+  <var-breadcrumbs>
+    <var-breadcrumb @click="Snackbar('首页')">首页</var-breadcrumb>
+    <var-breadcrumb @click="Snackbar('一级')">一级</var-breadcrumb>
+    <var-breadcrumb @click="Snackbar('二级')">二级</var-breadcrumb>
+  </var-breadcrumbs>
+</template>
 ```
 
 ## API

diff --git a/packages/varlet-ui/src/breadcrumbs/example/index.vue b/packages/varlet-ui/src/breadcrumbs/example/index.vue
@@ -2,6 +2,7 @@
 import VarBreadcrumbs from '..'
 import VarBreadcrumb from '../../breadcrumb'
 import VarIcon from '../../icon'
+import Snackbar from '../../snackbar'
 import dark from '../../themes/dark/index'
 import { use, pack } from './locale'
 import { watchLang, AppType, watchDarkMode } from '@varlet/cli/client'
@@ -36,16 +37,23 @@ watchLang(use)
   <var-breadcrumbs>
     <var-breadcrumb>
       <template #separator>
-        <var-icon name="menu-right" style="margin: 0 4px" />
+        <var-icon name="menu-right" style="margin: 1px 4px 0" />
       </template>
       {{ pack.level1 }}
     </var-breadcrumb>
     <var-breadcrumb>
       <template #separator>
-        <var-icon name="menu-right" style="margin: 0 4px" />
+        <var-icon name="menu-right" style="margin: 1px 4px 0" />
       </template>
       {{ pack.level2 }}
     </var-breadcrumb>
     <var-breadcrumb>{{ pack.level3 }}</var-breadcrumb>
   </var-breadcrumbs>
+
+  <app-type>{{ pack.events }}</app-type>
+  <var-breadcrumbs>
+    <var-breadcrumb @click="Snackbar(pack.level1)">{{ pack.level1 }}</var-breadcrumb>
+    <var-breadcrumb @click="Snackbar(pack.level2)">{{ pack.level2 }}</var-breadcrumb>
+    <var-breadcrumb @click="Snackbar(pack.level3)">{{ pack.level3 }}</var-breadcrumb>
+  </var-breadcrumbs>
 </template>
diff --git a/packages/varlet-ui/src/breadcrumbs/example/locale/en-US.ts b/packages/varlet-ui/src/breadcrumbs/example/locale/en-US.ts
@@ -6,4 +6,5 @@ export default {
   level1: 'Home',
   level2: 'Link 1',
   level3: 'Link 2',
+  events: 'Events',
 }
diff --git a/packages/varlet-ui/src/breadcrumbs/example/locale/zh-CN.ts b/packages/varlet-ui/src/breadcrumbs/example/locale/zh-CN.ts
@@ -6,4 +6,5 @@ export default {
   level1: '首页',
   level2: '一级',
   level3: '二级',
+  events: '注册事件',
 }
diff --git a/packages/varlet-ui/src/button/example/locale/en-US.ts b/packages/varlet-ui/src/button/example/locale/en-US.ts
@@ -22,7 +22,7 @@ export default {
   backgroundTextColor: 'Background/Text Color',
   linearGradientColor: 'LinearGradient Color',
   roundButton: 'Round Button',
-  event: 'Event',
+  event: 'Events',
   click: 'Click',
   touchstart: 'Touchstart',
   autoLoading: 'Auto Loading',

diff --git a/packages/varlet-ui/types/index.d.ts b/packages/varlet-ui/types/index.d.ts
@@ -8,6 +8,8 @@ export * from './backTop'
 export * from './badge'
 export * from './bottomNavigation'
 export * from './bottomNavigationItem'
+export * from './breadcrumb'
+export * from './breadcrumbs'
 export * from './button'
 export * from './card'
 export * from './cell'
@@ -81,6 +83,8 @@ declare module 'vue' {
     VarBadge: typeof import('@varlet/ui')['_BadgeComponent']
     VarBottomNavigation: typeof import('@varlet/ui')['_BottomNavigationComponent']
     VarBottomNavigationItem: typeof import('@varlet/ui')['_BottomNavigationItemComponent']
+    VarBreadcrumb: typeof import('@varlet/ui')['_BreadcrumbComponent']
+    VarBreadcrumbs: typeof import('@varlet/ui')['_BreadcrumbsComponent']
     VarButton: typeof import('@varlet/ui')['_ButtonComponent']
     VarCard: typeof import('@varlet/ui')['_CardComponent']
     VarCell: typeof import('@varlet/ui')['_CellComponent']