fix: fix form item not align when set display-only (#2927)

Author: gimmyhehe

packages/theme-saas/src/form-item/index.less

@@ -18,7 +18,7 @@
 
 .@{form-item-prefix-cls} {
   @apply relative;
-  @apply mb-5;
+  @apply mb-4;
   .clearfix();
 
   .@{form-item-prefix-cls}__content-muti-children {

packages/vue/src/checkbox/src/mobile-first.vue

@@ -3,7 +3,7 @@
     data-tag="tiny-checkbox"
     :class="
       m(
-        'inline-flex sm:items-center text-sm leading-5 cursor-pointer',
+        'inline-flex sm:items-center text-sm leading-5.5 cursor-pointer',
         state.size !== 'mini' ? 'sm:text-sm' : 'sm:text-xs',
         { 'sm:py-2': state.vertical },
         state.isDisplayOnly || state.isGroupDisplayOnly

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

@@ -3,7 +3,7 @@
     data-tag="tiny-form-item"
     :class="
       m(
-        `flex min-h-[theme(spacing.12)] sm:min-h-[theme(spacing.7)] mb-0 p-0 sm:mb-4 box-border after:content-[''] after:table after:clear-both before:content-['']  before:table border-b-0.5 border-color-border-separator sm:border-none`,
+        `flex min-h-[theme(spacing.12)] sm:min-h-[theme(spacing.5)] mb-0 p-0 sm:mb-4 box-border after:content-[''] after:table after:clear-both before:content-['']  before:table border-b-0.5 border-color-border-separator sm:border-none`,
         state.validateState === 'error' && state.validateType === 'text' ? 'mb-0 sm:mb-5' : '',
         state.formInline ? 'align-sub' : '',
         state.labelPosition === 'top' ? 'block mb-4' : '',
@@ -12,7 +12,7 @@
           : '',
         state.labelPosition === 'top' && !state.hideRequiredAsterisk ? 'pl-0' : '',
         !slots.label && !label ? 'border-none' : '',
-        state.isDisplayOnly ? 'border-none py-0.5' : ''
+        state.isDisplayOnly ? 'border-none py-0.5 sm:py-0' : ''
       )
     "
   >
@@ -26,7 +26,7 @@
         v-if="slots.label || label"
         :class="
           m(
-            'py-3 sm:py-1.5 sm:min-h-[theme(spacing.7)] relative align-bottom float-left text-sm pr-3 sm:pr-4 box-border leading-5',
+            'py-3 sm:py-0 sm:min-h-[theme(spacing.5)] relative align-bottom float-left text-sm pr-3 sm:pr-4 box-border leading-5',
             'overflow-hidden text-ellipsis',
             state.labelPosition === 'top'
               ? 'float-none inline-block text-left sm:text-left leading-none px-0 pt-0 pb-1.5 h-auto min-h-0 sm:py-0 sm:pb-1 sm:min-h-[theme(spacing.0)]'
@@ -49,7 +49,7 @@
         <span
           :class="
             m(
-              'max-h-[theme(spacing.10)] line-clamp-2 inline-block relative top-px leading-normal',
+              'max-h-[theme(spacing.10)] line-clamp-2 inline-block relative top-px leading-normal sm:leading-5.5',
               (state.isRequired || required) && !state.hideRequiredAsterisk
                 ? `before:content-['*'] before:text-color-error before:relative before:mr-1`
                 : '',
@@ -73,8 +73,8 @@
       data-tag="tiny-form-item-inline"
       :class="
         m(
-          `flex-1 m-0 sm:m-auto relative sm:pt-0 sm:top-auto text-sm after:content-['']  after:table after:clear-both before:content-['']  before:table [&_button:not(:last-child)]:mr-2`,
-          '[&_[data-tag=tiny-checkbox]]:py-0 [&_[data-tag=tiny-input]]:w-full',
+          `flex-1 m-0 relative sm:pt-0 sm:top-auto text-sm after:content-['']  after:table after:clear-both before:content-['']  before:table [&_button:not(:last-child)]:mr-2 [&_[data-tag=tiny-rate]]:h-6`,
+          '[&_[data-tag=tiny-checkbox]]:py-0 [&_[data-tag=tiny-input]]:w-full [&_[data-tag=tiny-input]]:block [&_[data-tag=tiny-input-inner]]:block [&_[data-tag=tiny-input-inner]]:leading-5',
           '[&_[data-tag=tiny-input]_textarea]:px-0 sm:[&_[data-tag=tiny-input]_textarea]:px-3 [&_[data-tag=tiny-input]_textarea]:w-full [&_[data-tag=tiny-input]_textarea]:pt-1 sm:[&_[data-tag=tiny-input]_textarea]:pt-2',
           state.formInline ? 'align-sub leading-none' : '',
           state.labelPosition === 'top' && !state.hideRequiredAsterisk

packages/vue/src/input/src/mobile-first.vue

@@ -51,7 +51,7 @@
           @mouseenter.native="handleEnterDisplayOnlyContent"
         >
           <span
-            class="absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
+            class="absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-5.5 text-color-text-primary"
             v-if="type === 'password'"
             >{{ state.hiddenPassword }}</span
           >
@@ -68,7 +68,7 @@
             ></component>
           </span>
           <span
-            class="absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
+            class="absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-5.5 text-color-text-primary"
             v-else
           >
             {{ state.displayOnlyText }}
@@ -279,6 +279,7 @@
         effect="light"
         :content="state.displayOnlyTooltip"
         placement="top"
+        pre
         :popper-class="state.tooltipConfig.popperClass || ''"
         :popper-options="{ bubbling: true }"
         @mouseenter.native="handleEnterDisplayOnlyContent($event, 'textarea')"

packages/vue/src/tooltip/src/mobile-first.vue

@@ -114,7 +114,7 @@ export default defineComponent({
       if (vm.renderContent) {
         attrContent = vm.renderContent(h, vm.content)
       } else if (vm.pre) {
-        attrContent = vm.content ? h('pre', { class: 'whitespace-pre-wrap' }, vm.content) : null
+        attrContent = vm.content ? h('pre', { class: 'tiny-tooltip-text-pre whitespace-pre-wrap' }, vm.content) : null
       } else {
         attrContent = vm.content
       }