From 3ddb338055421197deb3267ea426e880922d4828 Mon Sep 17 00:00:00 2001
From: zcating <zcating@qq.com>
Date: Sun, 5 Sep 2021 13:32:21 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix(overlay):=20wrapperClass=20=E4=B8=8D?=
 =?UTF-8?q?=E5=AD=98=E5=9C=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/overlay/src/fixed-overlay.tsx | 20 ++++++--------------
 devui/overlay/src/overlay.scss      |  1 +
 sites/components/overlay/index.md   |  2 +-
 3 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/devui/overlay/src/fixed-overlay.tsx b/devui/overlay/src/fixed-overlay.tsx
index 5b6e903c..ea6aaadb 100644
--- a/devui/overlay/src/fixed-overlay.tsx
+++ b/devui/overlay/src/fixed-overlay.tsx
@@ -20,22 +20,14 @@ export const FixedOverlay = defineComponent({
     const overlayRef = ref<HTMLDivElement | null>(null);
     const handleBubbleCancel = (event: Event) => (event.cancelBubble = true);
 
-    const panelStyle: CSSProperties = {
-      position: 'fixed',
-      top: '0',
-      left: '0',
-      width: '100vw',
-      height: '100vh',
-      display: 'flex',
-    };
     return () => (
       <CommonOverlay>
-        <div v-show={props.visible} class={containerClass}>
-          <div
-            class={panelClass}
-            style={panelStyle}
-            onClick={handleBackdropClick}
-          >
+        <div
+          v-show={props.visible}
+          class={containerClass.value}
+          onClick={handleBackdropClick}
+        >
+          <div class={panelClass.value}>
             <div
               ref={overlayRef}
               class="d-overlay"
diff --git a/devui/overlay/src/overlay.scss b/devui/overlay/src/overlay.scss
index f0752579..9dac185c 100644
--- a/devui/overlay/src/overlay.scss
+++ b/devui/overlay/src/overlay.scss
@@ -4,6 +4,7 @@
   left: 0;
   height: 100%;
   width: 100%;
+  display: flex;
 
   &__disabled {
     pointer-events: none;
diff --git a/sites/components/overlay/index.md b/sites/components/overlay/index.md
index 6ea87353..43588394 100644
--- a/sites/components/overlay/index.md
+++ b/sites/components/overlay/index.md
@@ -2,7 +2,7 @@
 
 ### 固定浮层
 <d-button @click="() => fixedVisible = !fixedVisible">{{fixedVisible ? '隐藏' : '显示固定浮层' }}</d-button>
-<d-fixed-overlay v-model:visible="fixedVisible" wrapperClass="justify-center items-center" backgroundBlock>
+<d-fixed-overlay v-model:visible="fixedVisible" backgroundClass="justify-center items-center" backgroundBlock>
   <div style="height: 100px; width: 100px; background: red;">hello world</div>
 </d-fixed-overlay>
 
-- 
Gitee


From a6a15619b5a7a7c6766da905a7f4d0855778bbf7 Mon Sep 17 00:00:00 2001
From: zhuchenxi <zhu.chenxi@mdb-fintech.com>
Date: Tue, 7 Sep 2021 15:00:35 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(overlay):=20=E5=AE=8C=E5=96=84=20overl?=
 =?UTF-8?q?ay=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/overlay/src/flexible-overlay.tsx |   4 +
 sites/components/overlay/index.md      | 170 +++++++++++++++++++++----
 2 files changed, 150 insertions(+), 24 deletions(-)

diff --git a/devui/overlay/src/flexible-overlay.tsx b/devui/overlay/src/flexible-overlay.tsx
index 6129b187..1bc25367 100644
--- a/devui/overlay/src/flexible-overlay.tsx
+++ b/devui/overlay/src/flexible-overlay.tsx
@@ -84,6 +84,10 @@ export const FlexibleOverlay = defineComponent({
         });
       });
 
+      watch(toRef(props, 'position'), () => {
+        handleChange();
+      });
+
       const resizeObserver = new ResizeObserver((entries) => {
         handleRectChange(entries[0].contentRect);
       });
diff --git a/sites/components/overlay/index.md b/sites/components/overlay/index.md
index 43588394..9e62a237 100644
--- a/sites/components/overlay/index.md
+++ b/sites/components/overlay/index.md
@@ -1,46 +1,128 @@
 ## 浮层
-
+浮层属于基础组件，用于构建独立于当前页面布局的组件。
+### 何时使用
+当你需要全局弹窗，或者需要元素跟随功能，便可以使用该组件。
 ### 固定浮层
-<d-button @click="() => fixedVisible = !fixedVisible">{{fixedVisible ? '隐藏' : '显示固定浮层' }}</d-button>
-<d-fixed-overlay v-model:visible="fixedVisible" backgroundClass="justify-center items-center" backgroundBlock>
-  <div style="height: 100px; width: 100px; background: red;">hello world</div>
-</d-fixed-overlay>
 
+:::demo 使用`sm`，`''`，`lg`来定义`Search`基本类型
 
-### 弹性浮层
-<div class="h-1000 w-full flex items-center justify-center">
-  <div ref="origin" class="flex items-center justify-center h-100 w-100 text-white bg-gray">orgin</div>
-  <d-button @click="() => visible = !visible">{{visible ? '隐藏' : '显示' }}</d-button>
-</div>
+```vue
+<template>
+  <d-button @click="handleClick" style="width: 100px;">{{title}}</d-button>
+  <d-fixed-overlay 
+    v-model:visible="visible" 
+    backgroundClass="justify-center items-center bg-gray-50" 
+    backgroundBlock
+  >
+    <div class="h-100 w-100" style="background: red;">hello world</div>
+  </d-fixed-overlay>
+</template>
+<script>
+import { defineComponent, ref, computed } from 'vue';
+export default defineComponent({
+  setup() { 
+    const origin = ref();
+    const visible = ref(false);
+    const handleClick = () => visible.value = !visible.value;
+    const title = computed(() => visible.value ? '隐藏' : '显示固定浮层' );
+    return {
+      visible,
+      handleClick,
+      title
+    }
+  },
+});
+</script>
+```
+:::
 
-<d-flexible-overlay :origin="origin" v-model:visible="visible">
-  <div style="height: 100px; width: 100px; background: red;">hello world</div>
-</d-flexible-overlay>
 
+### 弹性浮层
+
+:::demo
+```vue
+<template>
+  <div class="h-500 w-full flex flex-column items-center justify-center">
+    <div 
+      ref="origin" 
+      class="flex items-center justify-center h-100 w-100 text-white bg-gray"
+    >orgin</div>
+    <d-button @click="handleVisible" style="margin: 20px;">{{title}}</d-button>
+    <div class="w-full mt-20">
+      <div class="flex mt-20">
+        <span style="width: 200px">依赖元素的 X 轴：</span>
+        <d-radio-group v-model="position.originX" :values="horizontalProps" css-style="row"/>
+      </div>
+      <div class="flex mt-20">
+        <span style="width: 200px">依赖元素的 Y 轴：</span>
+        <d-radio-group v-model="position.originY" :values="verticalProps" css-style="row"/>
+      </div>
+      <div class="flex mt-20">
+        <span style="width: 200px">Overlay X 轴：</span>
+        <d-radio-group v-model="position.overlayX" :values="horizontalProps" css-style="row"/>
+      </div>
+      <div class="flex mt-20">
+        <span style="width: 200px">Overlay Y 轴：</span>
+        <d-radio-group v-model="position.overlayY" :values="verticalProps" css-style="row"/>
+      </div>
+    </div>
+  </div>
 
-<script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue'
+  <d-flexible-overlay 
+    :origin="origin" 
+    v-model:visible="visible"
+    :position="position"
+  >
+    <div 
+      class="flex items-center justify-center text-white-50 h-100 w-100"
+      style="background: #673ab7;"
+    >hello world</div>
+  </d-flexible-overlay>
+</template>
+<script>
+import { defineComponent, ref, computed, reactive } from 'vue'
 
 export default defineComponent({
   setup() { 
     const origin = ref();
     const visible = ref(false);
-    const fixedVisible = ref(false);
-    onMounted(() => {
-      console.log(origin.value);
+    const title = computed(() => visible.value ? '隐藏' : '显示')
+    const handleVisible = () => visible.value = !visible.value;
+    
+    const horizontalProps = ['left', 'center', 'right'];
+    const verticalProps = ['top', 'center', 'bottom'];
+    const position = reactive({
+      originX: 'left', 
+      originY: 'top', 
+      overlayX: 'left', 
+      overlayY: 'top'
     });
+
     return {
       origin,
-      fixedVisible,
-      visible
+      visible,
+      handleVisible,
+      title,
+      position,
+      verticalProps, 
+      horizontalProps
     }
-  },
+  }
 })
 </script>
+```
+
+:::
+
 <style>
 .flex {
   display: flex;
 }
+
+.flex-column {
+  flex-direction: column;
+}
+
 .items-center {
   align-items: center;
 }
@@ -65,12 +147,52 @@ export default defineComponent({
   background: gray;
 }
 
-.h-1000 {
-  height: 1000px;
+.h-500 {
+  height: 500px;
 }
 
 .w-full {
   width: 100%;
 }
 
-</style>
\ No newline at end of file
+.bg-gray-50 {
+  background: #00000088;
+}
+
+.text-white-50 {
+  color: #ffffff88;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+</style>
+
+
+### API 
+d-fixed-overlay 参数
+
+|       参数       |            类型            | 默认  | 说明                                                              |
+| :--------------: | :------------------------: | :---: | :---------------------------------------------------------------- |
+|     visible      |         `boolean`          | false | 可选，浮层是否可见                                                |
+| onUpdate:visible | `(value: boolean) => void` |  --   | 可选，浮层取消可见事件                                            |
+| backgroundBlock  |         `boolean`          | false | 可选，如果为 true，背景不能滚动                                   |
+| backgroundClass  |          `string`          |  --   | 可选，背景的样式类                                                |
+|   hasBackdrop    |         `boolean`          | true  | 可选，如果为false，背景后下的内容将可以触发                       |
+|  backdropClick   |        `() => void`        |  --   | 可选，点击背景触发的事件                                          |
+|  backdropClose   |         `boolean`          | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，参数是 false |
+|   overlayStyle   |      `CSSProperties`       |  --   | 可选，浮层的样式                                                  |
+
+d-flexible-overlay 参数
+
+|       参数       |                                                                                                    类型                                                                                                    | 默认  | 说明                                                              |
+| :--------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---: | :---------------------------------------------------------------- |
+|     visible      |                                                                                                 `boolean`                                                                                                  | false | 可选，浮层是否可见                                                |
+| onUpdate:visible |                                                                                         `(value: boolean) => void`                                                                                         |  --   | 可选，浮层取消可见事件                                            |
+| backgroundBlock  |                                                                                                 `boolean`                                                                                                  | false | 可选，如果为 true，背景不能滚动                                   |
+| backgroundClass  |                                                                                                  `string`                                                                                                  |  --   | 可选，背景的样式类                                                |
+|   hasBackdrop    |                                                                                                 `boolean`                                                                                                  | true  | 可选，如果为false，背景后下的内容将可以触发                       |
+|  backdropClick   |                                                                                                `() => void`                                                                                                |  --   | 可选，点击背景触发的事件                                          |
+|  backdropClose   |                                                                                                 `boolean`                                                                                                  | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，参数是 false |
+|      origin      |                                                     `Element \| ComponentPublicInstance \| { x: number, y: number, width?: number, height?: number }`                                                      | false | 必选，你必须指定起点元素才能让浮层与该元素连接在一起              |
+|     position     | `{originX: HorizontalPos, originY: VerticalPos, overlayX: HorizontalPos, overlayY: VerticalPos } (type HorizontalPos = 'left' \| 'center' \| 'right') ( type VerticalPos = 'top' \| 'center' \| 'bottom')` | false | 可选，指定浮层与原点的连接点                                      |
-- 
Gitee