feat: overlay

Author: oOBobbyOo

packages/hbui-vue/docs/.vitepress/config/sidebar.ts

@@ -27,6 +27,10 @@ const sidebar = [
         "text": "Icon 图标",
         "link": "/components/icon/"
       },
+      {
+        "text": "Overlay 遮罩层",
+        "link": "/components/overlay/"
+      },
       {
         "text": "Status 状态",
         "link": "/components/status/"

packages/hbui-vue/docs/components/overlay/index.md

@@ -0,0 +1,62 @@
+# Overlay 遮罩层
+
+遮罩层属于基础组件，用于构建独立于当前页面布局的组件。
+
+何时使用
+
+### 何时使用
+
+当你需要全局弹窗，或者需要元素跟随功能，便可以使用该组件。
+
+### 固定遮罩层
+
+:::demo
+
+```vue
+<template>
+  <hb-button @click="visible = !visible">显示遮罩层</hb-button>
+  <hb-fixed-overlay v-model="visible" :lock-scroll="false" class="demo-fixed-overlay-bg">
+    <div class="demo-fixed-overlay-container">Hello HbUI!</div>
+  </hb-fixed-overlay>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const visible = ref(false)
+
+    return { visible }
+  }
+})
+</script>
+
+<style>
+.demo-fixed-overlay-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20vw;
+  height: 20vh;
+  background: #fff;
+  color: #000;
+}
+
+.demo-fixed-overlay-bg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
+```
+
+:::
+
+### FixedOverlay 参数
+
+| 参数名                 | 类型      | 默认  | 说明                     | 跳转 Demo                 |
+| :--------------------- | :-------- | :---- | :----------------------- | :------------------------ |
+| v-model                | `boolean` | false | 可选，遮罩层是否可见     | [固定遮罩层](#固定遮罩层) |
+| lock-scroll            | `boolean` | true  | 可选，是否锁定背景滚动   |                           |
+| close-on-click-overlay | `boolean` | true  | 可选，是否点击遮罩层关闭 |                           |

packages/hbui-vue/ui/overlay/__test__/overlay.test.ts

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils'
+import { expect, test, it } from 'vitest'
+
+import { Overlay } from '../index'
+
+test('Overlay test', () => {
+  const wrapper = shallowMount(Overlay, {
+    props: {}
+  })
+
+  it('Overlay demo has created successfully', async () => {
+    expect(wrapper).toBeTruthy()
+  })
+})

packages/hbui-vue/ui/overlay/index.ts

@@ -0,0 +1,26 @@
+import type { App } from 'vue'
+import { FixedOverlay } from './src/fixed-overlay'
+import { inBrowser } from '@utils/common-var'
+
+export * from './src/fixed-overlay/fixed-overlay-types'
+
+export { FixedOverlay }
+
+export default {
+  title: 'Overlay 遮罩层',
+  category: '通用',
+  status: '50%',
+  install(app: App) {
+    app.component(FixedOverlay.name, FixedOverlay)
+
+    if (inBrowser && !document.getElementById('hb-overlay-anchor')) {
+      const overlayAnchor = document.createElement('div')
+      overlayAnchor.setAttribute('id', 'hb-overlay-anchor')
+      overlayAnchor.style.position = 'fixed'
+      overlayAnchor.style.left = '0'
+      overlayAnchor.style.top = '0'
+      overlayAnchor.style.zIndex = '1000'
+      document.body.appendChild(overlayAnchor)
+    }
+  }
+}

packages/hbui-vue/ui/overlay/src/base/base-overlay-types.ts

@@ -0,0 +1,14 @@
+import type { ExtractPropTypes } from 'vue'
+
+export const overlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true
+  }
+}
+
+export type OverlayProps = ExtractPropTypes<typeof overlayProps>

packages/hbui-vue/ui/overlay/src/base/base-overlay.scss

@@ -0,0 +1,45 @@
+@import '@hbui/styles-var/index.scss';
+
+.#{$hbui-prefix}-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $hbui-shadow;
+  z-index: 1050;
+}
+
+.#{$hbui-prefix}-overlay__fade {
+  @mixin hb-overlay-fade-animation {
+    animation-name: hb-overlay-fade;
+    animation-duration: 0.3s;
+  }
+  @keyframes hb-overlay-fade {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  &-enter {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    @include hb-overlay-fade-animation;
+  }
+
+  &-leave {
+    opacity: 1;
+  }
+
+  &-leave-active {
+    @include hb-overlay-fade-animation;
+
+    animation-direction: reverse;
+  }
+}

packages/hbui-vue/ui/overlay/src/base/base-overlay.tsx

@@ -0,0 +1,18 @@
+import { defineComponent, renderSlot, Teleport, Transition } from 'vue'
+import type { SetupContext } from 'vue'
+import { OverlayProps } from './base-overlay-types'
+import { useNamespace } from '@hooks/use-namespace'
+import './base-overlay.scss'
+
+export default defineComponent({
+  name: 'HbOverlay',
+  setup(props: OverlayProps, ctx: SetupContext) {
+    const ns = useNamespace('overlay')
+
+    return () => (
+      <Teleport to='#hb-overlay-anchor'>
+        <Transition name={ns.e('fade')}>{renderSlot(ctx.slots, 'default')}</Transition>
+      </Teleport>
+    )
+  }
+})

packages/hbui-vue/ui/overlay/src/fixed-overlay/fixed-overlay-types.ts

@@ -0,0 +1,22 @@
+import type { ExtractPropTypes } from 'vue'
+
+export const fixedOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true
+  }
+} as const
+
+export type FixedOverlayProps = ExtractPropTypes<typeof fixedOverlayProps>
+
+export interface UseFixedOverlay {
+  onClick: (e: Event) => void
+}

packages/hbui-vue/ui/overlay/src/fixed-overlay/fixed-overlay.scss

@@ -0,0 +1,21 @@
+@import '@hbui/styles-var/index.scss';
+
+.#{$hbui-prefix}-fixed-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: $hbui-shadow;
+  z-index: 1050;
+}
+
+.#{$hbui-prefix}-fixed-overlay--fade-enter-active,
+.#{$hbui-prefix}-fixed-overlay--fade-leave-active {
+  transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+}
+
+.#{$hbui-prefix}-fixed-overlay--fade-enter-from,
+.#{$hbui-prefix}-fixed-overlay--fade-leave-to {
+  opacity: 0;
+}

packages/hbui-vue/ui/overlay/src/fixed-overlay/index.tsx

@@ -0,0 +1,27 @@
+import { defineComponent, SetupContext, toRefs, Transition } from 'vue'
+import { fixedOverlayProps, FixedOverlayProps } from './fixed-overlay-types'
+import { useFixedOverlay } from './use-fixed-overlay'
+import { useNamespace } from '@hooks/use-namespace'
+import './fixed-overlay.scss'
+
+export const FixedOverlay = defineComponent({
+  name: 'HbFixedOverlay',
+  inheritAttrs: false,
+  props: fixedOverlayProps,
+  emits: ['update:modelValue', 'click'],
+  setup(props: FixedOverlayProps, ctx: SetupContext) {
+    const { modelValue } = toRefs(props)
+    const ns = useNamespace('fixed-overlay')
+    const { onClick } = useFixedOverlay(props, ctx)
+
+    return () => (
+      <Transition name={ns.m('fade')}>
+        {modelValue.value && (
+          <div class={ns.b()} {...ctx.attrs} onClick={onClick}>
+            {ctx.slots.default?.()}
+          </div>
+        )}
+      </Transition>
+    )
+  }
+})

packages/hbui-vue/ui/overlay/src/fixed-overlay/use-fixed-overlay.ts

@@ -0,0 +1,34 @@
+import { onUnmounted, SetupContext, watch } from 'vue'
+import { FixedOverlayProps, UseFixedOverlay } from './fixed-overlay-types'
+import { lockScroll } from '@utils/lock-scroll'
+
+export function useFixedOverlay(props: FixedOverlayProps, ctx: SetupContext): UseFixedOverlay {
+  let lockScrollCb: () => void
+
+  const onClick = (event: Event) => {
+    event.preventDefault()
+    ctx.emit('click', event)
+    if (props.closeOnClickOverlay) {
+      ctx.emit('update:modelValue', false)
+    }
+  }
+
+  const removeBodyAdditions = () => {
+    lockScrollCb?.()
+  }
+
+  watch(
+    () => props.modelValue,
+    (val) => {
+      if (val) {
+        props.lockScroll && (lockScrollCb = lockScroll())
+      } else {
+        removeBodyAdditions()
+      }
+    }
+  )
+
+  onUnmounted(removeBodyAdditions)
+
+  return { onClick }
+}

packages/hbui-vue/ui/shared/utils/common-var.ts

@@ -0,0 +1 @@
+export const inBrowser = typeof window !== 'undefined'

packages/hbui-vue/ui/shared/utils/index.ts

@@ -1,2 +1,3 @@
+export * from './common-var'
 export * from './lock-scroll'
 export * from './is'

packages/hbui-vue/ui/vue-hbui.ts

@@ -7,11 +7,12 @@ import CardInstall, { Card } from './card'
 import DrawerInstall, { Drawer } from './drawer'
 import FullscreenInstall, { Fullscreen } from './fullscreen'
 import IconInstall, { Icon } from './icon'
+import OverlayInstall, { FixedOverlay } from './overlay'
 import StatusInstall, { Status } from './status'
 
-const installs = [AlertInstall, AvatarInstall, ButtonInstall, CardInstall, DrawerInstall, FullscreenInstall, IconInstall, StatusInstall]
+const installs = [AlertInstall, AvatarInstall, ButtonInstall, CardInstall, DrawerInstall, FullscreenInstall, IconInstall, OverlayInstall, StatusInstall]
 
-export { Alert, Avatar, Button, ButtonGroup, Card, Drawer, Fullscreen, Icon, Status }
+export { Alert, Avatar, Button, ButtonGroup, Card, Drawer, Fullscreen, Icon, FixedOverlay, Status }
 
 export default {
   version: '1.0.0',