style(tag-group): [tag-group] improve ts types of components (#1323)

packages/renderless/src/tag-group/index.ts

@@ -1,11 +1,13 @@
+import type { ITagGroupDataItem, ITagGroupRenderlessParamUtils, ITagGroupRenderlessParams } from '@/types'
+
 export const handelItemClick =
-  ({ emit }) =>
-  (item, index, $event) => {
+  ({ emit }: Pick<ITagGroupRenderlessParamUtils, 'emit'>) =>
+  (item: ITagGroupDataItem, index: number, $event: MouseEvent) => {
     emit('item-click', item, index, $event)
   }
 
 export const getHiddenTags =
-  ({ props, vm, state }) =>
+  ({ props, vm, state }: Pick<ITagGroupRenderlessParams, 'props' | 'vm' | 'state'>) =>
   () => {
     if (!props.data.length) return
     const tagGroup = vm.$refs.tagGroup || {}
@@ -29,8 +31,9 @@ export const getHiddenTags =
     state.hiddenTags = []
 
     Array.from(tags).forEach((el, index) => {
-      const item = props.data[index]
-      if (el.offsetTop >= el.offsetHeight && item) {
+      const item = props.data[index] as ITagGroupDataItem
+      const element = el as HTMLElement
+      if (element.offsetTop >= element.offsetHeight && item) {
         state.hiddenTags.push({ ...item })
       }
     })

packages/renderless/src/tag-group/vue.ts

@@ -1,18 +1,29 @@
 import { addResizeListener, removeResizeListener } from '../common/deps/resize-event'
 import debounce from '../common/deps/debounce'
 import { getHiddenTags, handelItemClick } from './index'
+import type {
+  ISharedRenderlessParamHooks,
+  ITagGroupApi,
+  ITagGroupProps,
+  ITagGroupRenderlessParamUtils,
+  ITagGroupState
+} from '@/types'
 
 export const api = ['state', 'handelItemClick']
 
-export const renderless = (props, { onMounted, onBeforeUnmount, reactive }, { vm, emit }) => {
+export const renderless = (
+  props: ITagGroupProps,
+  { onMounted, onBeforeUnmount, reactive }: ISharedRenderlessParamHooks,
+  { vm, emit }: ITagGroupRenderlessParamUtils
+): ITagGroupApi => {
   const delay = 100
 
-  const state = reactive({
+  const state = reactive<ITagGroupState>({
     showMore: false,
     hiddenTags: []
   })
 
-  const api = {
+  const api: ITagGroupApi = {
     state,
     getHiddenTags: getHiddenTags({ props, vm, state }),
     handelItemClick: handelItemClick({ emit })

packages/renderless/types/tag-group.type.ts

@@ -0,0 +1,32 @@
+import type { debounce } from 'src/common/runtime'
+import type { ExtractPropTypes } from 'vue'
+import type { tagGroupProps } from '@/tag-group/src'
+import type { getHiddenTags, handelItemClick } from '../src/tag-group'
+import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type'
+
+export interface ITagGroupDataItem {
+  name: string
+  type?: string
+}
+
+export interface ITagGroupState {
+  showMore: boolean
+  hiddenTags: ITagGroupDataItem[]
+}
+
+export type ITagGroupRenderlessParams = ISharedRenderlessFunctionParams<never> & {
+  api: ITagGroupApi
+  state: ITagGroupState
+  props: ITagGroupProps
+}
+
+export type ITagGroupProps = ExtractPropTypes<typeof tagGroupProps>
+
+export interface ITagGroupApi {
+  state: ITagGroupState
+  getHiddenTags: ReturnType<typeof getHiddenTags>
+  handelItemClick: ReturnType<typeof handelItemClick>
+  debouncedGetHiddenTags?: ReturnType<typeof debounce>
+}
+
+export type ITagGroupRenderlessParamUtils = ISharedRenderlessParamUtils<never>

packages/vue/src/tag-group/src/index.ts

@@ -12,25 +12,27 @@
 import { $props, $setup, defineComponent, $prefix } from '@opentiny/vue-common'
 import template from 'virtual-template?pc|mobile-first'
 
+export const tagGroupProps = {
+  ...$props,
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (value: string) => ['medium', 'small', 'mini'].includes(value)
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  effect: {
+    type: String,
+    default: 'light',
+    validator: (value: string) => ['dark', 'light', 'plain'].includes(value)
+  }
+}
+
 export default defineComponent({
   name: $prefix + 'TagGroup',
-  props: {
-    ...$props,
-    size: {
-      type: String,
-      default: 'medium',
-      validator: (value: string) => ['medium', 'small', 'mini'].includes(value)
-    },
-    data: {
-      type: Array,
-      default: () => []
-    },
-    effect: {
-      type: String,
-      default: 'light',
-      validator: (value: string) => ['dark', 'light', 'plain'].includes(value)
-    }
-  },
+  props: tagGroupProps,
   setup(props, context): any {
     return $setup({ props, context, template })
   }