revert: revert mobile first from sync (#2980)

* fix: revert sync mobile first form

* revert: revert mobile first from sync

* revert: revert mobile first from sync

Author: gimmyhehe

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

@@ -18,7 +18,7 @@
 
 .@{form-item-prefix-cls} {
   @apply relative;
-  @apply mb-4;
+  @apply mb-5;
   .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.5 cursor-pointer',
+        'inline-flex sm:items-center text-sm leading-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.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`,
+        `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`,
         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 sm:py-0' : ''
+        state.isDisplayOnly ? 'border-none py-0.5' : ''
       )
     "
   >
@@ -26,15 +26,15 @@
         v-if="slots.label || label"
         :class="
           m(
-            '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',
+            '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',
             '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)]'
               : 'min-h-[theme(spacing.9)]',
             state.labelPosition === 'right' ? 'text-right sm:text-right' : '',
             state.labelPosition === 'left' ? 'text-left sm:text-left' : '',
             state.formInline && state.labelPosition === 'top' ? 'block' : '',
-            state.isDisplayOnly ? 'h-auto align-[inherit] pr-4' : '',
+            state.isDisplayOnly ? 'leading-none h-auto align-[inherit] pr-4' : '',
             tipContent ? 'pr-5 sm:pr-7' : '',
             state.labelPosition === 'top' && !state.hideRequiredAsterisk
               ? 'overflow-visible relative before:absolute before:-left-2.5'
@@ -49,11 +49,11 @@
         <span
           :class="
             m(
-              'max-h-[theme(spacing.12)] line-clamp-2 inline-block relative leading-normal',
+              'max-h-[theme(spacing.10)] line-clamp-2 inline-block relative top-px leading-normal',
               (state.isRequired || required) && !state.hideRequiredAsterisk
                 ? `before:content-['*'] before:text-color-error before:relative before:mr-1`
                 : '',
-              state.isDisplayOnly ? 'pl-0 before:hidden sm:leading-5.5' : 'sm:leading-7'
+              state.isDisplayOnly ? 'pl-0 before:hidden' : ''
             )
           "
         >
@@ -73,13 +73,10 @@
       data-tag="tiny-form-item-inline"
       :class="
         m(
-          `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`,
+          `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',
           '[&_[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.isDisplayOnly
-            ? '[&_[data-tag=tiny-input]]:block [&_[data-tag=tiny-input-inner]]:block [&_[data-tag=tiny-input-inner]]:leading-5 [&_[data-tag=tiny-rate]]:h-[22px]'
-            : '[&_[data-tag=tiny-rate]]:h-7',
           state.labelPosition === 'top' && !state.hideRequiredAsterisk
             ? state.isDisplayOnly
               ? 'pl-0'
@@ -111,8 +108,8 @@
           '[&_[class^=tiny-autocomplete]]:w-full',
           '[&_[class^=tiny-cascader]]:w-full',
           state.isDisplayOnly
-            ? 'sm:leading-5.5 [&_>*:not([data-tag^=tiny-],[class^=tiny-])]:leading-8 [&_>*:not([data-tag^=tiny-],[class^=tiny-])]:sm:leading-normal'
-            : '[&_[data-tag=tiny-checkbox]]:h-7 [&_[data-tag=tiny-radio]]:h-7'
+            ? '[&_>*:not([data-tag^=tiny-],[class^=tiny-])]:leading-8 [&_>*:not([data-tag^=tiny-],[class^=tiny-])]:sm:leading-normal'
+            : ''
         ]"
       >
         <slot></slot>

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-5.5 text-color-text-primary"
+            class="absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal 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-5.5 text-color-text-primary"
+            class="absolute top-0 left-0 max-w-full overflow-hidden text-ellipsis whitespace-nowrap leading-7 sm:leading-normal text-color-text-primary"
             v-else
           >
             {{ state.displayOnlyText }}

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

@@ -103,7 +103,7 @@
     <div
       data-tag="numeric-display-only"
       v-if="state.isDisplayOnly"
-      class="sm:leading-5.5 text-color-text-primary"
+      class="sm:leading-normal text-color-text-primary"
       :class="state.inputSize !== 'mini' ? 'text-sm' : 'text-xs'"
     >
       <span>{{ state.displayOnlyText }}</span

packages/vue/src/radio/src/token.ts

@@ -1,5 +1,6 @@
 export const classes = {
-  'radio-default': 'radio inline-flex items-center leading-4 cursor-pointer sm:flex-row py-px sm:py-0 h-fit',
+  'radio-default':
+    'radio inline-flex items-center align-middle leading-4 cursor-pointer sm:flex-row py-px sm:py-0 h-fit',
   'radio-label-common': 'relative text-center w-7 h-7 mr-2 sm:mr-0',
   'radio-label-size-common': 'sm:w-4 sm:h-4',
   'radio-label-size-medium': 'sm:w-6 sm:h-6',
@@ -37,9 +38,9 @@ export const classes = {
   'label-disabled': 'text-color-text-secondary cursor-not-allowed',
   'pc-show': 'hidden sm:block',
   'mobile-show': 'block sm:hidden',
-  'readonly-is-checked': 'sm:m-0 cursor-default',
-  'readonly-is-not-checked': 'sm:hidden cursor-default',
-  'not-readonly-common': 'mr-5 align-middle sm:[&:last-child]:mr-0',
+  'readonly-is-checked': 'sm:m-0',
+  'readonly-is-not-checked': 'sm:hidden',
+  'not-readonly-common': 'mr-5 sm:[&:last-child]:mr-0',
   'hidden-radio': 'sm:hidden',
   'not-readly-common-label': 'sm:py-0 sm:pl-2 -ml-0.5 sm:ml-0',
   'readonly-checked-label': 'sm:pl-0 text-color-text-primary',