refactor(overlay): move to script setup (#3065)

src/config.json

@@ -105,6 +105,7 @@
           "name": "Overlay",
           "cName": "遮罩层",
           "desc": "创建一个遮罩层，通常用于阻止用户进行其他操作",
+          "setup": true,
           "author": "szg2008"
         },
         {

src/packages/__VUE/dialog/index.ts

@@ -2,7 +2,7 @@ import Dialog from './index.vue'
 import { h, VNode, CSSProperties, Component, nextTick } from 'vue'
 import NutPopup from '../popup/index.vue'
 import NutButton from '../button'
-import NutOverlay from '../overlay/index.vue'
+import NutOverlay from '../overlay'
 import { CreateComponent } from '@/packages/utils/create'
 export class DialogOptions {
   title?: string = ''

src/packages/__VUE/fixednav/index.taro.vue

@@ -3,13 +3,8 @@
     <nut-overlay v-if="overlay" :visible="visible" :z-index="200" @click="updateValue(false)" />
     <slot name="list">
       <view class="nut-fixed-nav__list">
-        <view
-          v-for="(item, index) in navList"
-          :key="item.id || index"
-          class="nut-fixed-nav__list-item"
-          :class="{ active: item.id == current }"
-          @click="selected(item, $event)"
-        >
+        <view v-for="(item, index) in navList" :key="item.id || index" class="nut-fixed-nav__list-item"
+              :class="{ active: item.id == current }" @click="selected(item, $event)">
           <img :src="item.icon" />
           <view class="span">{{ item.text }}</view>
           <view v-if="item.num" class="b">{{ item.num }}</view>
@@ -29,7 +24,7 @@
 <script lang="ts">
 import { PropType, computed, ref } from 'vue'
 import { Left } from '@nutui/icons-vue-taro'
-import NutOverlay from '../overlay/index.taro.vue'
+import NutOverlay from '../overlay/index.taro'
 import { createComponent } from '@/packages/utils/create'
 import { useLocale } from '@/packages/utils/useLocale'
 const { create } = createComponent('fixed-nav')

src/packages/__VUE/fixednav/index.vue

@@ -3,13 +3,8 @@
     <nut-overlay v-if="overlay" :visible="visible" :z-index="200" @click="updateValue(false)" />
     <slot name="list">
       <view class="nut-fixed-nav__list">
-        <view
-          v-for="(item, index) in navList"
-          :key="item.id || index"
-          class="nut-fixed-nav__list-item"
-          :class="{ active: item.id == current }"
-          @click="selected(item, $event)"
-        >
+        <view v-for="(item, index) in navList" :key="item.id || index" class="nut-fixed-nav__list-item"
+              :class="{ active: item.id == current }" @click="selected(item, $event)">
           <img :src="item.icon" />
           <view class="span">{{ item.text }}</view>
           <view v-if="item.num" class="b">{{ item.num }}</view>
@@ -29,7 +24,7 @@
 <script lang="ts">
 import { PropType, computed, ref } from 'vue'
 import { Left } from '@nutui/icons-vue'
-import NutOverlay from '../overlay/index.vue'
+import NutOverlay from '../overlay'
 import { createComponent } from '@/packages/utils/create'
 import { useLocale } from '@/packages/utils/useLocale'
 const { create } = createComponent('fixed-nav')

src/packages/__VUE/imagepreview/index.ts

@@ -7,7 +7,7 @@ import NutPopup from '../popup/index.vue'
 import NutVideo from '../video/index.vue'
 import NutSwiper from '../swiper/index.vue'
 import NutSwiperItem from '../swiperitem/index.vue'
-import NutOverlay from '../overlay/index.vue'
+import NutOverlay from '../overlay'
 
 export class ImagePreviewOptions {
   show = false

src/packages/__VUE/overlay/doc.en-US.md

@@ -76,6 +76,17 @@ Set `close on click override` to control whether the click mask is closed. If it
 | --- | --- |
 | default | Embedded Mask Content Customization |
 
+### Types version
+
+The component exports the following type definitions:
+
+```js
+import type {
+  OverlayProps,
+  OverlayInstance
+} from '@nutui/nutui';
+```
+
 ## Theming
 
 ### CSS Variables

src/packages/__VUE/overlay/doc.md

@@ -76,6 +76,17 @@ app.use(Overlay)
 | --- | --- |
 | default | 内嵌遮罩内容自定义 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  OverlayProps,
+  OverlayInstance
+} from '@nutui/nutui';
+```
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/overlay/doc.taro.md

@@ -76,6 +76,17 @@ app.use(Overlay)
 | --- | --- |
 | default | 内嵌遮罩内容自定义 |
 
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```js
+import type {
+  OverlayProps,
+  OverlayInstance
+} from '@nutui/nutui-taro';
+```
+
 ## 主题定制
 
 ### 样式变量

src/packages/__VUE/overlay/index.taro.ts

@@ -0,0 +1,11 @@
+import Overlay from './overlay.taro.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Overlay)
+
+export type { OverlayProps } from './overlay.taro.vue'
+
+export type OverlayInstance = ComponentPublicInstance & InstanceType<typeof Overlay>
+
+export { Overlay, Overlay as default }

src/packages/__VUE/overlay/index.ts

@@ -0,0 +1,11 @@
+import Overlay from './overlay.vue'
+import type { ComponentPublicInstance } from 'vue'
+import { withInstall } from '@/packages/utils'
+
+withInstall(Overlay)
+
+export type { OverlayProps } from './overlay.vue'
+
+export type OverlayInstance = ComponentPublicInstance & InstanceType<typeof Overlay>
+
+export { Overlay, Overlay as default }

src/packages/__VUE/overlay/overlay.taro.vue

@@ -0,0 +1,58 @@
+<template>
+  <Transition name="overlay-fade">
+    <view v-show="visible" :class="classes" :style="style" :catch-move="lockScroll" @click="onClick">
+      <slot></slot>
+    </view>
+  </Transition>
+</template>
+<script setup lang="ts">
+import { CSSProperties, computed } from 'vue'
+
+defineOptions({
+  name: 'NutOverlay'
+})
+
+export type OverlayProps = Partial<{
+  visible: boolean
+  zIndex: string | number
+  duration: string | number
+  lockScroll: boolean
+  overlayClass: string
+  overlayStyle: CSSProperties
+  closeOnClickOverlay: boolean
+}>
+
+const props = withDefaults(defineProps<OverlayProps>(), {
+  visible: false,
+  zIndex: 2000,
+  duration: 0.3,
+  lockScroll: true,
+  overlayClass: '',
+  closeOnClickOverlay: true
+})
+
+const emit = defineEmits(['click', 'update:visible'])
+
+const classes = computed(() => {
+  const prefixCls = 'nut-overlay'
+  return {
+    [prefixCls]: true,
+    [props.overlayClass]: true
+  }
+})
+
+const style = computed(() => {
+  return {
+    transitionDuration: `${props.duration}s`,
+    zIndex: props.zIndex,
+    ...props.overlayStyle
+  }
+})
+
+const onClick = (e: MouseEvent) => {
+  emit('click', e)
+  if (props.closeOnClickOverlay) {
+    emit('update:visible', false)
+  }
+}
+</script>