feat: init overlay component

packages/varlet-ui/src/overlay/Overlay.tsx

@@ -0,0 +1,41 @@
+import { defineComponent, defineEmits } from 'vue'
+import { props } from './props'
+import { useZIndex } from '../context/zIndex'
+import { createNamespace } from '../utils/components'
+
+import '../styles/common.less'
+import './overlay.less'
+
+const { n, classes } = createNamespace('overlay')
+
+export default defineComponent({
+  name: 'VarOverlay',
+  inheritAttrs: false,
+  props,
+  setup(props, { slots }) {
+    const { zIndex } = useZIndex(() => props.show, 3)
+    const hideOverlay = () => {
+      props['onUpdate:show']?.(false)
+    }
+
+    const renderOverlay = () => {
+      const { overlayClass = '', overlayStyle } = props
+      return (
+        <div
+          class={classes(n('overlay'), overlayClass)}
+          style={{
+            zIndex: zIndex.value - 1,
+            ...overlayStyle,
+          }}
+          onClick={hideOverlay}
+        >
+          {slots.default?.()}
+        </div>
+      )
+    }
+    return () => {
+      const { show } = props
+      return show && renderOverlay()
+    }
+  },
+})

packages/varlet-ui/src/overlay/docs/en-US.md

@@ -0,0 +1 @@
+# Overlay

packages/varlet-ui/src/overlay/docs/zh-CN.md

@@ -0,0 +1 @@
+# Overlay

packages/varlet-ui/src/overlay/example/index.vue

@@ -0,0 +1,48 @@
+<script setup>
+import VarOverlay from '../Overlay'
+import VarButton from '../../button'
+import VarSpace from '../../space'
+import { AppType, watchLang, watchDarkMode } from '@varlet/cli/client'
+import dark from '../../themes/dark'
+import { reactive, toRefs } from 'vue'
+import { pack, use } from './local'
+
+const values = reactive({
+  baseOverlay: false,
+  contentOverlay: false,
+})
+
+const { baseOverlay, contentOverlay } = toRefs(values)
+
+watchLang(use)
+watchDarkMode(dark)
+</script>
+
+<template>
+  <app-type>{{ pack.overlayBase }}</app-type>
+  <var-space>
+    <var-button @click="baseOverlay = true">{{ pack.showOverlay }}</var-button>
+  </var-space>
+
+  <var-overlay v-model:show="baseOverlay" />
+
+  <app-type>{{ pack.overlayContent }}</app-type>
+  <var-space>
+    <var-button @click="contentOverlay = true">{{ pack.overlayContent }}</var-button>
+  </var-space>
+
+  <var-overlay v-model:show="contentOverlay">
+    <div class="popup-example-block">
+      素胚勾勒出青花笔锋浓转淡, 瓶身描绘的牡丹一如你初妆, 冉冉檀香透过窗心事我了然, 宣纸上走笔至此搁一半。
+    </div>
+  </var-overlay>
+</template>
+
+<style>
+.popup-example-block {
+  padding: 20px 24px;
+  width: 250px;
+  background: #fff;
+  border-radius: 5px;
+}
+</style>

packages/varlet-ui/src/overlay/example/local/en-US.ts

@@ -0,0 +1,5 @@
+export default {
+  overlayBase: 'overlayBase',
+  overlayContent: 'overlayContent',
+  showOverlay: 'showOverlay',
+}

packages/varlet-ui/src/overlay/example/local/index.ts

@@ -0,0 +1,23 @@
+// lib
+import _zhCN from '../../../locale/zh-CN'
+import _enCN from '../../../locale/en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+import enUS from './en-US'
+import { useLocale, add as _add, use as _use } from '../../../locale'
+
+const { add, use: exampleUse, pack, packs, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, pack, packs, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN as any)
+add('en-US', enUS as any)

packages/varlet-ui/src/overlay/example/local/zh-CN.ts

@@ -0,0 +1,5 @@
+export default {
+  overlayBase: '基础用法',
+  overlayContent: '嵌入内容',
+  showOverlay: '显示遮罩层',
+}

packages/varlet-ui/src/overlay/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import Overlay from './Overlay'
+
+Overlay.install = function (app: App) {
+  app.component(Overlay.name, Overlay)
+}
+
+export const _PopupComponent = Overlay
+
+export default Overlay

packages/varlet-ui/src/overlay/overlay.less

@@ -0,0 +1,18 @@
+:root {
+  --popup-overlay-background-color: rgba(0, 0, 0, 0.6);
+}
+
+.var-overlay {
+  &__overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--popup-overlay-background-color);
+    transition: all 0.25s;
+  }
+}

packages/varlet-ui/src/overlay/props.ts

@@ -0,0 +1,17 @@
+import { PropType } from 'vue'
+
+export const props = {
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  overlayClass: {
+    type: String,
+  },
+  overlayStyle: {
+    type: Object,
+  },
+  'onUpdate:show': {
+    type: Function as PropType<(show: boolean) => void>,
+  },
+}

packages/varlet-ui/varlet.config.mjs

@@ -418,6 +418,14 @@ export default defineConfig({
         doc: 'pull-refresh',
         type: 2,
       },
+      {
+        text: {
+          'zh-CN': 'Overlay 遮罩层',
+          'en-US': 'Overlay'
+        },
+        doc: 'overlay',
+        type: 2,
+      },
       {
         text: {
           'zh-CN': 'Popup 弹出层',