diff --git a/packages/renderless/src/amount/vue.ts b/packages/renderless/src/amount/vue.ts index 7e19f84060..5b0618f20b 100644 --- a/packages/renderless/src/amount/vue.ts +++ b/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({ 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 + 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,写法是否有误? state.format.rounding = value } ) @@ -131,24 +185,29 @@ const initWatch = ({ watch, props, state, api }) => { watch( () => props.digits, (value) => { + // todo format 在 initState 初始化中是一个 ComputedRef,写法是否有误? 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 = {} 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 } diff --git a/packages/renderless/types/alert.type.ts b/packages/renderless/types/alert.type.ts index f7090e4365..7b2857e326 100644 --- a/packages/renderless/types/alert.type.ts +++ b/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 { diff --git a/packages/renderless/types/amount.type.ts b/packages/renderless/types/amount.type.ts index e69de29bb2..7f1eeb2f87 100644 --- a/packages/renderless/types/amount.type.ts +++ b/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 +} + +export type IAmountEditorState = Pick + +export type IAmountProps = ExtractPropTypes + +export type IAmountRenderlessParamUtils = ISharedRenderlessParamUtils + +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 +} diff --git a/packages/vue/src/amount/src/index.ts b/packages/vue/src/amount/src/index.ts new file mode 100644 index 0000000000..7d3d65c740 --- /dev/null +++ b/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 }) + } +})