From 3eab56a04972efa43b1c56c95dba07cb7f6f2b27 Mon Sep 17 00:00:00 2001
From: chenjiajian <770230504@qq.com>
Date: Fri, 28 Apr 2023 18:33:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96collapse=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/collapse/index.js   | 39 +++++++++++---------
 src/popconfirm/index.js | 82 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 104 insertions(+), 17 deletions(-)
 create mode 100644 src/popconfirm/index.js

diff --git a/src/collapse/index.js b/src/collapse/index.js
index 38cda0c..62cff09 100644
--- a/src/collapse/index.js
+++ b/src/collapse/index.js
@@ -4,7 +4,7 @@
  * @date 2023/03/26 16:14:10
  */
 
-import { css, html, Component } from '@bd/core'
+import { css, html, Component, styleMap, nextTick } from '@bd/core'
 import '../icon/index.js'
 
 class Collapse extends Component {
@@ -60,6 +60,7 @@ class Collapse extends Component {
   mounted() {
     this.$children = Array.from(this.children)
     this.updateView()
+    this.$on('updateValue', e => this.updateValue(e.name))
   }
 }
 class CollapseItem extends Component {
@@ -69,6 +70,7 @@ class CollapseItem extends Component {
     disabled: false
   }
   _show = false
+  contentHeight = 0
   static styles = [
     css`
       :host {
@@ -117,37 +119,40 @@ class CollapseItem extends Component {
     if (this.disabled) {
       return
     }
-    this.parentNode.updateValue(this.name)
+    this.$emit('updateValue', { name: this.name })
   }
   get show() {
     return this._show
   }
   set show(val) {
-    const { content, wrapper, icon } = this.$refs
-    if (!wrapper) {
-      this.onMounted = () => (this.show = val)
-      return
-    }
-    if (val) {
-      wrapper.style.height = content.offsetHeight + 'px'
-      icon.style.transform = 'rotate(90deg)'
-    } else {
-      wrapper.style.height = 0
-      icon.style.transform = 'rotate(0deg)'
-    }
     this._show = val
+    this.contentHeight = this.$refs.content?.offsetHeight || 0
+    this.$requestUpdate()
   }
   mounted() {
-    this.onMounted && this.onMounted()
+    nextTick(() => {
+      this.contentHeight = this.$refs.content.offsetHeight
+      this.$requestUpdate()
+    })
   }
   render() {
     return html`
       <div class=${this.disabled ? 'disabled' : ''}>
         <div class="title" @click=${this.onClick}>
           ${this.title ? this.title : html`<slot name="title"></slot>`}
-          <wc-icon name="right" ref="icon"></wc-icon>
+          <wc-icon
+            name="right"
+            style=${styleMap({
+              transform: `rotate(${this.show ? 90 : 0}deg)`
+            })}
+          ></wc-icon>
         </div>
-        <div class="wrapper" ref="wrapper">
+        <div
+          class="wrapper"
+          style=${styleMap({
+            height: this.show ? `${this.contentHeight}px` : 0
+          })}
+        >
           <div class="content" ref="content">
             <slot></slot>
           </div>
diff --git a/src/popconfirm/index.js b/src/popconfirm/index.js
new file mode 100644
index 0000000..cbbcfd3
--- /dev/null
+++ b/src/popconfirm/index.js
@@ -0,0 +1,82 @@
+/**
+ * {气泡确认框}
+ * @author chensbox<chensbox@foxmail.com>
+ * @date 2023/04/28 16:14:10
+ */
+
+import { css, html, Component } from '@bd/core'
+
+class Popconfirm extends Component {
+  static props = {
+    title: {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    'confirm-button-text': {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    'cancel-button-text': {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    'confirm-button-type': {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    'cancel-button-type': {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    icon: {
+      type: String,
+      default: null,
+      attribute: false
+    },
+    'icon-color': {
+      type: Number,
+      default: null,
+      attribute: false
+    },
+    hidden: false
+  }
+
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+      .popover {
+        z-index: 10;
+        position: absolute;
+        padding: 12px;
+        min-width: 150px;
+        border-radius: 4px;
+        border: 1px solid #ebeef5;
+        color: #606266;
+        line-height: 1.4;
+        text-align: justify;
+        font-size: 14px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        word-break: break-all;
+        background: #fff;
+      }
+    `
+  ]
+  render() {
+    return html`
+      <div class="popconfirm">
+        <slot></slot>
+        <div class="popover"></div>
+      </div>
+    `
+  }
+}
+
+Popconfirm.reg('popconfirm')