refactor(fade-in-expand-transition, focus-detector): ts

src/_base/fade-in-expand-transition/src/FadeInExpandTransition.js

@@ -1,99 +0,0 @@
-import { h, Transition, TransitionGroup, defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'FadeInExpandTransition',
-  props: {
-    appear: {
-      type: Boolean,
-      default: false
-    },
-    group: {
-      type: Boolean,
-      default: false
-    },
-    mode: {
-      type: String,
-      default: undefined
-    },
-    onAfterLeave: {
-      type: Function,
-      default: undefined
-    },
-    width: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    handleBeforeLeave (el) {
-      if (this.width) {
-        el.style.maxWidth = el.offsetWidth + 'px'
-      } else {
-        el.style.maxHeight = el.offsetHeight + 'px'
-      }
-      void el.offsetWidth
-    },
-    handleLeave (el) {
-      if (this.width) {
-        el.style.maxWidth = '0'
-      } else {
-        el.style.maxHeight = '0'
-      }
-      void el.offsetWidth
-    },
-    handleAfterLeave (el) {
-      if (this.width) {
-        el.style.maxWidth = ''
-      } else {
-        el.style.maxHeight = ''
-      }
-      const { onAfterLeave } = this
-      if (onAfterLeave) onAfterLeave()
-    },
-    handleEnter (el) {
-      el.style.transition = 'none'
-      if (this.width) {
-        const memorizedWidth = el.offsetWidth
-        el.style.maxWidth = '0'
-        void el.offsetWidth
-        el.style.transition = ''
-        el.style.maxWidth = memorizedWidth + 'px'
-      } else {
-        const memorizedHeight = el.offsetHeight
-        el.style.maxHeight = '0'
-        void el.offsetWidth
-        el.style.transition = ''
-        el.style.maxHeight = memorizedHeight + 'px'
-      }
-      void el.offsetWidth
-    },
-    handleAfterEnter (el) {
-      if (this.width) {
-        el.style.maxWidth = ''
-      } else {
-        el.style.maxHeight = ''
-      }
-    }
-  },
-  render () {
-    const type = this.group ? TransitionGroup : Transition
-    return h(
-      type,
-      {
-        name: this.width
-          ? 'n-fade-in-width-expand-transition'
-          : 'n-fade-in-height-expand-transition',
-        mode: this.mode,
-        appear: this.appear,
-        onEnter: this.handleEnter,
-        onAfterEnter: this.handleAfterEnter,
-        onBeforeLeave: this.handleBeforeLeave,
-        onLeave: this.handleLeave,
-        onAfterLeave: this.handleAfterLeave
-      },
-      {
-        default: this.$slots.default
-      }
-    )
-  }
-})

src/_base/fade-in-expand-transition/src/FadeInExpandTransition.ts

@@ -0,0 +1,97 @@
+import { h, Transition, TransitionGroup, defineComponent, PropType } from 'vue'
+
+export default defineComponent({
+  name: 'FadeInExpandTransition',
+  props: {
+    appear: {
+      type: Boolean,
+      default: false
+    },
+    group: {
+      type: Boolean,
+      default: false
+    },
+    mode: {
+      type: String as PropType<'in-out' | 'out-in' | 'default' | undefined>,
+      default: undefined
+    },
+    onAfterLeave: {
+      type: Function,
+      default: undefined
+    },
+    width: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup (props, { slots }) {
+    function handleBeforeLeave (el: HTMLElement): void {
+      if (props.width) {
+        el.style.maxWidth = `${el.offsetWidth}px`
+      } else {
+        el.style.maxHeight = `${el.offsetHeight}px`
+      }
+      void el.offsetWidth
+    }
+    function handleLeave (el: HTMLElement): void {
+      if (props.width) {
+        el.style.maxWidth = '0'
+      } else {
+        el.style.maxHeight = '0'
+      }
+      void el.offsetWidth
+    }
+    function handleAfterLeave (el: HTMLElement): void {
+      if (props.width) {
+        el.style.maxWidth = ''
+      } else {
+        el.style.maxHeight = ''
+      }
+      const { onAfterLeave } = props
+      if (onAfterLeave) onAfterLeave()
+    }
+    function handleEnter (el: HTMLElement): void {
+      el.style.transition = 'none'
+      if (props.width) {
+        const memorizedWidth = el.offsetWidth
+        el.style.maxWidth = '0'
+        void el.offsetWidth
+        el.style.transition = ''
+        el.style.maxWidth = `${memorizedWidth}px`
+      } else {
+        const memorizedHeight = el.offsetHeight
+        el.style.maxHeight = '0'
+        void el.offsetWidth
+        el.style.transition = ''
+        el.style.maxHeight = `${memorizedHeight}px`
+      }
+      void el.offsetWidth
+    }
+    function handleAfterEnter (el: HTMLElement): void {
+      if (props.width) {
+        el.style.maxWidth = ''
+      } else {
+        el.style.maxHeight = ''
+      }
+    }
+    return () => {
+      const type = props.group ? TransitionGroup : Transition
+      return h(
+        type as any,
+        {
+          name: props.width
+            ? 'n-fade-in-width-expand-transition'
+            : 'n-fade-in-height-expand-transition',
+          mode: props.mode,
+          appear: props.appear,
+          onEnter: handleEnter,
+          onAfterEnter: handleAfterEnter,
+          onBeforeLeave: handleBeforeLeave,
+          onLeave: handleLeave,
+          onAfterLeave: handleAfterLeave
+        },
+        slots
+      )
+    }
+  }
+})

src/_base/focus-detector/index.js

@@ -1,3 +0,0 @@
-import FocusDetector from './src/FocusDetector.vue'
-
-export default FocusDetector

src/_base/focus-detector/index.tsx

@@ -0,0 +1,3 @@
+import FocusDetector from './src/FocusDetector'
+
+export default FocusDetector

src/_base/focus-detector/src/FocusDetector.tsx

@@ -0,0 +1,24 @@
+import { h, defineComponent, PropType } from 'vue'
+
+export default defineComponent({
+  props: {
+    onFocus: {
+      type: Function as PropType<((e: FocusEvent) => void) | undefined>,
+      default: undefined
+    },
+    onBlur: {
+      type: Function as PropType<((e: FocusEvent) => void) | undefined>,
+      default: undefined
+    }
+  },
+  setup (props) {
+    return () => (
+      <div
+        style="width: 0; height: 0"
+        tabindex={0}
+        onFocus={props.onFocus}
+        onBlur={props.onBlur}
+      />
+    )
+  }
+})

src/_base/focus-detector/src/FocusDetector.vue

@@ -1,35 +0,0 @@
-<template>
-  <div
-    style="width: 0; height: 0"
-    tabindex="0"
-    @focus="handleFocus"
-    @blur="handleBlur"
-  />
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  props: {
-    onFocus: {
-      type: Function,
-      default: undefined
-    },
-    onBlur: {
-      type: Function,
-      default: undefined
-    }
-  },
-  methods: {
-    handleFocus (e) {
-      const { onFocus } = this
-      if (onFocus) onFocus(e)
-    },
-    handleBlur (e) {
-      const { onBlur } = this
-      if (onBlur) onBlur(e)
-    }
-  }
-})
-</script>