fix(form): modify mobile form problem

packages/mobile/components/form-item/src/mobile.vue

@@ -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'
@@ -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
 
@@ -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
@@ -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'
         }
       },
@@ -249,7 +164,7 @@ export default defineComponent({
                   mouseleave: handleMouseleave
                 }
               },
-              labelSlot || label + state.form.labelSuffix
+              labelSlot || label + (state.formInstance?.labelSuffix || '')
             )
           : null
       ]
@@ -283,7 +198,6 @@ export default defineComponent({
         }
       },
       [
-        !isMobile ? LabelContent : null,
         h(
           'div',
           {
@@ -294,9 +208,9 @@ export default defineComponent({
             style: !isMobile && state.contentStyle
           },
           [
-            isMobile ? LabelContent : null,
+            LabelContent,
             FormItemContnet,
-            isMobile ? validateMessage : null,
+            validateMessage,
             h(
               'transition',
               {
@@ -305,8 +219,7 @@ export default defineComponent({
                 }
               },
               [ErrorContent]
-            ),
-            isMobile ? null : ExtraTip
+            )
           ]
         )
       ]

packages/mobile/components/form-item/src/renderless/index.ts

@@ -18,7 +18,6 @@ import { isNull } from '@opentiny/utils/type'
 import debounce from '@opentiny/utils/deps/debounce'
 import type {
   IFormItemRenderlessParams,
-  IFormInstance,
   IFormItemDisplayedValueParam,
   IFormItemRule,
   IFormItemTrigger,
@@ -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
@@ -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') {
@@ -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 {
@@ -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 => {
@@ -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
@@ -287,7 +267,6 @@ export const validate =
     state.validateState = VALIDATE_STATE.Validating
 
     const descriptor = {}
-
     if (rules && rules.length > 0) {
       rules.forEach((rule) => {
         delete rule.trigger
@@ -338,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 || ''
 
@@ -372,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 || '')
@@ -507,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
@@ -524,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 =

packages/mobile/components/form-item/src/renderless/vue.ts

@@ -28,7 +28,6 @@ import {
   computedLabelStyle,
   computedValueStyle,
   computedContentStyle,
-  computedForm,
   computedIsRequired,
   computedFieldValue,
   computedGetValidateType,
@@ -102,15 +101,14 @@ 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),
     formSize: computed(() => state.formInstance.size),
     formItemSize: computed(() => props.size || state.formSize),
     isDisplayOnly: computed(() => state.formInstance.displayOnly),
     labelPosition: computed(() => state.formInstance.labelPosition),
-    hideRequiredAsterisk: computed(() => state.formInstance.state.hideRequiredAsterisk),
+    hideRequiredAsterisk: computed(() => state.formInstance?.state?.hideRequiredAsterisk),
     labelSuffix: computed(() => state.formInstance.labelSuffix),
     labelWidth: computed(() => state.formInstance.labelWidth),
     showMessage: computed(() => state.formInstance.showMessage),
@@ -120,7 +118,7 @@ const initState = ({
     isErrorInline: computed(() => api.computedIsErrorInline()),
     isErrorBlock: computed(() => api.computedIsErrorBlock()),
     disabled: computed(() => state.formInstance.disabled),
-    tooltipType: computed(() => state.formInstance.state.tooltipType)
+    tooltipType: computed(() => state.formInstance?.state?.tooltipType)
   })
 
   return state
@@ -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 }),

packages/mobile/components/form/src/renderless/vue.ts

@@ -108,7 +108,7 @@ export const renderless = (
 
   api.created()
 
-  provide('form', parent)
+  provide('form', vm)
 
   provide('showAutoWidth', state.showAutoWidth)