feat(ui/breadcrumb): var-breadcrumb complete

packages/varlet-ui/src/breadcrumb-item/BreadcrumbItem.vue

@@ -0,0 +1,51 @@
+<template>
+  <div :class="classes(n())">
+    <div :class="classes(n('content'), !isLast ? n('--active') : null)">
+      <slot />
+      <template v-if="!isLast">
+        <slot name="separator" />
+        <div v-if="!isSlot" :class="classes(n('separator'))">
+          {{ separator ?? parentSeparator }}
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent , computed } from 'vue'
+import { props } from './props'
+import { useBreadcrumbItem } from './provide'
+import { createNamespace } from '../utils/components'
+import type { BreadcrumbItemProvider } from './provide'
+
+const { n, classes } = createNamespace('breadcrumb-item')
+
+export default defineComponent({
+  name: 'VarBreadcrumbItem',
+  props,
+  setup(_, { slots }) {
+    const { index, breadcrumb, bindBreadcrumb } = useBreadcrumbItem()
+    const isLast = computed(() => index.value === breadcrumb.length.value - 1)
+    const isSlot = computed(() => slots.separator)
+    const parentSeparator = computed(() => breadcrumb.separator.value)
+
+    const breadcrumbItemProvider: BreadcrumbItemProvider = {}
+
+    bindBreadcrumb(breadcrumbItemProvider)
+
+    return {
+      n,
+      classes,
+      isLast,
+      parentSeparator,
+      isSlot,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './BreadcrumbItem';
+</style>

packages/varlet-ui/src/breadcrumb-item/__tests__/index.spec.js

@@ -0,0 +1,8 @@
+import BreadcrumbItem from '..'
+import { createApp } from 'vue'
+import { mount } from '@vue/test-utils'
+
+test('test breadcrumb-item plugin', () => {
+  const app = createApp({}).use(BreadcrumbItem)
+  expect(app.component(BreadcrumbItem.name)).toBeTruthy()
+})

packages/varlet-ui/src/breadcrumb-item/breadcrumbItem.less

@@ -0,0 +1,33 @@
+:root {
+  --breadcrumb-item-active-color: var(--color-primary);
+  --breadcrumb-item-active-hover-color: #233dd2;
+  --breadcrumb-item-text-color: #888;
+  --breadcrumb-item-separator-margin: 0 6px;
+  --breadcrumb-item-separator-font-size: 14px;
+}
+
+.var-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  color: var(--breadcrumb-item-text-color);
+
+  &__separator {
+    margin: var(--breadcrumb-item-separator-margin);
+    font-size: var(--breadcrumb-item-separator-font-size);
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+  }
+
+  &--active {
+    color: var(--breadcrumb-item-active-color);
+    transition: 0.1s color;
+
+    &:hover {
+      cursor: pointer;
+      color: var(--breadcrumb-item-active-hover-color);
+    }
+  }
+}

packages/varlet-ui/src/breadcrumb-item/example/index.vue

@@ -0,0 +1,12 @@
+<script setup>
+import VarBreadcrumbItem from '../index'
+import { watchLang, AppType } from '@varlet/cli/client'
+import { use, pack } from './locale'
+
+watchLang(use)
+</script>
+
+<template>
+  <app-type>Mobile phone example code</app-type>
+  <var-breadcrumb-item />
+</template>

packages/varlet-ui/src/breadcrumb-item/example/locale/en-US.ts

@@ -0,0 +1,3 @@
+export default {
+  // Example locale
+}

packages/varlet-ui/src/breadcrumb-item/example/locale/index.ts

@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN as any)
+add('en-US', enUS as any)

packages/varlet-ui/src/breadcrumb-item/example/locale/zh-CN.ts

@@ -0,0 +1,3 @@
+export default {
+  // Example locale
+}

packages/varlet-ui/src/breadcrumb-item/index.ts

@@ -0,0 +1,11 @@
+// Component entry, the folder where the file exists will be exposed to the user
+import BreadcrumbItem from './BreadcrumbItem.vue'
+import type { App } from 'vue'
+
+BreadcrumbItem.install = function (app: App) {
+  app.component(BreadcrumbItem.name, BreadcrumbItem)
+}
+
+export const _BreadcrumbItemComponent = BreadcrumbItem
+
+export default BreadcrumbItem

packages/varlet-ui/src/breadcrumb-item/props.ts

@@ -0,0 +1,5 @@
+export const props = {
+  separator: {
+    type: String,
+  },
+}

packages/varlet-ui/src/breadcrumb-item/provide.ts

@@ -0,0 +1,25 @@
+import { useAtParentIndex, useParent } from '../utils/components'
+import {
+  BREADCRUMB_BIND_BREADCRUMB_ITEM_KEY,
+  BREADCRUMB_COUNT_BREADCRUMB_ITEM_KEY,
+  BreadcrumbProvider,
+} from '../breadcrumb/provide'
+
+export interface BreadcrumbItemProvider {}
+
+export function useBreadcrumbItem() {
+  const { parentProvider, bindParent } = useParent<BreadcrumbProvider, BreadcrumbItemProvider>(
+    BREADCRUMB_BIND_BREADCRUMB_ITEM_KEY
+  )
+  const { index } = useAtParentIndex(BREADCRUMB_COUNT_BREADCRUMB_ITEM_KEY)
+
+  if (!parentProvider || !bindParent || !index) {
+    throw Error('<var-breadcrumb-item/> must in <var-breadcrumb/>')
+  }
+
+  return {
+    index,
+    breadcrumb: parentProvider,
+    bindBreadcrumb: bindParent,
+  }
+}

packages/varlet-ui/src/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,43 @@
+<template>
+  <div :class="classes(n())">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import { props } from './props'
+import { useBreadcrumbList } from './provide'
+import { createNamespace } from '../utils/components'
+import type { BreadcrumbProvider } from './provide'
+import type { ComputedRef } from 'vue'
+
+const { n, classes } = createNamespace('breadcrumb')
+
+export default defineComponent({
+  name: 'VarBreadcrumbs',
+  inheritAttrs: false,
+  props,
+  setup(props) {
+    const separator: ComputedRef<string> = computed(() => props.separator)
+    const { bindBreadcrumbList, length } = useBreadcrumbList()
+
+    const breadcrumbProvide: BreadcrumbProvider = {
+      length,
+      separator,
+    }
+
+    bindBreadcrumbList(breadcrumbProvide)
+
+    return {
+      n,
+      classes,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import './breadcrumb';
+</style>

packages/varlet-ui/src/breadcrumb/__tests__/index.spec.js

@@ -0,0 +1,8 @@
+import Breadcrumbs from '..'
+import { createApp } from 'vue'
+import { mount } from '@vue/test-utils'
+
+test('test breadcrumbs plugin', () => {
+  const app = createApp({}).use(Breadcrumbs)
+  expect(app.component(Breadcrumbs.name)).toBeTruthy()
+})

packages/varlet-ui/src/breadcrumb/breadcrumb.less

@@ -0,0 +1,4 @@
+.var-breadcrumb {
+  display: flex;
+  align-items: center;
+}

packages/varlet-ui/src/breadcrumb/docs/zh-CN.md

@@ -0,0 +1 @@
+# 111

packages/varlet-ui/src/breadcrumb/example/index.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { watchLang, AppType } from '@varlet/cli/client'
+import VarBreadcrumb from '..'
+import VarBreadcrumbItem from '../../breadcrumb-item'
+import { use, pack } from './locale'
+
+watchLang(use)
+</script>
+
+<template>
+  <app-type>Mobile phone example code</app-type>
+  <var-breadcrumb>
+    <var-breadcrumb-item>一级</var-breadcrumb-item>
+    <var-breadcrumb-item separator="->">二级</var-breadcrumb-item>
+    <var-breadcrumb-item>
+      <template #separator> 分割符 </template>
+      三级
+    </var-breadcrumb-item>
+    <var-breadcrumb-item>四级</var-breadcrumb-item>
+  </var-breadcrumb>
+</template>

packages/varlet-ui/src/breadcrumb/example/locale/en-US.ts

@@ -0,0 +1,3 @@
+export default {
+  // Example locale
+}

packages/varlet-ui/src/breadcrumb/example/locale/index.ts

@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN as any)
+add('en-US', enUS as any)

packages/varlet-ui/src/breadcrumb/example/locale/zh-CN.ts

@@ -0,0 +1,3 @@
+export default {
+  // Example locale
+}

packages/varlet-ui/src/breadcrumb/index.ts

@@ -0,0 +1,11 @@
+// Component entry, the folder where the file exists will be exposed to the user
+import type { App } from 'vue'
+import Breadcrumb from './Breadcrumb.vue'
+
+Breadcrumb.install = function (app: App) {
+  app.component(Breadcrumb.name, Breadcrumb)
+}
+
+export const _BreadcrumbComponent = Breadcrumb
+
+export default Breadcrumb

packages/varlet-ui/src/breadcrumb/props.ts

@@ -0,0 +1,6 @@
+export const props = {
+  separator: {
+    type: String,
+    default: '/',
+  },
+}

packages/varlet-ui/src/breadcrumb/provide.ts

@@ -0,0 +1,24 @@
+import type { ComputedRef } from 'vue'
+import { useAtChildrenCounter, useChildren } from '../utils/components'
+import type { BreadcrumbItemProvider } from '../breadcrumb-item/provide'
+
+export interface BreadcrumbProvider {
+  length: ComputedRef<number>
+  separator: ComputedRef<string>
+}
+
+export const BREADCRUMB_BIND_BREADCRUMB_ITEM_KEY = Symbol('BREADCRUMB_BIND_BREADCRUMB_ITEM_KEY')
+export const BREADCRUMB_COUNT_BREADCRUMB_ITEM_KEY = Symbol('BREADCRUMB_COUNT_BREADCRUMB_ITEM_KEY')
+
+export function useBreadcrumbList() {
+  const { childProviders, bindChildren } = useChildren<BreadcrumbProvider, BreadcrumbItemProvider>(
+    BREADCRUMB_BIND_BREADCRUMB_ITEM_KEY
+  )
+  const { length } = useAtChildrenCounter(BREADCRUMB_COUNT_BREADCRUMB_ITEM_KEY)
+
+  return {
+    length,
+    breadcrumbList: childProviders,
+    bindBreadcrumbList: bindChildren,
+  }
+}

packages/varlet-ui/varlet.config.mjs

@@ -13,7 +13,10 @@ export default defineConfig({
           'Vue 2': 'https://varlet.gitee.io/varlet-ui-vue2/',
         },
       },
-      playground: process.env.NODE_ENV === 'development' ? 'http://localhost:3000': 'https://varlet.gitee.io/varlet-ui-playground',
+      playground:
+        process.env.NODE_ENV === 'development'
+          ? 'http://localhost:3000'
+          : 'https://varlet.gitee.io/varlet-ui-playground',
     },
     menu: [
       {
@@ -317,6 +320,14 @@ export default defineConfig({
         doc: 'table',
         type: 2,
       },
+      {
+        text: {
+          'zh-CN': 'Breadcrumb 面包屑',
+          'en-US': 'Breadcrumb',
+        },
+        doc: 'breadcrumb',
+        type: 2,
+      },
       {
         text: {
           'zh-CN': '导航组件',
@@ -421,7 +432,7 @@ export default defineConfig({
       {
         text: {
           'zh-CN': 'Overlay 遮罩层',
-          'en-US': 'Overlay'
+          'en-US': 'Overlay',
         },
         doc: 'overlay',
         type: 2,