Skip to content

Commit

Permalink
feat(ip-address): [ip-address] Adapting to the SMB theme (#2166)
Browse files Browse the repository at this point in the history
  • Loading branch information
Youyou-smiles authored Sep 23, 2024
1 parent d697b6a commit b39016b
Show file tree
Hide file tree
Showing 10 changed files with 75 additions and 40 deletions.
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/ip-address/disabled.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)')
})
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/ip-address/size.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/ip-address/size.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
12 changes: 0 additions & 12 deletions packages/renderless/src/ip-address/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 + ';' : ''
}
7 changes: 2 additions & 5 deletions packages/renderless/src/ip-address/vue.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,7 @@ import {
change,
blur,
keyup,
keydown,
getHeightOfSize
keydown
} from './index'
import { KEY_CODE } from '../common'
import type {
Expand Down Expand Up @@ -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
Expand Down
35 changes: 32 additions & 3 deletions packages/theme-saas/src/ip-address/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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;
}
}
}
}
23 changes: 19 additions & 4 deletions packages/theme/src/ip-address/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
}
}
}
11 changes: 9 additions & 2 deletions packages/theme/src/ip-address/vars.less
Original file line number Diff line number Diff line change
Expand Up @@ -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地址输入框悬浮边框色
Expand All @@ -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);
}
15 changes: 7 additions & 8 deletions packages/vue/src/ip-address/src/pc.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit b39016b

Please sign in to comment.