feat(ip-address): [ip-address] Adapting to the SMB theme (#2166)

Author: Youyou-smiles

examples/sites/demos/pc/app/ip-address/disabled.spec.ts

@@ -13,7 +13,7 @@ test('ipAddress 禁用', async ({ page }) => {
   await expect(input.nth(1)).toBeDisabled()
   await expect(input.nth(2)).toBeDisabled()
   await expect(input.nth(3)).toBeDisabled()
-  await expect(ipAddress).toHaveCSS('background-color', 'rgb(245, 245, 246)')
-  await expect(ipAddress).toHaveCSS('border-bottom-color', 'rgb(223, 225, 230)')
-  await expect(ipAddress).toHaveCSS('color', 'rgb(173, 176, 184)')
+  await expect(ipAddress).toHaveCSS('background-color', 'rgb(240, 240, 240)')
+  await expect(ipAddress).toHaveCSS('border-bottom-color', 'rgb(219, 219, 219)')
+  await expect(ipAddress).toHaveCSS('color', 'rgb(194, 194, 194)')
 })

examples/sites/demos/pc/app/ip-address/size-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <tiny-ip-address size="medium" v-model="value"></tiny-ip-address>
-    <tiny-ip-address size="small" v-model="value"></tiny-ip-address>
     <tiny-ip-address v-model="value"></tiny-ip-address>
+    <tiny-ip-address size="small" v-model="value"></tiny-ip-address>
     <tiny-ip-address size="mini" v-model="value"></tiny-ip-address>
   </div>
 </template>

examples/sites/demos/pc/app/ip-address/size.spec.ts

@@ -8,7 +8,7 @@ test('ipAddress 输入框大小', async ({ page }) => {
   const ipAddress = demo.locator('.tiny-ip-address__input')
 
   await expect(ipAddress.first()).toHaveCSS('height', '42px')
-  await expect(ipAddress.nth(1)).toHaveCSS('height', '36px')
+  await expect(ipAddress.nth(1)).toHaveCSS('height', '32px')
   await expect(ipAddress.nth(2)).toHaveCSS('height', '28px')
   await expect(ipAddress.nth(3)).toHaveCSS('height', '24px')
 })

examples/sites/demos/pc/app/ip-address/size.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <tiny-ip-address size="medium" v-model="value"></tiny-ip-address>
-    <tiny-ip-address size="small" v-model="value"></tiny-ip-address>
     <tiny-ip-address v-model="value"></tiny-ip-address>
+    <tiny-ip-address size="small" v-model="value"></tiny-ip-address>
     <tiny-ip-address size="mini" v-model="value"></tiny-ip-address>
   </div>
 </template>

packages/renderless/src/ip-address/index.ts

@@ -403,15 +403,3 @@ export const keydown =
       return false
     }
   }
-
-export const getHeightOfSize = (size, isLineHeight = 'height') => {
-  const sizeMap = {
-    medium: '42px',
-    small: '36px',
-    mini: '24px'
-  }
-
-  const sizePX = sizeMap[size]
-
-  return sizePX ? isLineHeight + ':' + sizePX + ';' : ''
-}

packages/renderless/src/ip-address/vue.ts

@@ -23,8 +23,7 @@ import {
   change,
   blur,
   keyup,
-  keydown,
-  getHeightOfSize
+  keydown
 } from './index'
 import { KEY_CODE } from '../common'
 import type {
@@ -66,9 +65,7 @@ const initState = ({
 
     formDisabled: computed(() => (parent.tinyForm || {}).disabled),
     disabled: computed(() => props.disabled || state.formDisabled),
-    heightStyle: computed(() => getHeightOfSize(props.size)),
-    lineHeightStyle: computed(() => getHeightOfSize(props.size, 'line-height')),
-    allHeightStyle: computed(() => `${state.heightStyle}${state.lineHeightStyle}`)
+    size: computed(() => props.size)
   })
 
   return state as IIpAddressState

packages/theme-saas/src/ip-address/index.less

@@ -16,7 +16,6 @@
     @apply relative;
     @apply p-0;
     @apply w-full;
-    @apply h-7;
     @apply border border-solid border-color-border;
     @apply text-color-text-primary;
     @apply rounded;
@@ -77,8 +76,6 @@
         @apply text-color-text-primary;
         width: ~'calc(100% - theme(spacing.3))';
         @apply float-left;
-        @apply h-7;
-        @apply leading-7;
         @apply p-0;
         @apply text-xs;
 
@@ -115,5 +112,37 @@
         }
       }
     }
+    &.medium {
+      height: 42px;
+      li input {
+        height: 42px;
+        line-height: 42px;
+      }
+    }
+
+    &.default {
+      @apply h-7;
+      li input {
+        @apply h-7;
+        @apply leading-7;
+      }
+    }
+    
+
+    &.small {
+      @apply h-9;
+      li input {
+        @apply h-9;
+        @apply leading-9;
+      }
+    }
+
+    &.mini {
+      @apply h-6;
+      li input {
+        @apply h-6;
+        @apply leading-6;
+      }
+    }
   }
 }

packages/theme/src/ip-address/index.less

@@ -30,8 +30,6 @@
   &__input {
     position: relative;
     width: 100%;
-    height: var(--ti-ip-address-normal-height);
-    line-height: var(--ti-ip-address-line-height);
     border: 1px solid var(--ti-ip-address-normal-border-color);
     color: var(--ti-ip-address-normal-text-color);
     border-radius: var(--ti-ip-address-border-radius);
@@ -98,8 +96,6 @@
         font-family: var(--ti-ip-address-normal-font-family);
         width: var(--ti-ip-address-input-width);
         float: left;
-        height: calc(var(--ti-ip-address-normal-height) - 2px);
-        line-height: var(--ti-ip-address-line-height);
         padding: 0;
 
         &:focus,
@@ -144,5 +140,24 @@
       text-align: center;
       margin: 0 var(--ti-ip-address-ipv6-delimiter-margin-right);
     }
+    &.medium li input {
+      height: var(--ti--ip--address-medium-height);
+      line-height: var(--ti--ip--address-medium-line-height);
+    }
+
+    &.default li input {
+      height: var(--ti--ip--address-default-height);
+      line-height: var(--ti--ip--address-default-line-height);
+    }
+
+    &.small li input {
+      height: var(--ti--ip--address-small-height);
+      line-height: var(--ti--ip--address-small-line-height);
+    }
+
+    &.mini li input {
+      height: var(--ti--ip--address-mini-height);
+      line-height: var(--ti--ip--address-mini-line-height);
+    } 
   }
 }

packages/theme/src/ip-address/vars.less

@@ -37,8 +37,6 @@
   --ti-ip-address-font-size: var(--ti-common-font-size-1);
   // IP地址输入框字族
   --ti-ip-address-normal-font-family: "Manrop","Manrope-Medium";
-  // IP地址输入框行高
-  --ti-ip-address-line-height: var(--ti-common-line-height-1);
   // IP地址输入框聚焦边框色
   --ti-ip-address-border-color-focus: var(--ti-common-color-line-active, #5e7ce0);
   // IP地址输入框悬浮边框色
@@ -49,4 +47,13 @@
   --ti-ip-address-disabled-border-color: var(--ti-common-color-line-disabled, #dfe1e6);
   // Ip地址输入框item宽度
   --ti-ip-address-input-width: var(--ti-common-size-8x);
+  // 尺寸 高度及行高
+  --ti--ip--address-medium-height: calc(var(--ti-common-size-height-medium));
+  --ti--ip--address-medium-line-height: calc(var(--ti-common-line-height-5) + 2px);
+  --ti--ip--address-default-height: calc(var(--ti-common-size-height-normal) - 2px);
+  --ti--ip--address-default-line-height: var(--ti-common-line-height-4);
+  --ti--ip--address-small-height: calc(var(--ti-common-size-height-minor) - 4px);
+  --ti--ip--address-small-line-height: calc(var(--ti-common-line-height-3) - 2px);
+  --ti--ip--address-mini-height: calc(var(--ti-common-size-height-mini) - 2px);
+  --ti--ip--address-mini-line-height: calc(var(--ti-common-line-height-2) - 2px);
 }

packages/vue/src/ip-address/src/pc.vue

@@ -12,16 +12,15 @@
 <template>
   <div class="tiny-ip-address">
     <ul
-      :class="{
-        active: state.active,
-        disabled: state.disabled,
-        'tiny-ip-address__input': true
-      }"
-      :style="state.heightStyle"
+      :class="[
+        state.active ? 'active' : '',
+        state.disabled ? 'disabled' : '',
+        'tiny-ip-address__input',
+        state.size ? `${state.size}` : 'default'
+      ]"
     >
-      <li v-for="(item, index) of state.address" :key="index" :style="state.lineHeightStyle">
+      <li v-for="(item, index) of state.address" :key="index">
         <input
-          :style="state.allHeightStyle"
           ref="inputs"
           :readonly="readonly"
           :disabled="state.disabled"