Skip to content

Commit 07cd26c

Browse files
vaebevaebe
authored
feat: 增加 input 组件 (#13)
* feat: input 初版 * feat: 代码优化 * fix: 去处文档的多余 style 设置 * feat: 代码优化
1 parent b275306 commit 07cd26c

8 files changed

Lines changed: 948 additions & 1 deletion

File tree

‎packages/ccui/ui/input/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { App } from 'vue'
2+
import Input from './src/input'
3+
4+
Input.install = function (app: App): void {
5+
app.component(Input.name, Input)
6+
}
7+
8+
export { Input }
9+
10+
export default {
11+
title: 'Input 输入框',
12+
category: '数据录入',
13+
status: '100%',
14+
install(app: App): void {
15+
app.component(Input.name, Input)
16+
},
17+
}

‎packages/ccui/ui/input/src/input-types.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import type { ExtractPropTypes, PropType } from 'vue'
2+
3+
export type InputType = 'text' | 'password'
4+
export type InputSize = 'large' | 'default' | 'small'
5+
6+
export const inputProps = {
7+
type: {
8+
type: String as PropType<InputType>,
9+
default: 'text',
10+
},
11+
size: {
12+
type: String as PropType<InputSize>,
13+
default: 'default',
14+
},
15+
placeholder: {
16+
type: String,
17+
default: '',
18+
},
19+
disabled: {
20+
type: Boolean,
21+
default: false,
22+
},
23+
readonly: {
24+
type: Boolean,
25+
default: false,
26+
},
27+
clearable: {
28+
type: Boolean,
29+
default: false,
30+
},
31+
showPassword: {
32+
type: Boolean,
33+
default: false,
34+
},
35+
prepend: {
36+
type: String,
37+
default: '',
38+
},
39+
append: {
40+
type: String,
41+
default: '',
42+
},
43+
modelValue: {
44+
type: String,
45+
default: '',
46+
},
47+
} as const
48+
49+
export type InputProps = ExtractPropTypes<typeof inputProps>

‎packages/ccui/ui/input/src/input.scss‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
@use '../../style-var/index.scss' as *;
2+
3+
.#{$cls-prefix}-input {
4+
display: flex;
5+
align-items: center;
6+
width: 100%;
7+
box-sizing: border-box;
8+
background-color: $ccui-base-bg;
9+
border: 1px solid $ccui-line;
10+
border-radius: $ccui-border-radius;
11+
color: $ccui-text;
12+
font-size: 14px;
13+
transition:
14+
border-color $ccui-animation-duration-base,
15+
box-shadow $ccui-animation-duration-base;
16+
17+
&:hover {
18+
border-color: $ccui-brand-hover;
19+
}
20+
21+
&:focus-within {
22+
border-color: $ccui-brand;
23+
box-shadow: 0 0 0 2px rgba($ccui-brand, 0.2);
24+
}
25+
26+
&--disabled {
27+
background-color: $ccui-disabled-bg;
28+
border-color: $ccui-disabled-line;
29+
color: $ccui-disabled-text;
30+
cursor: not-allowed;
31+
32+
&:hover {
33+
border-color: $ccui-disabled-line;
34+
}
35+
}
36+
37+
&--large {
38+
height: $ccui-size-lg;
39+
font-size: $ccui-font-size-lg;
40+
41+
&.#{$cls-prefix}-input--prefix {
42+
.#{$cls-prefix}-input__inner {
43+
padding-left: 24px;
44+
}
45+
}
46+
47+
&.#{$cls-prefix}-input--suffix,
48+
&.#{$cls-prefix}-input--clearable {
49+
.#{$cls-prefix}-input__inner {
50+
padding-right: 24px;
51+
}
52+
}
53+
}
54+
55+
&--default {
56+
height: $ccui-size-md;
57+
font-size: $ccui-font-size-md;
58+
59+
&.#{$cls-prefix}-input--prefix {
60+
.#{$cls-prefix}-input__inner {
61+
padding-left: 24px;
62+
}
63+
}
64+
65+
&.#{$cls-prefix}-input--suffix,
66+
&.#{$cls-prefix}-input--clearable {
67+
.#{$cls-prefix}-input__inner {
68+
padding-right: 24px;
69+
}
70+
}
71+
}
72+
73+
&--small {
74+
height: $ccui-size-sm;
75+
font-size: $ccui-font-size-sm;
76+
77+
&.#{$cls-prefix}-input--prefix {
78+
.#{$cls-prefix}-input__inner {
79+
padding-left: 20px;
80+
}
81+
}
82+
83+
&.#{$cls-prefix}-input--suffix,
84+
&.#{$cls-prefix}-input--clearable {
85+
.#{$cls-prefix}-input__inner {
86+
padding-right: 20px;
87+
}
88+
}
89+
}
90+
91+
&__wrapper {
92+
position: relative;
93+
width: 100%;
94+
padding: 0 8px;
95+
}
96+
97+
&__prepend,
98+
&__append {
99+
display: flex;
100+
align-items: center;
101+
white-space: nowrap;
102+
background-color: $ccui-area;
103+
color: $ccui-text;
104+
font-size: inherit;
105+
line-height: 1;
106+
height: 100%;
107+
padding: 0 10px;
108+
}
109+
110+
&__prepend {
111+
border-radius: $ccui-border-radius 0 0 $ccui-border-radius;
112+
border-right: 1px solid $ccui-line;
113+
}
114+
115+
&__append {
116+
border-radius: 0 $ccui-border-radius $ccui-border-radius 0;
117+
border-left: 1px solid $ccui-line;
118+
}
119+
120+
&__inner {
121+
width: 100%;
122+
height: 100%;
123+
background: transparent;
124+
border: none;
125+
outline: none;
126+
color: inherit;
127+
font-size: inherit;
128+
font-family: inherit;
129+
position: relative;
130+
z-index: 0;
131+
box-sizing: border-box;
132+
padding: 4px 0;
133+
134+
&::placeholder {
135+
color: $ccui-placeholder;
136+
}
137+
138+
&:disabled {
139+
cursor: not-allowed;
140+
color: $ccui-disabled-text;
141+
}
142+
}
143+
144+
&__prefix,
145+
&__suffix {
146+
position: absolute;
147+
top: 0;
148+
bottom: 0;
149+
display: flex;
150+
align-items: center;
151+
justify-content: center;
152+
color: $ccui-placeholder;
153+
pointer-events: none;
154+
z-index: 1;
155+
}
156+
157+
&__prefix {
158+
left: 8px;
159+
}
160+
161+
&__suffix {
162+
right: 8px;
163+
}
164+
165+
&__clear,
166+
&__password-visible,
167+
&__password-hidden {
168+
cursor: pointer;
169+
pointer-events: auto;
170+
color: $ccui-placeholder;
171+
transition: color $ccui-animation-duration-base;
172+
173+
&:hover {
174+
color: $ccui-text;
175+
}
176+
}
177+
}

0 commit comments

Comments
 (0)