styles(area): [area] add area types (#1311)

packages/renderless/src/area/vue.ts

@@ -11,14 +11,25 @@
  */
 
 import { getRegion, changeOffice, getRep, getOffice, fetchDefaultData, beforeMount } from './index'
+import type {
+  IAreaProps,
+  IAreaApi,
+  IAreaState,
+  ISharedRenderlessParamHooks,
+  ISharedRenderlessParamUtils
+} from '@/types'
 
 export const api = ['state', 'getRep', 'getRegion', 'getOffice', 'changeOffice']
 
-export const renderless = (props, { onBeforeMount, reactive }, { emit, service, refs, nextTick }) => {
-  const api = {}
+export const renderless = (
+  props: IAreaProps,
+  { onBeforeMount, reactive }: ISharedRenderlessParamHooks,
+  { emit, service, refs, nextTick }: ISharedRenderlessParamUtils<never>
+) => {
+  const api: Partial<IAreaApi> = {}
   const { fetchArea } = service || {}
 
-  const state = reactive({
+  const state = reactive<IAreaState>({
     jcr: '',
     region: '',
     rep: '',
@@ -32,14 +43,14 @@ export const renderless = (props, { onBeforeMount, reactive }, { emit, service,
   Object.assign(api, {
     state,
     changeOffice: changeOffice({ emit, state }),
-    beforeMount: beforeMount({ api, props }),
+    beforeMount: beforeMount({ api: api as IAreaApi, props }),
     getRep: getRep({ emit, fetchArea, nextTick, props, refs, state }),
     getRegion: getRegion({ emit, fetchArea, nextTick, props, refs, state }),
     getOffice: getOffice({ emit, fetchArea, nextTick, props, refs, state }),
     fetchDefaultData: fetchDefaultData({ emit, fetchArea, nextTick, props, refs, state })
   })
 
-  onBeforeMount(api.beforeMount)
+  onBeforeMount((api as IAreaApi).beforeMount)
 
-  return api
+  return api as IAreaApi
 }

packages/renderless/types/area.type.ts

@@ -0,0 +1,41 @@
+import type { ExtractPropTypes } from 'vue'
+import type { areaProps } from '@/area/src'
+import type { getRegion, changeOffice, getRep, getOffice, fetchDefaultData, beforeMount } from '../src/area'
+import type { ISharedRenderlessParamUtils } from '@/types'
+
+export interface LabeValue {
+  label: string
+  value: string
+}
+
+export interface IAreaState {
+  jcr: string
+  region: string
+  rep: string
+  office: string
+  jcrData: LabeValue[]
+  regionData: LabeValue[]
+  repData: LabeValue[]
+  officeData: LabeValue[]
+}
+
+export interface IAreaRenderlessParams {
+  emit: ISharedRenderlessParamUtils['emit']
+  fetchArea: (args: { label: string; parent: string }) => Promise<LabeValue[]>
+  nextTick: ISharedRenderlessParamUtils['nextTick']
+  props: IAreaProps
+  refs: ISharedRenderlessParamUtils['refs']
+  state: IAreaState
+}
+
+export type IAreaProps = ExtractPropTypes<typeof areaProps>
+
+export interface IAreaApi {
+  state: IAreaState
+  changeOffice: ReturnType<typeof changeOffice>
+  beforeMount: ReturnType<typeof beforeMount>
+  getRep: ReturnType<typeof getRep>
+  getRegion: ReturnType<typeof getRegion>
+  getOffice: ReturnType<typeof getOffice>
+  fetchDefaultData: ReturnType<typeof fetchDefaultData>
+}

packages/vue/src/area/src/index.ts

@@ -0,0 +1,47 @@
+import { $prefix, $setup, defineComponent } from '@opentiny/vue-common'
+import template from 'virtual-template?pc'
+
+export const areaProps = {
+  modelValue: {},
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  size: String,
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  props: {
+    type: Object,
+    default: () => ({
+      label: 'name_cn',
+      value: 'org_id'
+    })
+  },
+  fetchJcr: {
+    type: Function
+  },
+  fetchRegion: {
+    type: Function
+  },
+  fetchRep: {
+    type: Function
+  },
+  fetchOffice: {
+    type: Function
+  },
+  popperClass: String,
+  popperAppendToBody: {
+    type: Boolean,
+    default: true
+  }
+}
+
+export default defineComponent({
+  name: $prefix + 'Area',
+  props: areaProps,
+  setup(props, context) {
+    return $setup({ props, context, template })
+  }
+})