styles(drawer): [drawer] add drawer types (#1318)

packages/renderless/src/drawer/index.ts

@@ -1,15 +1,16 @@
 import debounce from '../common/deps/debounce'
 import { addClass, removeClass } from '../common/deps/dom'
+import type { IDrawerState, IDrawerProps, IDrawerApi, IDrawerCT, ISharedRenderlessParamUtils } from '@/types'
 
 export const close =
-  ({ emit, state }) =>
+  ({ emit, state }: { emit: ISharedRenderlessParamUtils['emit']; state: IDrawerState }) =>
   () => {
     state.toggle = false
     emit('close', state)
   }
 
 export const watchVisible =
-  ({ state }) =>
+  ({ state }: { state: IDrawerState }) =>
   (bool) => {
     setTimeout(() => {
       state.toggle = bool
@@ -17,22 +18,22 @@ export const watchVisible =
   }
 
 export const watchToggle =
-  ({ emit }) =>
+  ({ emit }: { emit: ISharedRenderlessParamUtils['emit'] }) =>
-  (bool) => {
+  (bool: boolean) => {
     setTimeout(() => {
       emit('update:visible', bool)
     }, 0)
   }
 
 export const confirm =
-  ({ emit, state }) =>
+  ({ emit, state }: { emit: ISharedRenderlessParamUtils['emit']; state: IDrawerState }) =>
   () => {
     state.toggle = false
     emit('confirm', state)
   }
 
 export const mousedown =
-  ({ state, vm }) =>
+  ({ state, vm }: { vm: ISharedRenderlessParamUtils<IDrawerCT>['vm']; state: IDrawerState }) =>
   (event) => {
     event.preventDefault()
 
@@ -44,7 +45,7 @@ export const mousedown =
     state.dragEvent.offsetWidth = drawerBox.offsetWidth
   }
 
-export const mousemove = ({ state, props }) =>
+export const mousemove = ({ state, props }: { state: IDrawerState; props: IDrawerProps }) =>
   debounce(1, (event) => {
     if (!state.dragEvent.isDrag) {
       return
@@ -67,21 +68,21 @@ export const mousemove = ({ state, props }) =>
     } else if (placement === 'right') {
       state.width = offsetWidth - offsetX
     }
-  })
+  }) as Parameters<Document['removeEventListener']>['1']
 
 export const mouseup =
-  ({ state }) =>
+  ({ state }: { state: IDrawerState }) =>
   () => {
     if (!state.dragEvent.isDrag) {
       return
     }
 
-    event.preventDefault()
+    ;(event as any).preventDefault()
     state.dragEvent.isDrag = false
   }
 
 export const addDragEvent =
-  ({ api, vm }) =>
+  ({ api, vm }: { api: IDrawerApi; vm: ISharedRenderlessParamUtils<IDrawerCT>['vm'] }) =>
   () => {
     const el = vm.$refs.dragBar
 
@@ -95,7 +96,7 @@ export const addDragEvent =
   }
 
 export const removeDragEvent =
-  ({ api, vm }) =>
+  ({ api, vm }: { api: IDrawerApi; vm: ISharedRenderlessParamUtils<IDrawerCT>['vm'] }) =>
   () => {
     const el = vm.$refs.dragBar
 
@@ -117,8 +118,8 @@ export const hideScrollbar = (lockScrollClass) => () => {
 }
 
 export const watchVisibleNotImmediate =
-  ({ api, props }) =>
+  ({ api, props }: { api: IDrawerApi; props: IDrawerProps }) =>
-  (visible) => {
+  (visible: boolean) => {
     if (props.lockScroll) {
       visible ? api.showScrollbar() : api.hideScrollbar()
     }

packages/renderless/src/drawer/vue.ts

@@ -12,18 +12,26 @@ import {
   hideScrollbar,
   watchVisibleNotImmediate
 } from './index'
+import type {
+  IDrawerProps,
+  IDrawerState,
+  IDrawerApi,
+  ISharedRenderlessParamUtils,
+  ISharedRenderlessFunctionParams,
+  IDrawerCT
+} from '@/types'
 
 export const api = ['state', 'close', 'confirm']
 
 export const renderless = (
-  props,
+  props: IDrawerProps,
-  { reactive, watch, onMounted, onBeforeUnmount, computed },
+  { reactive, watch, onMounted, onBeforeUnmount, computed }: ISharedRenderlessFunctionParams<null>,
-  { emit, vm, mode, constants }
+  { emit, vm, mode, constants }: ISharedRenderlessParamUtils<IDrawerCT>
 ) => {
   const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode)
 
-  const api = {}
+  const api: Partial<IDrawerApi> = {}
-  const state = reactive({
+  const state = reactive<IDrawerState>({
     toggle: false,
     width: 0,
     dragEvent: { x: 0, isDrag: false, offsetWidth: 0 },
@@ -37,29 +45,29 @@ export const renderless = (
     mousedown: mousedown({ state, vm }),
     mousemove: mousemove({ state, props }),
     mouseup: mouseup({ state }),
-    addDragEvent: addDragEvent({ api, vm }),
+    addDragEvent: addDragEvent({ api: api as IDrawerApi, vm }),
-    removeDragEvent: removeDragEvent({ api, vm }),
+    removeDragEvent: removeDragEvent({ api: api as IDrawerApi, vm }),
     watchVisible: watchVisible({ state }),
     watchToggle: watchToggle({ emit }),
     showScrollbar: showScrollbar(lockScrollClass),
     hideScrollbar: hideScrollbar(lockScrollClass),
-    watchVisibleNotImmediate: watchVisibleNotImmediate({ api, props })
+    watchVisibleNotImmediate: watchVisibleNotImmediate({ api: api as IDrawerApi, props })
   })
 
   onMounted(() => {
-    props.dragable && api.addDragEvent()
+    props.dragable && (api as IDrawerApi).addDragEvent()
     if (props.lockScroll && props.visible) {
-      api.showScrollbar()
+      ;(api as IDrawerApi).showScrollbar()
     }
   })
 
   onBeforeUnmount(() => {
-    props.dragable && api.removeDragEvent()
+    props.dragable && (api as IDrawerApi).removeDragEvent()
-    props.lockScroll && api.hideScrollbar()
+    props.lockScroll && (api as IDrawerApi).hideScrollbar()
   })
 
-  watch(() => props.visible, api.watchVisible, { immediate: true })
+  watch(() => props.visible, (api as IDrawerApi).watchVisible, { immediate: true })
-  watch(() => state.toggle, api.watchToggle)
+  watch(() => state.toggle, (api as IDrawerApi).watchToggle)
   watch(
     () => props.width,
     () => (state.width = 0)

packages/renderless/types/drawer.type.ts

@@ -0,0 +1,40 @@
+import type { ExtractPropTypes, ComputedRef } from 'vue'
+import type { drawerProps } from '@/drawer/src'
+import type {
+  close,
+  watchVisible,
+  watchToggle,
+  confirm,
+  mousedown,
+  mouseup,
+  mousemove,
+  addDragEvent,
+  removeDragEvent,
+  showScrollbar,
+  hideScrollbar,
+  watchVisibleNotImmediate
+} from '../src/drawer'
+
+export interface IDrawerState {
+  toggle: boolean
+  width: number
+  dragEvent: { x: number; isDrag: boolean; offsetWidth: number }
+  computedWidth: ComputedRef<string>
+}
+export type IDrawerProps = ExtractPropTypes<typeof drawerProps>
+export interface IDrawerApi {
+  state: IDrawerState
+  confirm: ReturnType<typeof confirm>
+  close: ReturnType<typeof close>
+  mousemove: ReturnType<typeof mousemove>
+  mouseup: ReturnType<typeof mouseup>
+  mousedown: ReturnType<typeof mousedown>
+  addDragEvent: ReturnType<typeof addDragEvent>
+  removeDragEvent: ReturnType<typeof removeDragEvent>
+  watchVisible: ReturnType<typeof watchVisible>
+  watchToggle: ReturnType<typeof watchToggle>
+  showScrollbar: ReturnType<typeof showScrollbar>
+  hideScrollbar: ReturnType<typeof hideScrollbar>
+  watchVisibleNotImmediate: ReturnType<typeof watchVisibleNotImmediate>
+}
+export type IDrawerCT = ReturnType<typeof drawerProps._constants.default>

packages/vue/src/drawer/src/index.ts

@@ -2,70 +2,70 @@ import { $props, $prefix, $setup } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
 const $constants = {
-  SCROLL_LOCK_CLASS(mode) {
+  SCROLL_LOCK_CLASS(mode: string) {
     const scrollLockClasses = {
       'mobile-first': 'overflow-hidden'
     }
-    return scrollLockClasses[mode] || ''
+    return (scrollLockClasses[mode] || '') as string
+  }
+}
+export const drawerProps = {
+  ...$props,
+  _constants: {
+    type: Object,
+    default: () => $constants
+  },
+  visible: {
+    type: Boolean,
+    default: false
+  },
+  customClass: [String, Object, Array],
+  placement: {
+    type: String,
+    default: 'right'
+  },
+  width: {
+    type: String,
+    default: '500px'
+  },
+  title: String,
+  showClose: {
+    type: Boolean,
+    default: true
+  },
+  showHeader: {
+    type: Boolean,
+    default: true
+  },
+  showFooter: {
+    type: Boolean,
+    default: false
+  },
+  mask: {
+    type: Boolean,
+    default: true
+  },
+  maskClosable: {
+    type: Boolean,
+    default: true
+  },
+  dragable: Boolean,
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  flex: {
+    type: Boolean,
+    default: false
+  },
+  zIndex: {
+    type: Number,
+    default: 2000
   }
 }
-
 export default {
   name: $prefix + 'Drawer',
-  props: {
+  props: drawerProps,
-    ...$props,
-    _constants: {
-      type: Object,
-      default: () => $constants
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    customClass: [String, Object, Array],
-    placement: {
-      type: String,
-      default: 'right'
-    },
-    width: {
-      type: String,
-      default: '500px'
-    },
-    title: String,
-    showClose: {
-      type: Boolean,
-      default: true
-    },
-    showHeader: {
-      type: Boolean,
-      default: true
-    },
-    showFooter: {
-      type: Boolean,
-      default: false
-    },
-    mask: {
-      type: Boolean,
-      default: true
-    },
-    maskClosable: {
-      type: Boolean,
-      default: true
-    },
-    dragable: Boolean,
-    lockScroll: {
-      type: Boolean,
-      default: true
-    },
-    flex: {
-      type: Boolean,
-      default: false
-    },
-    zIndex: {
-      type: Number,
-      default: 2000
-    }
-  },
   setup(props, context) {
     return $setup({ props, context, template })
   }