更新tabs组件

src/tabs/index.js

@@ -4,39 +4,139 @@
  * @date 2023/03/06 15:17:25
  */
 
-import { css, html, bind, Component } from '@bd/core'
+import { css, html, bind, Component, nextTick } from '@bd/core'
 
 class Tabs extends Component {
+  static props = {
+    tab: { type: String, attribute: false },
+    type: 'default',
+    'tab-position': 'top',
+    labels: []
+  }
+
+  static styles = [
+    css`
+      :host {
+        display: flex;
+      }
+
+      :host([tab-position='top']),
+      :host([tab-position='bottom']) {
+        flex-direction: column;
+      }
+      :host([tab-position='left']),
+      :host([tab-position='right']) {
+      }
+    `,
+
+    css`
+      .header {
+        user-select: none;
+      }
+    `
+  ]
+
+  #cache = {}
+
   render() {
     return html`
-      <h1>
+      <div class="tabs">
-        父组件内容
+        <header class="header" ref="tabs" @click=${this.selectTab}>
-        <slot ref="label" name="label">dsds</slot>
+          ${this.labels.map(
-      </h1>
+            (it, i) =>
-      <slot></slot>
+              html`<label class="label" data-key=${it.name}>${it.label}</label>`
+          )}
+        </header>
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
     `
   }
 
+  // 处理子组件的slot,穿透到父组件来
+  #parseSlot() {
+    this.labels.forEach((it, i) => {
+      let tab = this.$refs.tabs.children[i]
+      if (tab.lastElementChild) {
+        tab.replaceChild(it.el, tab.lastElementChild)
+      } else {
+        tab.append(it.el)
+      }
+      delete it.el
+    })
+  }
+
+  selectTab(ev) {
+    let elem = ev.target
+    let key
+    if (elem === ev.currentTarget) {
+      return
+    }
+
+    while (elem.tagName !== 'LABEL') {
+      elem = elem.parentNode
+    }
+
+    key = elem.dataset.key
+
+    if (key === this.tab) {
+      return
+    }
+
+    this.#cache[this.tab].tab
+      .$animate(true)
+      .then(_ => this.#cache[key].tab.$animate())
+
+    this.tab = key
+  }
+
   created() {
-    console.log(this.root)
     bind(this.root, 'slotchange', ev => {
       let children = ev.target.assignedNodes()
 
-      children.forEach(it => {
+      this.labels = children.map((it, i) => {
-        let slot = it.querySelector('[slot=label]')
+        let tmp = {
-        this.$refs.label.append(
+          label: it.label,
-          slot.cloneNode(true),
+          name: it.name || i,
-          this.$refs.label.firstChild
+          el: null,
-        )
+          tab: null
-        slot.remove()
+        }
+        this.#cache[tmp.name] = tmp
+        return tmp
       })
+
+      children.forEach((it, i) => {
+        let slot = it.querySelector('[slot=label]')
+        if (slot) {
+          this.labels[i].el = slot.cloneNode(true)
+          slot.remove()
+        }
+        this.labels[i].tab = it
+      })
+
+      nextTick(_ => this.#parseSlot())
+
+      if (!this.tab) {
+        this.tab = this.labels[0].name
+        this.labels[0].tab.$animate()
+      }
     })
   }
+
+  mounted() {
+    //
+  }
 }
 
 class Tab extends Component {
-  render() {
+  static animation = {}
-    return html`<div class="tab">这是卡片内部</div> `
+
+  static props = {
+    name: '',
+    label: '',
+    closable: false,
+    disabled: false
   }
 }