feat(drawer): add showAnimation prop (#193)

* feat(drawer): add showAnimation prop * fix(drawer): fix question of type checking

Author: lnzhangsong

packages/devui-vue/devui/drawer/src/components/drawer-body.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, inject, computed } from 'vue'
+import { defineComponent, inject, computed, Transition } from 'vue'
 
 import './drawer-body.scss'
 
@@ -14,6 +14,7 @@ export default defineComponent({
  const visible: boolean = inject('visible')
  const backdropCloseable: any = inject('backdropCloseable')
  const destroyOnHide: any = inject('destroyOnHide')
+ const showAnimation: any = inject('showAnimation')
 
  const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : { 'left': 0 })
  const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value)
@@ -34,6 +35,8 @@ export default defineComponent({
  navRight,
  navWidth,
  visible,
+ position,
+ showAnimation,
  clickContent,
  handleDrawerClose,
  destroyOnHide,
@@ -42,25 +45,27 @@ export default defineComponent({
 
  render() {
  const {
- zindex, slots, isCover, navRight, navWidth, 
- visible, handleDrawerClose, destroyOnHide } = this
+ zindex, slots, isCover, navRight, navWidth, showAnimation,
+ visible, handleDrawerClose, destroyOnHide, position } = this
 
  if (destroyOnHide.value && !visible) {
  return null
  }
 
- const visibleVal = visible ? 'visible' : 'hidden'
+ const transitionName = showAnimation ? position : 'none'
 
  return (
- <div class="devui-drawer" style={{ zIndex: zindex, visibility : visibleVal }} onClick={handleDrawerClose} >
+ <div class="devui-drawer" style={{ zIndex: zindex }} onClick={handleDrawerClose} >
  {isCover ? <div class="devui-overlay-backdrop" /> : null}
- <div class="devui-overlay-wrapper">
- <div class="devui-drawer-nav" style={{ 'width': navWidth, ...navRight }}>
- <div class="devui-drawer-content" onClick={this.clickContent}>
- {slots.default ? slots.default() : null}
+ <Transition name={'devui-drawer-' + transitionName}>
+ <div class="devui-overlay-wrapper" v-show={ visible }>
+ <div class="devui-drawer-nav" style={{ 'width': navWidth, ...navRight }}>
+ <div class="devui-drawer-content" onClick={this.clickContent}>
+ {slots.default ? slots.default() : null}
+ </div>
  </div>
  </div>
- </div>
+ </Transition>
  </div>
  )
  }

packages/devui-vue/devui/drawer/src/components/drawer-container.tsx

@@ -13,7 +13,6 @@ export default defineComponent({
  if (destroyOnHide.value && !visible) {
  return null
  }
- const visibleVal = this.visible ? 'visible' : 'hidden'
- return <div style={{ visibility : visibleVal }}>内容区域</div>
+ return <div>内容区域</div>
  }
 })

packages/devui-vue/devui/drawer/src/components/drawer-header.tsx

@@ -26,19 +26,17 @@ export default defineComponent({
  return { fullScreenClassName, visible, handleFullScreen, handleDrawerClose, destroyOnHide }
  },
  render() {
- const { 
- handleFullScreen, handleDrawerClose, visible, 
- fullScreenClassName, destroyOnHide 
+ const {
+ handleFullScreen, handleDrawerClose, visible,
+ fullScreenClassName, destroyOnHide
  } = this
 
  if (destroyOnHide.value && !visible) {
  return null
  }
 
- const visibleVal = visible ? 'visible' : 'hidden'
-
  return (
- <div class="devui-drawer-header" style= {{ visibility : visibleVal }}>
+ <div class="devui-drawer-header">
  <div class="devui-drawer-header-item">
  <span class="devui-drawer-header-item icon icon-more-operate" />
  </div>

packages/devui-vue/devui/drawer/src/drawer-service.tsx

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import { DrawerProps } from './drawer-types'
 
 import DDrawer from './drawer'
+import { omit } from 'lodash-es'
 
 interface drawerInstance {
  hide(): void
@@ -13,8 +14,12 @@ function createDrawerApp(props: DrawerProps, drawer: drawerInstance, el: HTMLEle
  if (drawer) {
  return drawer
  }
+ const restProps = omit(props, ['header', 'content', 'visible'])
+ 
  const res = createApp(
- <DDrawer v-model:visible={props.visible}>{{ header: props.header, content: props.content }}</DDrawer>
+ // BUG: this function generates a new app, v-model instructor of template is like not working
+ // TODO: could be fixed by using self-defined header slot
+ <DDrawer v-model={[props.visible, 'visible']} {...restProps}>{{ header: props.header, content: props.content }}</DDrawer>
  )
  res.mount(el)
  return res

packages/devui-vue/devui/drawer/src/drawer-types.ts

@@ -33,14 +33,18 @@ export const drawerProps = {
  type: Boolean,
  default: false,
  },
+ showAnimation: { // 是否启用动效
+ type: Boolean,
+ default: true,
+ },
  beforeHidden: { // 关闭前的回调
  type: [Promise, Function] as PropType<Promise<boolean> | (() => boolean | Promise<boolean>)>,
  },
  content: { // 默认内容插槽
- type: [Object, Function],
+ type: Object,
  },
  header: { // 头部内容插槽
- type: [Object, Function],
+ type: Object,
  },
 } as const
 

packages/devui-vue/devui/drawer/src/drawer.scss

@@ -1 +1,41 @@
+.devui-drawer{
+ &-left-enter-active {
+ animation: left-inout 0.3s;
+ }
 
+ &-left-leave-active {
+ animation: left-inout 0.3s reverse;
+ }
+
+ &-right-enter-active {
+ animation: right-inout 0.3s;
+ }
+
+ &-right-leave-active {
+ animation: right-inout 0.3s reverse;
+ }
+}
+
+@keyframes right-inout {
+ 0% {
+ transform: translateX(100px);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes left-inout {
+ 0% {
+ transform: translateX(-100px);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}

packages/devui-vue/devui/drawer/src/drawer.tsx

@@ -5,17 +5,19 @@ import DrawerHeader from './components/drawer-header'
 import DrawerContainer from './components/drawer-container'
 import DrawerBody from './components/drawer-body'
 
+import './drawer.scss'
+
 export default defineComponent({
  name: 'DDrawer',
  props: drawerProps,
  emits: ['close', 'update:visible', 'afterOpened'],
  setup(props: DrawerProps, { emit, slots }) {
  const {
  width, visible, zIndex, isCover, escKeyCloseable, position,
- backdropCloseable, destroyOnHide
+ backdropCloseable, destroyOnHide, showAnimation
  } = toRefs(props)
  const isFullScreen = ref(false)
- 
+
  const fullscreen = () => {
  isFullScreen.value = !isFullScreen.value
  }
@@ -66,6 +68,7 @@ export default defineComponent({
  provide('isFullScreen', isFullScreen)
  provide('backdropCloseable', backdropCloseable)
  provide('destroyOnHide', destroyOnHide)
+ provide('showAnimation', showAnimation)
 
  onUnmounted(() => {
  document.removeEventListener('keyup', escCloseDrawer)
@@ -81,16 +84,15 @@ export default defineComponent({
  },
  render() {
  const { fullscreen, closeDrawer, visible, destroyOnHide } = this;
+
  if (destroyOnHide.value && !visible) {
  return null
  }
 
- const visibleVal = visible ? 'visible' : 'hidden'
  return (
  <Teleport to="body">
- <DrawerBody style= {{ visibility : visibleVal }}>
- {/* BUG: 已使用作用域插槽解决 此处对应的 DEMO 使用了 **双向绑定** 导致可以关闭【一种关闭了的'假象'】。*/}
- {this.slots.header ? this.slots.header({fullscreen, closeDrawer}) : 
+ <DrawerBody v-show={ visible }>
+ {this.slots.header ? this.slots.header({fullscreen, closeDrawer}) :
  <DrawerHeader onToggleFullScreen={fullscreen} onClose={closeDrawer} />
  }
  {this.slots.content ? this.slots.content() : <DrawerContainer />}