From 511b464a107fd67a572a40a40135855bbe60b9ea Mon Sep 17 00:00:00 2001
From: zcating <zcating@qq.com>
Date: Mon, 29 Nov 2021 16:36:31 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(overlay):=20API=E5=8F=98=E6=9B=B4?=
 =?UTF-8?q?=EF=BC=9A=20backdropClick=20=3D>=20onBackdropClick?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/devui-vue/devui/overlay/src/fixed-overlay.tsx   | 5 +++--
 .../devui-vue/devui/overlay/src/flexible-overlay.tsx     | 4 ++--
 packages/devui-vue/devui/overlay/src/overlay-types.ts    | 9 ++++++---
 packages/devui-vue/devui/overlay/src/utils.ts            | 3 +--
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/devui-vue/devui/overlay/src/fixed-overlay.tsx b/packages/devui-vue/devui/overlay/src/fixed-overlay.tsx
index c4ccfa03..6d8f57c1 100644
--- a/packages/devui-vue/devui/overlay/src/fixed-overlay.tsx
+++ b/packages/devui-vue/devui/overlay/src/fixed-overlay.tsx
@@ -1,12 +1,13 @@
-import { defineComponent, ref, renderSlot, CSSProperties, PropType } from 'vue';
+import { defineComponent, renderSlot } from 'vue';
 import { CommonOverlay } from './common-overlay';
-import { fixedOverlayProps, FixedOverlayProps } from './overlay-types';
+import { fixedOverlayProps, FixedOverlayProps, overlayEmits } from './overlay-types';
 import { useOverlayLogic } from './utils';
 import './overlay.scss';
 
 export const FixedOverlay = defineComponent({
   name: 'DFixedOverlay',
   props: fixedOverlayProps,
+  emits: overlayEmits,
   setup(props: FixedOverlayProps, ctx) {
     const {
       backgroundClass,
diff --git a/packages/devui-vue/devui/overlay/src/flexible-overlay.tsx b/packages/devui-vue/devui/overlay/src/flexible-overlay.tsx
index 42556b58..18320b2f 100644
--- a/packages/devui-vue/devui/overlay/src/flexible-overlay.tsx
+++ b/packages/devui-vue/devui/overlay/src/flexible-overlay.tsx
@@ -13,7 +13,7 @@ import {
   watch,
 } from 'vue';
 import { CommonOverlay } from './common-overlay';
-import { OriginOrDomRef, flexibleOverlayProps, FlexibleOverlayProps, Point, Origin, ConnectionPosition } from './overlay-types';
+import { OriginOrDomRef, flexibleOverlayProps, FlexibleOverlayProps, Point, Origin, ConnectionPosition, overlayEmits } from './overlay-types';
 import { useOverlayLogic } from './utils';
 
 import { getElement, isComponent } from '../../shared/util/dom';
@@ -24,7 +24,7 @@ import { getElement, isComponent } from '../../shared/util/dom';
 export const FlexibleOverlay = defineComponent({
   name: 'DFlexibleOverlay',
   props: flexibleOverlayProps,
-  emits: ['onUpdate:visible'],
+  emits: overlayEmits,
   setup(props: FlexibleOverlayProps, ctx) {
     // lift cycle
     const overlayRef = ref<Element | null>(null);
diff --git a/packages/devui-vue/devui/overlay/src/overlay-types.ts b/packages/devui-vue/devui/overlay/src/overlay-types.ts
index f90ccfb7..23f933eb 100644
--- a/packages/devui-vue/devui/overlay/src/overlay-types.ts
+++ b/packages/devui-vue/devui/overlay/src/overlay-types.ts
@@ -18,7 +18,7 @@ export const overlayProps = {
   backgroundStyle: {
     type: [String, Object] as PropType<StyleValue>
   },
-  backdropClick: {
+  onBackdropClick: {
     type: Function,
   },
   backdropClose: {
@@ -31,6 +31,7 @@ export const overlayProps = {
   },
 } as const;
 
+export const overlayEmits = ['onUpdate:visible', 'backdropClick'] as ['onUpdate:visible', 'backdropClick'];
 export type OverlayProps = ExtractPropTypes<typeof overlayProps>;
 
 
@@ -41,9 +42,9 @@ export const fixedOverlayProps = {
     default: undefined,
   },
 };
-
 export type FixedOverlayProps = ExtractPropTypes<typeof fixedOverlayProps>;
 
+
 export const flexibleOverlayProps = {
   origin: {
     type: Object as PropType<OriginOrDomRef>,
@@ -51,7 +52,7 @@ export const flexibleOverlayProps = {
   },
   position: {
     type: Object as PropType<ConnectionPosition>,
-    default: () => ({
+    default: (): ConnectionPosition => ({
       originX: 'left',
       originY: 'top',
       overlayX: 'left',
@@ -62,6 +63,8 @@ export const flexibleOverlayProps = {
 }
 
 
+
+
 export interface ClientRect {
   bottom: number
   readonly height: number
diff --git a/packages/devui-vue/devui/overlay/src/utils.ts b/packages/devui-vue/devui/overlay/src/utils.ts
index 4f115130..cd7f89c1 100644
--- a/packages/devui-vue/devui/overlay/src/utils.ts
+++ b/packages/devui-vue/devui/overlay/src/utils.ts
@@ -22,8 +22,7 @@ export function useOverlayLogic(props: OverlayProps): CommonInfo {
 
   const handleBackdropClick = (event: Event) => {
     event.preventDefault();
-
-    props.backdropClick?.();
+    props.onBackdropClick?.();
     if (props.backdropClose) {
       props['onUpdate:visible']?.(false);
     }
-- 
Gitee


From 5ab7fd90ae516eb178121770e072e3632daf4caa Mon Sep 17 00:00:00 2001
From: zcating <zcating@qq.com>
Date: Mon, 29 Nov 2021 16:37:08 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(overlay-doc):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=EF=BC=8C=E6=96=B0=E5=A2=9E=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E8=B0=83=E7=94=A8=E6=96=B9=E5=BC=8F=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/components/overlay/index.md          | 97 +++++++++++++------
 1 file changed, 67 insertions(+), 30 deletions(-)

diff --git a/packages/devui-vue/docs/components/overlay/index.md b/packages/devui-vue/docs/components/overlay/index.md
index 7d604b35..3b57bcc3 100644
--- a/packages/devui-vue/docs/components/overlay/index.md
+++ b/packages/devui-vue/docs/components/overlay/index.md
@@ -14,7 +14,12 @@
     backgroundClass="justify-center items-center bg-gray-50" 
     backgroundBlock
   >
-    <div class="h-100 w-100" style="background: red;">hello world</div>
+    <div 
+      class="h-100 w-100 flex justify-center items-center" 
+      style="background: #5e7ce0; color: white;"
+    >
+      hello world
+    </div>
   </d-fixed-overlay>
 </template>
 <script>
@@ -42,7 +47,7 @@ export default defineComponent({
 :::demo
 ```vue
 <template>
-  <div class="h-500 w-full flex flex-column items-center justify-center">
+  <div class="h-900 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"
@@ -50,21 +55,38 @@ export default defineComponent({
     <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>
+        <span style="width: 300px">依赖元素的 X 轴(position.originX)：</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>
+        <span style="width: 300px">依赖元素的 Y 轴(position.originY)：</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>
+        <span style="width: 300px">Overlay X 轴(position.overlayX)：</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>
+        <span style="width: 300px">Overlay Y 轴(position.overlayY)：</span>
         <d-radio-group v-model="position.overlayY" :values="verticalProps" css-style="row"/>
       </div>
+      <div class="flex mt-20">
+        <span style="width: 300px">背景交互(hasBackdrop)：</span>
+        <d-checkbox v-model="hasBackdrop" :label="hasBackdrop ? '开启': '关闭'" />
+      </div>
+      <div class="flex mt-20">
+        <span style="width: 300px">背景关闭 overlay (backdropClose)：</span>
+        <d-checkbox v-model="backdropClose" :label="backdropClose ? '开启': '关闭'" />
+      </div>
+      <div class="flex mt-20">
+        <span style="width: 300px">背景禁用滚动(backgroundBlock)：</span>
+        <d-checkbox v-model="backgroundBlock" :label="backgroundBlock ? '开启': '关闭'" />
+      </div>
+      <div class="flex mt-20">
+        <span style="width: 300px">点击背景触发事件(backdropClick)：</span>
+        <d-checkbox style="margin-right:20px" v-model="backdropClickEnabled" :label="backdropClickEnabled ? '开启': '关闭'" />
+        <d-input v-if="backdropClickEnabled" v-model:value="backdropClickText" />
+      </div>
     </div>
   </div>
 
@@ -72,10 +94,15 @@ export default defineComponent({
     :origin="origin" 
     v-model:visible="visible"
     :position="position"
+    :hasBackdrop="hasBackdrop"
+    :backdropClose="backdropClose"
+    :backgroundBlock="backgroundBlock"
+    @backdropClick="backdropClick"
   >
     <div 
       class="flex items-center justify-center text-white-50 h-100 w-100"
       style="background: #673ab7;"
+      @click="handleVisible"
     >hello world</div>
   </d-flexible-overlay>
 </template>
@@ -98,6 +125,10 @@ export default defineComponent({
       overlayY: 'top'
     });
 
+    const backdropClickText = ref('点击背景将会触发 alert.');
+    const backdropClickEnabled = ref(false);
+    const backdropClick = computed(() => backdropClickEnabled.value ? () => alert(backdropClickText.value): null);
+
     return {
       origin,
       visible,
@@ -105,7 +136,13 @@ export default defineComponent({
       title,
       position,
       verticalProps, 
-      horizontalProps
+      horizontalProps,
+      hasBackdrop: ref(true),
+      backdropClose: ref(true),
+      backgroundBlock: ref(false),
+      backdropClickText,
+      backdropClickEnabled,
+      backdropClick
     }
   }
 })
@@ -172,32 +209,32 @@ export default defineComponent({
 ### API
 d-fixed-overlay 参数
 
-|       参数       |            类型            | 默认  | 说明                                                                  |
-| :--------------: | :------------------------: | :---: | :-------------------------------------------------------------------- |
-|     visible      |         `boolean`          | false | 可选，遮罩层是否可见                                                  |
-| onUpdate:visible | `(value: boolean) => void` |  --   | 可选，遮罩层取消可见事件                                              |
-| backgroundBlock  |         `boolean`          | false | 可选，如果为 true，背景不能滚动                                       |
-| backgroundClass  |          `string`          |  --   | 可选，背景的样式类                                                    |
-| backgroundStyle  |          `StyleValue`      |  --   | 可选，背景的样式                                                    |
-|  backdropClick   |        `() => void`        |  --   | 可选，点击背景触发的事件                                              |
-|  backdropClose   |         `boolean`          | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，默认参数是 false |
-|   hasBackdrop    |         `boolean`          | true | 可选，如果为false，背景元素的 `point-event` 会设为 `none`，且不显示默认背景 |
-|   overlayStyle   |      `CSSProperties`       |  --   | 可选，遮罩层的样式                                                    |
+|       参数       |            类型            | 默认  | 说明                                                                        |
+| :--------------: | :------------------------: | :---: | :-------------------------------------------------------------------------- |
+|     visible      |         `boolean`          | false | 可选，遮罩层是否可见                                                        |
+| onUpdate:visible | `(value: boolean) => void` |  --   | 可选，遮罩层取消可见事件                                                    |
+| backgroundBlock  |         `boolean`          | false | 可选，如果为 true，背景不能滚动                                             |
+| backgroundClass  |          `string`          |  --   | 可选，背景的样式类                                                          |
+| backgroundStyle  |        `StyleValue`        |  --   | 可选，背景的样式                                                            |
+| onBackdropClick  |        `() => void`        |  --   | 可选，点击背景触发的事件                                                    |
+|  backdropClose   |         `boolean`          | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，默认参数是 false       |
+|   hasBackdrop    |         `boolean`          | true  | 可选，如果为false，背景元素的 `point-event` 会设为 `none`，且不显示默认背景 |
+|   overlayStyle   |      `CSSProperties`       |  --   | 可选，遮罩层的样式                                                          |
 
 d-flexible-overlay 参数
 
-|       参数       |                                                                                                    类型                                                                                                    | 默认  | 说明                                                              |
-| :--------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---: | :---------------------------------------------------------------- |
-|     visible      |                                                                                                 `boolean`                                                                                                  | false | 可选，遮罩层是否可见                                              |
-| onUpdate:visible |                                                                                         `(value: boolean) => void`                                                                                         |  --   | 可选，遮罩层取消可见事件                                          |
-| backgroundBlock  |                                                                                                 `boolean`                                                                                                  | false | 可选，如果为 true，背景不能滚动                                   |
-| backgroundClass  |                                                                                                  `string`                                                                                                  |  --   | 可选，背景的样式类                                                |
-| backgroundStyle  |          `StyleValue`      |  --   | 可选，背景的样式                                                    |
-|  backdropClick   |                                                                                                `() => void`                                                                                                |  --   | 可选，点击背景触发的事件                                          |
-|  backdropClose   |                                                                                                 `boolean`                                                                                                  | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，参数是 false |
-|  hasBackdrop     |         `boolean`          | true | 可选，如果为false，背景元素的 `point-event` 会设为 `none`，且不显示默认背景 |
-|      origin      | `Element \| ComponentPublicInstance \| Rect` | false | 必选，你必须指定起点元素才能让遮罩层与该元素连接在一起            |
-|     position     | `ConnectionPosition` | false | 可选，指定遮罩层与原点的连接点                                    |
+|       参数       |                     类型                     | 默认  | 说明                                                                        |
+| :--------------: | :------------------------------------------: | :---: | :-------------------------------------------------------------------------- |
+|     visible      |                  `boolean`                   | false | 可选，遮罩层是否可见                                                        |
+| onUpdate:visible |          `(value: boolean) => void`          |  --   | 可选，遮罩层取消可见事件                                                    |
+| backgroundBlock  |                  `boolean`                   | false | 可选，如果为 true，背景不能滚动                                             |
+| backgroundClass  |                   `string`                   |  --   | 可选，背景的样式类                                                          |
+| backgroundStyle  |                 `StyleValue`                 |  --   | 可选，背景的样式                                                            |
+| onBackdropClick  |                 `() => void`                 |  --   | 可选，点击背景触发的事件                                                    |
+|  backdropClose   |                  `boolean`                   | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，参数是 false           |
+|   hasBackdrop    |                  `boolean`                   | true  | 可选，如果为false，背景元素的 `point-event` 会设为 `none`，且不显示默认背景 |
+|      origin      | `Element \| ComponentPublicInstance \| Rect` | false | 必选，你必须指定起点元素才能让遮罩层与该元素连接在一起                      |
+|     position     |             `ConnectionPosition`             | false | 可选，指定遮罩层与原点的连接点                                              |
 
 Rect 数据结构
 ```typescript
-- 
Gitee