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

* fix: fix form item not align when set display-only

* fix: set numeric input background style

Author: gimmyhehe

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

@@ -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 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',
             '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 ? 'leading-none h-auto align-[inherit] pr-4' : '',
+            state.isDisplayOnly ? '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.10)] line-clamp-2 inline-block relative top-px leading-normal sm:leading-5.5',
+              'max-h-[theme(spacing.12)] line-clamp-2 inline-block relative leading-normal',
               (state.isRequired || required) && !state.hideRequiredAsterisk
                 ? `before:content-['*'] before:text-color-error before:relative before:mr-1`
                 : '',
-              state.isDisplayOnly ? 'pl-0 before:hidden' : ''
+              state.isDisplayOnly ? 'pl-0 before:hidden sm:leading-5.5' : 'sm:leading-7'
             )
           "
         >
@@ -73,10 +73,11 @@
       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 [&_[data-tag=tiny-rate]]:h-6`,
+          `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-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.isDisplayOnly ? '[&_[data-tag=tiny-rate]]:h-[22px]' : '[&_[data-tag=tiny-rate]]:h-7',
           state.labelPosition === 'top' && !state.hideRequiredAsterisk
             ? state.isDisplayOnly
               ? 'pl-0'
@@ -108,8 +109,8 @@
           '[&_[class^=tiny-autocomplete]]:w-full',
           '[&_[class^=tiny-cascader]]:w-full',
           state.isDisplayOnly
-            ? '[&_>*:not([data-tag^=tiny-],[class^=tiny-])]:leading-8 [&_>*:not([data-tag^=tiny-],[class^=tiny-])]:sm:leading-normal'
-            : ''
+            ? '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'
         ]"
       >
         <slot></slot>

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-normal text-color-text-primary"
+      class="sm:leading-5.5 text-color-text-primary"
       :class="state.inputSize !== 'mini' ? 'text-sm' : 'text-xs'"
     >
       <span>{{ state.displayOnlyText }}</span

packages/vue/src/numeric/src/token.ts

@@ -25,7 +25,7 @@ export const classes = {
   'numeric_input-disabled':
     'bg-inherit sm:bg-color-bg-6 sm:[&_input]:bg-transparent cursor-not-allowed sm:border border-0.5 border-solid rounded border-color-border-separator text-color-text-disabled sm:text-color-text-secondary',
 
-  'numeric_input_inner': 'w-full z-10 leading-7 sm:text-sm inline-block overflow-hidden outline-0',
+  'numeric_input_inner': 'w-full z-10 leading-7 sm:text-sm inline-block overflow-hidden outline-0 bg-color-bg-1',
   'numeric-text-center': 'text-center',
   'numeric-text-left': 'text-left',
   'numeric_input_inner_size': 'leading-7 text-sm',

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

@@ -1,6 +1,5 @@
 export const classes = {
-  'radio-default':
-    'radio inline-flex items-center align-middle leading-4 cursor-pointer sm:flex-row py-px sm:py-0 h-fit',
+  'radio-default': 'radio inline-flex items-center 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',
@@ -38,9 +37,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',
-  'readonly-is-not-checked': 'sm:hidden',
-  'not-readonly-common': 'mr-5 sm:[&:last-child]:mr-0',
+  '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',
   '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',

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

@@ -6,7 +6,7 @@
         gcls(`switch-${size ? size : 'small'}`),
         gcls(
           `${state.currentValue === trueValue ? 'switch-true' : 'switch-false'}${
-            disabled || types === 'loading' ? '-disabled' : '-not-disabled'
+            state.disabled || types === 'loading' ? '-disabled' : '-not-disabled'
           }`
         )
       )
@@ -25,8 +25,8 @@
           gcls(
             `${
               state.currentValue === trueValue
-                ? `switch-handle-true-${size ? size : 'small'}${disabled || types === 'loading' ? '-disabled' : ''}`
-                : `switch-handle-false-${size ? size : 'small'}${disabled || types === 'loading' ? '-disabled' : ''}`
+                ? `switch-handle-true-${size ? size : 'small'}${state.disabled || types === 'loading' ? '-disabled' : ''}`
+                : `switch-handle-false-${size ? size : 'small'}${state.disabled || types === 'loading' ? '-disabled' : ''}`
             }`
           )
         )
@@ -62,7 +62,7 @@
             viewBox="0 0 24 24"
             :class="[
               gcls(`switch-icon-${size ? size : 'small'}`),
-              gcls(`switch-icon-true-${disabled ? 'disabled' : 'default'}`)
+              gcls(`switch-icon-true-${state.disabled ? 'disabled' : 'default'}`)
             ]"
           >
             <path
@@ -75,7 +75,7 @@
             viewBox="0 0 24 24"
             :class="[
               gcls(`switch-icon-${size ? size : 'small'}`),
-              gcls(`switch-icon-false-${disabled ? 'disabled' : 'default'}`)
+              gcls(`switch-icon-false-${state.disabled ? 'disabled' : 'default'}`)
             ]"
           >
             <path