Skip to content

Commit

Permalink
Merge branch 'fix-mobile-release-problem' of https://github.com/opent…
Browse files Browse the repository at this point in the history 
…iny/tiny-vue into fix-mobile-release-problem
  • Loading branch information
@James-9696
James-9696 committed Dec 12, 2024
2 parents 3da5287 + 806938b commit 6212bfb
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 144 deletions.
123 changes: 18 additions & 105 deletions packages/mobile/components/form-item/src/mobile.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
*
-->
<script lang="tsx">
import { $prefix, setup, parseVnode, h, defineComponent, isVue2, hooks } from '../../../vue-common'
import { $prefix, setup, parseVnode, h, defineComponent, isVue2 } from '../../../vue-common'
import { renderless, api } from './renderless/vue'
import LabelWrap from './label-wrap'
import Tooltip from '../../tooltip'
Expand Down Expand Up @@ -49,14 +49,14 @@ export default defineComponent({
handleMouseleave
} = this as unknown as IFormItemInstance

const { validateIcon, isErrorInline, isErrorBlock, tooltipType } = state
const isMobile = state.mode === 'mobile'
const { validateIcon, isErrorInline, isErrorBlock, formInstance } = state
const isMobile = true
const classPrefix = isMobile ? 'tiny-mobile-' : 'tiny-'
const labelSlot = slots.label ? slots.label() : null
const defaultSlots = slots.default ? slots.default() : null
const errorSlot = scopedSlots.error && scopedSlots.error(state.validateMessage)
const formItemClass = `${classPrefix}form-item--${state.sizeClass ? state.sizeClass : 'default'}`
const isShowError = state.validateState === 'error' && showMessage && state.form.showMessage
const isShowError = state.validateState === 'error' && showMessage && formInstance.showMessage
const validateTag = state.formInstance && state.formInstance.validateTag
let validateMessage

Expand Down Expand Up @@ -104,100 +104,15 @@ export default defineComponent({
: null

const getFormItemContnet = () => {
if (isMobile) {
const validatePosition = this.validatePosition || state.formInstance.validatePosition || 'right'
validateMessage = state.validateMessage ? (
validatePosition === 'right' ? (
<div class="tiny-mobile-input-form__error align-right">{state.validateMessage}</div>
) : (
<div class="tiny-mobile-input-form__error align-left">{state.validateMessage}</div>
)
) : null
return ItemContent
}

const tooltipTriggerContent =
ItemContent.length > 1
? h('div', { class: 'tiny-form-item__content-muti-children' }, ItemContent)
: ItemContent[0]

if (!this.showMessage) {
return tooltipTriggerContent
}

const formAppendToBody = state.formInstance && state.formInstance.appendToBody
const appendToBody =
typeof this.appendToBody === 'boolean'
? this.appendToBody
: typeof formAppendToBody === 'boolean'
? formAppendToBody
: true
const validatePosition =
this.validatePosition || (state.formInstance && state.formInstance.validatePosition) || 'top-end'

const popperOptions = {
...state.formInstance.popperOptions,
...this.popperOptions,
forceAbsolute: !appendToBody,
onUpdate: (options) => {
const popper = options.instance._popper
const translate3d = popper.style.transform
const matchTranslate = translate3d.match(/translate3d\((\w+)px, (\w+)px, (\w+)px\)/)

if (!Array.isArray(matchTranslate)) {
return
}

const [x, y, z] = matchTranslate.slice(1)

popper.style.transform = `translate3d(${x}px, ${parseInt(y, 10)}px, ${z}px)`
}
}
const validateIconNode = validateIcon ? h(validateIcon, { class: 'tooltip-validate-icon' }) : null
return h(
'tooltip',
{
props: {
popperClass: `${classPrefix}form__valid`,
arrowOffset: 0,
adjustArrow: true,
type: tooltipType,
disabled: state.getValidateType !== 'tip',
placement: validatePosition,
manual: true,
appendToBody,
popperOptions,
modelValue: isShowError ? state.canShowTip : false,
zIndex: 'relative',
renderContent() {
let tooltipContent
if (errorSlot) {
tooltipContent = [errorSlot]
} else {
tooltipContent = [
validateIconNode,
<span class={`${classPrefix}form-item__validate-message`}>{state.validateMessage}</span>
]
}

return tooltipContent
}
},
on: {
'update:modelValue': (value) => {
state.canShowTip = value
}
},
ref: 'tooltip'
},
[
!isVue2 && tooltipTriggerContent.type === hooks.Text ? (
<span>{tooltipTriggerContent}</span>
) : (
tooltipTriggerContent
)
]
)
const validatePosition = this.validatePosition || state.formInstance.validatePosition || 'right'
validateMessage = state.validateMessage ? (
validatePosition === 'right' ? (
<div class="tiny-mobile-input-form__error align-right">{state.validateMessage}</div>
) : (
<div class="tiny-mobile-input-form__error align-left">{state.validateMessage}</div>
)
) : null
return ItemContent
}

const FormItemContnet = ItemContent ? getFormItemContnet() : null
Expand Down Expand Up @@ -227,7 +142,7 @@ export default defineComponent({
{
props: {
isAutoWidth: state.labelStyle && state.labelStyle.width === 'auto',
updateAll: state.form?.labelWidth === 'auto',
updateAll: state.formInstance?.labelWidth === 'auto',
isMobile: state.mode === 'mobile'
}
},
Expand All @@ -249,7 +164,7 @@ export default defineComponent({
mouseleave: handleMouseleave
}
},
labelSlot || label + (state.form?.labelSuffix || '')
labelSlot || label + (state.formInstance?.labelSuffix || '')
)
: null
]
Expand Down Expand Up @@ -283,7 +198,6 @@ export default defineComponent({
}
},
[
!isMobile ? LabelContent : null,
h(
'div',
{
Expand All @@ -294,9 +208,9 @@ export default defineComponent({
style: !isMobile && state.contentStyle
},
[
isMobile ? LabelContent : null,
LabelContent,
FormItemContnet,
isMobile ? validateMessage : null,
validateMessage,
h(
'transition',
{
Expand All @@ -305,8 +219,7 @@ export default defineComponent({
}
},
[ErrorContent]
),
isMobile ? null : ExtraTip
)
]
)
]
Expand Down
50 changes: 15 additions & 35 deletions packages/mobile/components/form-item/src/renderless/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { isNull } from '@opentiny/utils/type'
import debounce from '@opentiny/utils/deps/debounce'
import type {
IFormItemRenderlessParams,
IFormInstance,
IFormItemDisplayedValueParam,
IFormItemRule,
IFormItemTrigger,
Expand Down Expand Up @@ -80,11 +79,11 @@ export const computedLabelStyle =
(): IFormItemLabelStyle => {
const result = { width: '' }

if (state.form?.labelPosition === POSITION.Top) {
if (state.formInstance?.labelPosition === POSITION.Top) {
return result
}

const labelWidth = props.labelWidth || state.form?.state?.labelWidth
const labelWidth = props.labelWidth || state.formInstance?.state?.labelWidth

if (labelWidth) {
result.width = labelWidth
Expand All @@ -98,12 +97,12 @@ export const computedValueStyle =
(): { width: string } => {
const result = { width: '' }

if (state.form?.labelPosition === POSITION.Top) {
if (state.formInstance?.labelPosition === POSITION.Top) {
result.width = '100%'
return result
}

const labelWidth = props.labelWidth || state.form?.state?.labelWidth
const labelWidth = props.labelWidth || state.formInstance?.state?.labelWidth

if (labelWidth) {
if (labelWidth === 'auto') {
Expand All @@ -122,20 +121,20 @@ export const computedContentStyle =
const result: StyleValue = {}
const label = props.label

if (state.form.labelPosition === POSITION.Top || state.form.inline) {
if (state.formInstance.labelPosition === POSITION.Top || state.formInstance.inline) {
return result
}

if (!label && !props.labelWidth && state.isNested) {
return result
}

const labelWidth = props.labelWidth || state.form.state.labelWidth
const labelWidth = props.labelWidth || state.formInstance.state.labelWidth

if (labelWidth === 'auto') {
if (props.labelWidth === 'auto') {
result.marginLeft = state.computedLabelWidth
} else if (state.form.state.labelWidth === 'auto') {
} else if (state.formInstance.state.labelWidth === 'auto') {
result.marginLeft = state.formInstance.state.autoLabelWidth
}
} else {
Expand All @@ -145,25 +144,6 @@ export const computedContentStyle =
return result
}

export const computedForm =
({ constants, vm, state }: Pick<IFormItemRenderlessParams, 'constants' | 'vm' | 'state'>) =>
(): IFormInstance | null => {
const { FORM_NAME, FORM_ITEM_NAME } = constants
let parent = vm.$parent?.$parent as IFormInstance | null
let parentName = parent?.$options?.componentName

while (parent && parentName !== FORM_NAME) {
if (parentName === FORM_ITEM_NAME) {
state.isNested = true
}

parent = parent?.$parent as IFormInstance | null
parentName = parent?.$options?.componentName
}

return parent
}

export const computedIsRequired =
({ api, state }: Pick<IFormItemRenderlessParams, 'api' | 'state'>) =>
(): boolean => {
Expand Down Expand Up @@ -231,7 +211,7 @@ export const getPropByPath = (obj: object, path: string, strict?: boolean) => {
export const computedFieldValue =
({ props, state }: Pick<IFormItemRenderlessParams, 'props' | 'state'>) =>
() => {
const model = state.form?.model
const model = state.formInstance?.model

if (!model || !props.prop) {
return
Expand Down Expand Up @@ -337,7 +317,7 @@ export const resetField =
state.validateState = ''
state.validateMessage = ''

let model = state.form.model || {}
let model = state.formInstance.model || {}
let value = state.fieldValue
let path = props.prop || ''

Expand Down Expand Up @@ -371,7 +351,7 @@ export const resetField =
export const getRules =
({ props, state }: Pick<IFormItemRenderlessParams, 'props' | 'state'>) =>
(): IFormItemRule[] => {
let formRules = state.form?.rules || {}
let formRules = state.formInstance?.rules || {}
const selfRules = props.rules as IFormItemRule[]
const requiredRule = props.required !== undefined ? { required: Boolean(props.required) } : []
const prop = getPropByPath(formRules, props.prop || '')
Expand Down Expand Up @@ -506,7 +486,7 @@ export const wrapValidate = ({
export const handleMouseenter =
({ state }: Pick<IFormItemRenderlessParams, 'state'>) =>
(e): void => {
if (!state.isDisplayOnly || !state.typeName || !state.form) return
if (!state.isDisplayOnly || !state.typeName || !state.formInstance) return
const dom = e.target
const text = dom.textContent
const font = window.getComputedStyle(dom).font
Expand All @@ -523,22 +503,22 @@ export const handleMouseenter =
}

if (res.o || overHeight) {
state.form.showTooltip(dom, state.displayedValue)
state.formInstance.showTooltip(dom, state.displayedValue)
}
}

export const handleLabelMouseenter =
({ props, state, slots }) =>
(e) => {
if (!state.form?.overflowTitle || !state.form || slots.label) return
if (!state.formInstance?.overflowTitle || !state.formInstance || slots.label) return
const label = e.target
if (label && label.scrollWidth > label.offsetWidth) {
state.form.showTooltip(label, props.label + state.form.labelSuffix)
state.formInstance.showTooltip(label, props.label + state.formInstance.labelSuffix)
}
}

export const handleMouseleave = (state: IFormItemRenderlessParams['state']) => (): void => {
state.form && state.form.hideTooltip()
state.formInstance && state.formInstance.hideTooltip()
}

export const getDisplayedValue =
Expand Down
3 changes: 0 additions & 3 deletions packages/mobile/components/form-item/src/renderless/vue.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import {
computedLabelStyle,
computedValueStyle,
computedContentStyle,
computedForm,
computedIsRequired,
computedFieldValue,
computedGetValidateType,
Expand Down Expand Up @@ -102,7 +101,6 @@ const initState = ({
labelStyle: computed(() => api.computedLabelStyle()),
valueStyle: computed(() => api.computedValueStyle()),
contentStyle: computed(() => api.computedContentStyle()),
form: computed(() => api.computedForm() as IFormInstance),
fieldValue: computed(() => api.computedFieldValue()),
isRequired: computed(() => api.computedIsRequired()),
formInline: computed(() => state.formInstance.inline),
Expand Down Expand Up @@ -137,7 +135,6 @@ const initApi = ({ api, state, dispatch, broadcast, props, constants, vm, t, nex
computedLabelStyle: computedLabelStyle({ props, state }),
computedValueStyle: computedValueStyle({ props, state }),
computedContentStyle: computedContentStyle({ props, state }),
computedForm: computedForm({ constants, vm, state }),
computedFieldValue: computedFieldValue({ props, state }),
computedGetValidateType: computedGetValidateType({ props, state }),
computedValidateIcon: computedValidateIcon({ props, state }),
Expand Down
2 changes: 1 addition & 1 deletion packages/mobile/components/form/src/renderless/vue.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export const renderless = (

api.created()

provide('form', parent)
provide('form', vm)

provide('showAutoWidth', state.showAutoWidth)

Expand Down

0 comments on commit 6212bfb

Please sign in to comment.