gi-component 0.0.41 → 0.0.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -51,10 +51,10 @@ const getCardClass = computed(() => {
|
|
|
51
51
|
if (props.bordered) {
|
|
52
52
|
arr.push(b('card--bordered'))
|
|
53
53
|
}
|
|
54
|
+
arr.push(b(`card--${props.size}`))
|
|
54
55
|
if (props.inner) {
|
|
55
56
|
arr.push(b('card--inner'))
|
|
56
57
|
}
|
|
57
|
-
arr.push(b(`card--${props.size}`))
|
|
58
58
|
return arr.join(' ')
|
|
59
59
|
})
|
|
60
60
|
|
|
@@ -132,24 +132,6 @@ const getHeaderClass = computed(() => {
|
|
|
132
132
|
box-sizing: border-box;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
|
-
.#{a.$prefix}-card--full {
|
|
136
|
-
.#{a.$prefix}-card-body {
|
|
137
|
-
flex: 1;
|
|
138
|
-
display: flex;
|
|
139
|
-
flex-direction: column;
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
.#{a.$prefix}-card--inner {
|
|
144
|
-
|
|
145
|
-
.#{a.$prefix}-card-header,
|
|
146
|
-
.#{a.$prefix}-card-body,
|
|
147
|
-
.#{a.$prefix}-card-footer {
|
|
148
|
-
padding-left: 0;
|
|
149
|
-
padding-right: 0;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
135
|
.#{a.$prefix}-card--small {
|
|
154
136
|
.#{a.$prefix}-card-header {
|
|
155
137
|
height: 36px;
|
|
@@ -168,4 +150,22 @@ const getHeaderClass = computed(() => {
|
|
|
168
150
|
padding: var(--card-padding-y-small) var(--card-padding-x-small);
|
|
169
151
|
}
|
|
170
152
|
}
|
|
153
|
+
|
|
154
|
+
.#{a.$prefix}-card--full {
|
|
155
|
+
.#{a.$prefix}-card-body {
|
|
156
|
+
flex: 1;
|
|
157
|
+
display: flex;
|
|
158
|
+
flex-direction: column;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.#{a.$prefix}-card--inner {
|
|
163
|
+
|
|
164
|
+
.#{a.$prefix}-card-header,
|
|
165
|
+
.#{a.$prefix}-card-body,
|
|
166
|
+
.#{a.$prefix}-card-footer {
|
|
167
|
+
padding-left: 0;
|
|
168
|
+
padding-right: 0;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
171
|
</style>
|
|
@@ -24,8 +24,8 @@ const classNames = computed(() => [b('flex')])
|
|
|
24
24
|
|
|
25
25
|
const gapMap: Record<string, string> = {
|
|
26
26
|
small: '8px',
|
|
27
|
-
middle: '
|
|
28
|
-
large: '
|
|
27
|
+
middle: '12px',
|
|
28
|
+
large: '16px'
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
const resolvedGap = computed(() => {
|
|
@@ -50,7 +50,7 @@ const resolvedWrap = computed(() => {
|
|
|
50
50
|
const style = computed<CSSProperties>(() => {
|
|
51
51
|
const obj: CSSProperties = {
|
|
52
52
|
display: 'flex',
|
|
53
|
-
flexDirection: props.vertical ? 'column' : 'row',
|
|
53
|
+
flexDirection: props.column || props.vertical ? 'column' : 'row',
|
|
54
54
|
flexWrap: resolvedWrap.value,
|
|
55
55
|
justifyContent: props.justify,
|
|
56
56
|
alignItems: props.align
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export interface FlexProps {
|
|
2
2
|
/** Flex 主轴的方向是否垂直，使用 flex-direction: column */
|
|
3
|
+
column?: boolean
|
|
4
|
+
/** 与 column 同义，保留用于兼容旧版 API */
|
|
3
5
|
vertical?: boolean
|
|
4
6
|
/** 设置元素单行显示还是多行显示，参考 flex-wrap；支持布尔值，true 为 wrap，false 为 nowrap */
|
|
5
7
|
wrap?: 'nowrap' | 'wrap' | 'wrap-reverse' | boolean | ''
|