style(popconfirm): [popconfirm] improve typescript declaration of components (#1325)

packages/renderless/src/popconfirm/index.ts

@@ -1,5 +1,7 @@
+import type { IPopconfirmRenderlessParams } from '@/types'
+
 export const hide =
-  ({ state, emit }) =>
+  ({ state, emit }: Pick<IPopconfirmRenderlessParams, 'state' | 'emit'>) =>
   () => {
     state.isLock = true
     setTimeout(() => {
@@ -11,7 +13,7 @@ export const hide =
   }
 
 export const show =
-  ({ state, props, emit }) =>
+  ({ state, props, emit }: Pick<IPopconfirmRenderlessParams, 'state' | 'props' | 'emit'>) =>
   (trigger) => {
     if ((trigger ? props.trigger !== trigger : !props.reference) || state.isLock || state.showPopover) {
       return
@@ -22,7 +24,7 @@ export const show =
   }
 
 export const confirm =
-  ({ state, emit }) =>
+  ({ state, emit }: Pick<IPopconfirmRenderlessParams, 'state' | 'emit'>) =>
   () => {
     state.showPopover = false
     emit('confirm', state.showPopover)
@@ -30,7 +32,7 @@ export const confirm =
   }
 
 export const handleEmit =
-  ({ state, emit, vm }) =>
+  ({ state, emit, vm }: Pick<IPopconfirmRenderlessParams, 'state' | 'emit' | 'vm'>) =>
   (type) => {
     let { events = {} } = vm
 

packages/renderless/src/popconfirm/vue.ts

@@ -1,15 +1,25 @@
+import type {
+  IPopconfirmApi,
+  IPopconfirmProps,
+  IPopconfirmRenderlessParamUtils,
+  ISharedRenderlessParamHooks
+} from '@/types'
 import { show, hide, confirm, handleEmit } from './index'
 
 export const api = ['state', 'show', 'hide', 'confirm', 'handleEmit']
 
-export const renderless = (props, { computed, reactive }, { emit, constants, designConfig, vm }) => {
-  const api = {}
-  const designIcon = designConfig?.icons?.[props.type]
+export const renderless = (
+  props: IPopconfirmProps,
+  { computed, reactive }: ISharedRenderlessParamHooks,
+  { emit, constants, designConfig, vm }: IPopconfirmRenderlessParamUtils
+): IPopconfirmApi => {
+  const api = {} as IPopconfirmApi
+  const designIcon = designConfig?.icons?.[props.type as string]
   const state = reactive({
     isLock: false,
     showPopover: false,
     getIcon: computed(() =>
-      typeof props.type === 'object' ? props.type : designIcon || constants.ICON_MAP[props.type]
+      typeof props.type === 'object' ? props.type : designIcon || constants.ICON_MAP[props.type as string]
     )
   })
 

packages/renderless/types/popconfirm.type.ts

@@ -0,0 +1,30 @@
+import type { ExtractPropTypes } from 'vue'
+import type { popconfirmProps, $constants } from '@/popconfirm/src'
+import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type'
+import type { show, hide, confirm, handleEmit } from '../src/popconfirm'
+
+export interface IPopconfirmState {
+  isLock: boolean
+  showPopover: boolean
+  getIcon: string
+}
+
+export type IPopconfirmProps = ExtractPropTypes<typeof popconfirmProps>
+
+export type IPopconfirmConstants = typeof $constants
+
+export type IPopconfirmRenderlessParams = ISharedRenderlessFunctionParams<IPopconfirmConstants> & {
+  api: IPopconfirmApi
+  state: IPopconfirmState
+  props: IPopconfirmProps
+}
+
+export interface IPopconfirmApi {
+  state: IPopconfirmState
+  show: ReturnType<typeof show>
+  hide: ReturnType<typeof hide>
+  confirm: ReturnType<typeof confirm>
+  handleEmit: ReturnType<typeof handleEmit>
+}
+
+export type IPopconfirmRenderlessParamUtils = ISharedRenderlessParamUtils<IPopconfirmConstants>

packages/vue/src/popconfirm/src/index.ts

@@ -12,7 +12,7 @@
 import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
-const $constants = {
+export const $constants = {
   PC_PREFIXCLS: 'tiny-popconfim',
   MOBILE_PREFIXCLS: 'tiny-mobile-popconfim',
   Mode: 'pc',
@@ -27,36 +27,38 @@ const $constants = {
   }
 }
 
+export const popconfirmProps = {
+  ...$props,
+  _constants: {
+    type: Object,
+    default: () => $constants
+  },
+  message: String,
+  customClass: String,
+  trigger: {
+    type: String,
+    default: 'hover',
+    validator: (value) => ['click', 'hover'].includes(value)
+  },
+  cancelButton: {
+    type: Boolean,
+    default: true
+  },
+  title: String,
+  placement: {
+    type: String,
+    default: 'top'
+  },
+  width: {
+    type: [String, Number],
+    default: '350'
+  },
+  type: [String, Object]
+}
+
 export default defineComponent({
   name: $prefix + 'Popconfim',
-  props: {
-    ...$props,
-    _constants: {
-      type: Object,
-      default: () => $constants
-    },
-    message: String,
-    customClass: String,
-    trigger: {
-      type: String,
-      default: 'hover',
-      validator: (value: string) => ['click', 'hover'].includes(value)
-    },
-    cancelButton: {
-      type: Boolean,
-      default: true
-    },
-    title: String,
-    placement: {
-      type: String,
-      default: 'top'
-    },
-    width: {
-      type: [String, Number],
-      default: '350'
-    },
-    type: [String, Object]
-  },
+  props: popconfirmProps,
   setup(props, context) {
     return $setup({ props, context, template })
   }