增加面包屑导航组件

src/breadcrumb/index.js

@@ -0,0 +1,89 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/04/10 16:12:33
+ */
+
+import { css, html, Component, bind, styleMap } from '@bd/core'
+
+const last = Symbol('last')
+
+class Breadcrumb extends Component {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 32px;
+        font-size: 14px;
+      }
+    `
+  ]
+
+  #updateChildrenStat(checkAll) {
+    let list = Array.from(this.children)
+    list.forEach((it, i) => {
+      if (it.tagName === 'WC-BREADCRUMB-ITEM') {
+        if (list.length === i + 1) {
+          it.last = true
+        }
+      } else {
+        it.remove()
+      }
+    })
+  }
+
+  mounted() {
+    this.#updateChildrenStat()
+  }
+}
+
+class Item extends Component {
+  static props = {
+    path: '',
+    separator: '/'
+  }
+
+  static styles = [
+    css`
+      :host,
+      .breadcrumb-item {
+        display: inline-flex;
+        align-items: center;
+        height: 32px;
+        font-size: 14px;
+      }
+      .separator {
+        margin: 0 8px;
+        user-select: none;
+      }
+    `
+  ]
+
+  get last() {
+    return this[last] || false
+  }
+
+  set last(val) {
+    this[last] = !!val
+    this.$requestUpdate()
+  }
+
+  render() {
+    return html`
+      <label class="breadcrumb-item">
+        <slot></slot>
+        <span
+          class="separator"
+          style=${styleMap({ display: this[last] ? 'none' : '' })}
+        >
+          <slot name="separator"> ${this.separator || '/'} </slot>
+        </span>
+      </label>
+    `
+  }
+}
+
+Breadcrumb.reg('breadcrumb')
+Item.reg('breadcrumb-item')