styles(amount): [amount] add amount types (#1310)

packages/renderless/src/amount/vue.ts

@@ -10,6 +10,15 @@
  *
  */
 
+import type {
+  IAmountProps,
+  IAmountState,
+  IAmountRenderlessParamUtils,
+  ISharedRenderlessParamHooks,
+  IAmountApi,
+  IAmountEditorState
+} from '@/types'
+
 import {
   closePopper,
   popInput,
@@ -50,7 +59,19 @@ export const api = [
   'getAmountText'
 ]
 
-const initState = ({ reactive, computed, props, $service, editorState }) => {
+const initState = ({
+  reactive,
+  computed,
+  props,
+  $service,
+  editorState
+}: {
+  reactive: ISharedRenderlessParamHooks['reactive']
+  computed: ISharedRenderlessParamHooks['computed']
+  props: IAmountProps
+  $service: any
+  editorState: IAmountApi['editorState']
+}) => {
   const state = reactive({
     visible: false,
     amount: props.modelValue || '',
@@ -72,15 +93,37 @@ const initState = ({ reactive, computed, props, $service, editorState }) => {
   return state
 }
 
-const initEditorState = ({ reactive, props }) =>
-  reactive({
+const initEditorState = ({
+  reactive,
+  props
+}: {
+  reactive: ISharedRenderlessParamHooks['reactive']
+  props: IAmountProps
+}) =>
+  reactive<IAmountEditorState>({
     amount: '',
     date: '',
     currency: props.currency,
     lastInput: props.modelValue
   })
 
-const initApi = ({ api, t, editorState, props, state, emit, refs }) => {
+const initApi = ({
+  api,
+  t,
+  editorState,
+  props,
+  state,
+  emit,
+  refs
+}: {
+  api: Partial<IAmountApi>
+  t: IAmountApi['t']
+  editorState: IAmountEditorState
+  props: IAmountProps
+  state: IAmountState
+  emit: IAmountRenderlessParamUtils['emit']
+  refs: IAmountRenderlessParamUtils['refs']
+}) => {
   Object.assign(api, {
     state,
     t,
@@ -97,8 +140,8 @@ const initApi = ({ api, t, editorState, props, state, emit, refs }) => {
     closePopper: closePopper(state),
     emitChange: emitChange({ emit, state }),
     popInput: popInput({ editorState, api, state, props }),
-    save: save({ api, state, editorState, props }),
-    reset: reset({ api, state, editorState }),
+    save: save({ api, state, editorState }),
+    reset: reset({ state, editorState }),
     handelClick: handelClick({ api, refs }),
     addOutSideEvent: addOutSideEvent(api),
     watchModelValue: watchModelValue({ api, state }),
@@ -107,7 +150,17 @@ const initApi = ({ api, t, editorState, props, state, emit, refs }) => {
   })
 }
 
-const initWatch = ({ watch, props, state, api }) => {
+const initWatch = ({
+  watch,
+  props,
+  state,
+  api
+}: {
+  watch: ISharedRenderlessParamHooks['watch']
+  props: IAmountProps
+  state: IAmountState
+  api: IAmountApi
+}) => {
   watch(() => props.modelValue, api.watchModelValue, { immediate: true })
 
   watch(() => props.currency, api.watchCurrency, { immediate: true })
@@ -124,6 +177,7 @@ const initWatch = ({ watch, props, state, api }) => {
   watch(
     () => props.rounding,
     (value) => {
+      // todo format 在 initState 初始化中是一个 ComputedRef<object>，写法是否有误？
       state.format.rounding = value
     }
   )
@@ -131,24 +185,29 @@ const initWatch = ({ watch, props, state, api }) => {
   watch(
     () => props.digits,
     (value) => {
+      // todo format 在 initState 初始化中是一个 ComputedRef<object>，写法是否有误？
       state.format.fraction = value
     }
   )
 }
 
-export const renderless = (props, { onUnmounted, computed, reactive, watch }, { t, emit, refs, service }) => {
-  const api = {}
+export const renderless = (
+  props: IAmountProps,
+  { onUnmounted, computed, reactive, watch }: ISharedRenderlessParamHooks,
+  { t, emit, refs, service }: IAmountRenderlessParamUtils
+) => {
+  const api: Partial<IAmountApi> = {}
   const $service = initService(service)
   const editorState = initEditorState({ reactive, props })
-  const state = initState({ reactive, computed, props, $service, editorState })
+  const state: IAmountState = initState({ reactive, computed, props, $service, editorState })
 
   initApi({ api, t, editorState, props, state, emit, refs })
 
-  api.getDecimal(0) // 初始化Decimal
+  api?.getDecimal?.(0) // 初始化Decimal
 
-  initWatch({ watch, props, state, api })
+  initWatch({ watch, props, state, api: api as IAmountApi })
 
-  onUnmounted(() => api.addOutSideEvent(false))
+  onUnmounted(() => api?.addOutSideEvent?.(false))
 
-  return api
+  return api as IAmountApi
 }

packages/renderless/types/alert.type.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, CSSProperties } from 'vue'
-import { alertProps, $constants } from '@/alert/src'
+import type { alertProps, $constants } from '@/alert/src'
 import type { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type'
 
 export interface IAlertState {

packages/renderless/types/amount.type.ts

@@ -0,0 +1,49 @@
+import type { ExtractPropTypes, ComputedRef } from 'vue'
+import type { amountProps } from '@/amount/src'
+import type { ISharedRenderlessParamUtils } from './shared.type'
+
+export interface IAmountState {
+  visible: boolean
+  amount: string
+  currency: string
+  date: string | Date | undefined
+  overMaxLen: boolean
+  isFocus: boolean
+  lock: boolean
+  amountText: string
+  lastInput: string | number | undefined
+  lastCurrency: number
+  lastDate: string | Date | undefined
+  format: ComputedRef<object>
+}
+
+export type IAmountEditorState = Pick<IAmountState, 'amount' | 'date' | 'currency' | 'lastInput'>
+
+export type IAmountProps = ExtractPropTypes<typeof amountProps>
+
+export type IAmountRenderlessParamUtils = ISharedRenderlessParamUtils<null>
+
+export interface IAmountApi {
+  state: IAmountState
+  t: ISharedRenderlessParamUtils['t']
+  editorState: IAmountEditorState
+  getDecimal: (value: any) => any
+  innerFormat: (value: any) => any
+  getAmountText: (value: any) => any
+  initAmount: () => any
+  onInputPreprocess: (value: any) => any
+  onInput: (value: any) => any
+  initText: () => void
+  inputFocus: () => void
+  inputBlur: () => void
+  closePopper: () => void
+  emitChange: () => void
+  popInput: (value: any) => void
+  save: () => void
+  reset: () => void
+  handelClick: (e: any) => void
+  addOutSideEvent: (visible: any) => void
+  watchModelValue: () => void
+  watchCurrency: (value: any) => void
+  toggleVisible: () => void
+}

packages/vue/src/amount/src/index.ts

@@ -0,0 +1,85 @@
+import { $props, $prefix, $setup, defineComponent } from '@opentiny/vue-common'
+import template from 'virtual-template?pc'
+
+export const amountProps = {
+  ...$props,
+  modelValue: {
+    type: [Number, String]
+  },
+  tabindex: { type: String, default: '1' },
+  size: String,
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  currency: {
+    type: String,
+    default: 'CNY'
+  },
+  date: [String, Date],
+  dateAllowEmpty: {
+    type: Boolean,
+    default: false
+  },
+  digits: {
+    type: Number,
+    default: 2
+  },
+  rounding: {
+    type: Boolean,
+    default: true
+  },
+  maxLen: {
+    type: Number,
+    default: 15
+  },
+  negative: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  fetchCurrency: Function,
+  fields: Object,
+  popperClass: String,
+  popperAppendToBody: {
+    type: Boolean,
+    default: true
+  },
+  format: Object,
+  type: {
+    type: String,
+    default: 'amount'
+  },
+  holdZero: {
+    type: Boolean,
+    default: true
+  },
+  modelTruncation: {
+    type: Boolean,
+    default: true
+  },
+  strictInput: {
+    type: Boolean,
+    default: false
+  },
+  plugin: Function,
+  popUp: {
+    type: Boolean,
+    default: true
+  },
+  hideCurrency: {
+    type: Boolean,
+    default: false
+  }
+}
+
+export default defineComponent({
+  name: $prefix + 'Amount',
+  props: amountProps,
+  setup(props, context) {
+    return $setup({ props, context, template })
+  }
+})