@uzum-tech/ui 1.5.0 → 1.5.2
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/dist/index.js +312 -314
- package/dist/index.prod.js +3 -3
- package/es/_internal/typography/src/styles/text.cssr.js +0 -1
- package/es/_internal/typography/styles/light.js +1 -1
- package/es/data-table/src/DataTable.d.ts +3 -0
- package/es/data-table/src/DataTable.js +1 -0
- package/es/data-table/src/TableParts/Body.d.ts +1 -0
- package/es/data-table/src/TableParts/Body.js +3 -3
- package/es/data-table/src/interface.d.ts +2 -0
- package/es/data-table/src/interface.js +1 -1
- package/es/list/src/List.d.ts +41 -55
- package/es/list/src/List.js +6 -10
- package/es/list/src/ListItem.d.ts +84 -25
- package/es/list/src/ListItem.js +116 -98
- package/es/list/src/interface.d.ts +1 -0
- package/es/list/src/props.d.ts +70 -31
- package/es/list/src/props.js +25 -5
- package/es/list/src/styles/index.cssr.js +32 -90
- package/es/list/styles/light.d.ts +5 -8
- package/es/list/styles/light.js +6 -9
- package/es/tag/src/styles/index.cssr.js +5 -1
- package/es/tag/styles/light.js +2 -2
- package/es/upload/src/UploadFile.js +4 -3
- package/es/version.d.ts +1 -1
- package/es/version.js +1 -1
- package/lib/_internal/typography/src/styles/text.cssr.js +0 -1
- package/lib/_internal/typography/styles/light.js +1 -1
- package/lib/data-table/src/DataTable.d.ts +3 -0
- package/lib/data-table/src/DataTable.js +1 -0
- package/lib/data-table/src/TableParts/Body.d.ts +1 -0
- package/lib/data-table/src/TableParts/Body.js +3 -3
- package/lib/data-table/src/interface.d.ts +2 -0
- package/lib/data-table/src/interface.js +1 -1
- package/lib/list/src/List.d.ts +41 -55
- package/lib/list/src/List.js +6 -10
- package/lib/list/src/ListItem.d.ts +84 -25
- package/lib/list/src/ListItem.js +115 -97
- package/lib/list/src/interface.d.ts +1 -0
- package/lib/list/src/props.d.ts +70 -31
- package/lib/list/src/props.js +25 -5
- package/lib/list/src/styles/index.cssr.js +32 -90
- package/lib/list/styles/light.d.ts +5 -8
- package/lib/list/styles/light.js +6 -9
- package/lib/tag/src/styles/index.cssr.js +5 -1
- package/lib/tag/styles/light.js +2 -2
- package/lib/upload/src/UploadFile.js +4 -3
- package/lib/version.d.ts +1 -1
- package/lib/version.js +1 -1
- package/package.json +1 -1
- package/web-types.json +62 -35
package/lib/list/src/props.d.ts
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { ArrayMouseHandler, ArrayKeyboardHandler, ArrayEmptyHandler, ArrayFocusHandler, ExtractPublicPropTypes } from '../../_utils';
|
|
2
|
-
import type { PropType, Ref } from 'vue';
|
|
3
|
-
import { ListItemPropsBoolean, ListItemPropsRenderable, ExtractIntoInjection, ListInjectionBoolean, ListInjectionRenderable } from './interface';
|
|
2
|
+
import type { Component, PropType, Ref } from 'vue';
|
|
3
|
+
import { ListItemPropsBoolean, ListItemPropsRenderable, ExtractIntoInjection, ListInjectionBoolean, ListInjectionRenderable, Size } from './interface';
|
|
4
|
+
import { InternalTextProps } from '../../_internal/typography';
|
|
5
|
+
import { SkeletonProps } from '../../_internal/skeleton';
|
|
6
|
+
import { AvatarProps } from '../../avatar';
|
|
7
|
+
import { BadgeProps } from '../../badge';
|
|
4
8
|
export declare const listItemPropsBoolean: Array<keyof ListItemPropsBoolean>;
|
|
5
9
|
export declare const listItemPropsRenderable: Array<keyof ListItemPropsRenderable>;
|
|
6
10
|
export declare const listItemBaseProps: {
|
|
@@ -39,11 +43,55 @@ export declare const listItemBaseProps: {
|
|
|
39
43
|
icon: import("./interface").RenderableProp;
|
|
40
44
|
avatar: import("./interface").RenderableProp;
|
|
41
45
|
};
|
|
46
|
+
export type HeaderPropObject = InternalTextProps & Partial<{
|
|
47
|
+
loading: boolean;
|
|
48
|
+
position: 'top' | 'bottom';
|
|
49
|
+
skeleton: SkeletonProps;
|
|
50
|
+
align: 'stretch' | 'start' | 'center' | 'end';
|
|
51
|
+
}>;
|
|
52
|
+
export type DescriptionPropsObject = InternalTextProps & Partial<{
|
|
53
|
+
loading: boolean;
|
|
54
|
+
position: 'top' | 'bottom';
|
|
55
|
+
skeleton: SkeletonProps;
|
|
56
|
+
}>;
|
|
42
57
|
export declare const listItemProps: {
|
|
58
|
+
avatar: {
|
|
59
|
+
type: PropType<AvatarProps & {
|
|
60
|
+
icon: Component;
|
|
61
|
+
hasBadge?: boolean;
|
|
62
|
+
}>;
|
|
63
|
+
default: () => {};
|
|
64
|
+
};
|
|
65
|
+
badge: {
|
|
66
|
+
type: PropType<BadgeProps>;
|
|
67
|
+
default: () => {};
|
|
68
|
+
};
|
|
43
69
|
tag: {
|
|
44
70
|
type: StringConstructor;
|
|
45
71
|
default: undefined;
|
|
46
72
|
};
|
|
73
|
+
prefixAlign: {
|
|
74
|
+
type: PropType<"start" | "center" | "end">;
|
|
75
|
+
default: string;
|
|
76
|
+
};
|
|
77
|
+
suffixAlign: {
|
|
78
|
+
type: PropType<"start" | "center" | "end">;
|
|
79
|
+
default: string;
|
|
80
|
+
};
|
|
81
|
+
loadingPrefix: BooleanConstructor;
|
|
82
|
+
loadingSuffix: BooleanConstructor;
|
|
83
|
+
header: {
|
|
84
|
+
type: PropType<HeaderPropObject>;
|
|
85
|
+
};
|
|
86
|
+
description: {
|
|
87
|
+
type: PropType<DescriptionPropsObject>;
|
|
88
|
+
};
|
|
89
|
+
headerSide: {
|
|
90
|
+
type: PropType<HeaderPropObject>;
|
|
91
|
+
};
|
|
92
|
+
descriptionSide: {
|
|
93
|
+
type: PropType<DescriptionPropsObject>;
|
|
94
|
+
};
|
|
47
95
|
onClick: {
|
|
48
96
|
type: PropType<ArrayMouseHandler | undefined>;
|
|
49
97
|
default: undefined;
|
|
@@ -72,14 +120,13 @@ export declare const listItemProps: {
|
|
|
72
120
|
disabled: import("./interface").BooleanProp;
|
|
73
121
|
loading: import("./interface").BooleanProp;
|
|
74
122
|
loadingSkeleton: import("./interface").BooleanProp;
|
|
75
|
-
header: import("./interface").RenderableProp;
|
|
76
|
-
description: import("./interface").RenderableProp;
|
|
77
|
-
headerSide: import("./interface").RenderableProp;
|
|
78
|
-
descriptionSide: import("./interface").RenderableProp;
|
|
79
123
|
icon: import("./interface").RenderableProp;
|
|
80
|
-
avatar: import("./interface").RenderableProp;
|
|
81
124
|
};
|
|
82
125
|
export declare const listProps: {
|
|
126
|
+
size: {
|
|
127
|
+
type: PropType<Size>;
|
|
128
|
+
default: string;
|
|
129
|
+
};
|
|
83
130
|
showIcon: {
|
|
84
131
|
type: BooleanConstructor;
|
|
85
132
|
default: boolean;
|
|
@@ -129,18 +176,12 @@ export declare const listProps: {
|
|
|
129
176
|
icon: import("./interface").RenderableProp;
|
|
130
177
|
avatar: import("./interface").RenderableProp;
|
|
131
178
|
theme: PropType<import("../../_mixins").Theme<"List", {
|
|
132
|
-
padding: string;
|
|
133
179
|
iconSize: string;
|
|
134
180
|
iconSpace: string;
|
|
135
181
|
suffixSpace: string;
|
|
136
182
|
prefixSpace: string;
|
|
137
|
-
titleSize: string;
|
|
138
|
-
titleLineHeight: string;
|
|
139
|
-
subtitleSize: string;
|
|
140
|
-
subtitleLineHeight: string;
|
|
141
183
|
subtitleColor: string;
|
|
142
184
|
avatarSpace: string;
|
|
143
|
-
minHeight: string;
|
|
144
185
|
colorFocus: string;
|
|
145
186
|
pressedScale: string;
|
|
146
187
|
textColorDisabled: string;
|
|
@@ -154,22 +195,19 @@ export declare const listProps: {
|
|
|
154
195
|
borderColor: string;
|
|
155
196
|
borderColorModal: string;
|
|
156
197
|
borderColorPopover: string;
|
|
157
|
-
|
|
158
|
-
|
|
198
|
+
borderRadiusLarge: string;
|
|
199
|
+
borderRadiusMedium: string;
|
|
200
|
+
borderRadiusSmall: string;
|
|
201
|
+
padding: string;
|
|
202
|
+
suffixSize: string;
|
|
159
203
|
}, any>>;
|
|
160
204
|
themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
|
|
161
|
-
padding: string;
|
|
162
205
|
iconSize: string;
|
|
163
206
|
iconSpace: string;
|
|
164
207
|
suffixSpace: string;
|
|
165
208
|
prefixSpace: string;
|
|
166
|
-
titleSize: string;
|
|
167
|
-
titleLineHeight: string;
|
|
168
|
-
subtitleSize: string;
|
|
169
|
-
subtitleLineHeight: string;
|
|
170
209
|
subtitleColor: string;
|
|
171
210
|
avatarSpace: string;
|
|
172
|
-
minHeight: string;
|
|
173
211
|
colorFocus: string;
|
|
174
212
|
pressedScale: string;
|
|
175
213
|
textColorDisabled: string;
|
|
@@ -183,22 +221,19 @@ export declare const listProps: {
|
|
|
183
221
|
borderColor: string;
|
|
184
222
|
borderColorModal: string;
|
|
185
223
|
borderColorPopover: string;
|
|
186
|
-
|
|
187
|
-
|
|
224
|
+
borderRadiusLarge: string;
|
|
225
|
+
borderRadiusMedium: string;
|
|
226
|
+
borderRadiusSmall: string;
|
|
227
|
+
padding: string;
|
|
228
|
+
suffixSize: string;
|
|
188
229
|
}, any>>>;
|
|
189
230
|
builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"List", {
|
|
190
|
-
padding: string;
|
|
191
231
|
iconSize: string;
|
|
192
232
|
iconSpace: string;
|
|
193
233
|
suffixSpace: string;
|
|
194
234
|
prefixSpace: string;
|
|
195
|
-
titleSize: string;
|
|
196
|
-
titleLineHeight: string;
|
|
197
|
-
subtitleSize: string;
|
|
198
|
-
subtitleLineHeight: string;
|
|
199
235
|
subtitleColor: string;
|
|
200
236
|
avatarSpace: string;
|
|
201
|
-
minHeight: string;
|
|
202
237
|
colorFocus: string;
|
|
203
238
|
pressedScale: string;
|
|
204
239
|
textColorDisabled: string;
|
|
@@ -212,8 +247,11 @@ export declare const listProps: {
|
|
|
212
247
|
borderColor: string;
|
|
213
248
|
borderColorModal: string;
|
|
214
249
|
borderColorPopover: string;
|
|
215
|
-
|
|
216
|
-
|
|
250
|
+
borderRadiusLarge: string;
|
|
251
|
+
borderRadiusMedium: string;
|
|
252
|
+
borderRadiusSmall: string;
|
|
253
|
+
padding: string;
|
|
254
|
+
suffixSize: string;
|
|
217
255
|
}, any>>>;
|
|
218
256
|
};
|
|
219
257
|
export type ListInjection = ExtractIntoInjection<typeof listItemBaseProps> & ListInjectionBoolean & ListInjectionRenderable & {
|
|
@@ -222,6 +260,7 @@ export type ListInjection = ExtractIntoInjection<typeof listItemBaseProps> & Lis
|
|
|
222
260
|
bordered: Ref<boolean>;
|
|
223
261
|
clickable: Ref<boolean>;
|
|
224
262
|
showDivider: Ref<boolean>;
|
|
263
|
+
size: Ref<Size>;
|
|
225
264
|
};
|
|
226
265
|
export declare const listInjectionKey: import("vue").InjectionKey<ListInjection>;
|
|
227
266
|
export type ListItemProps = ExtractPublicPropTypes<typeof listItemProps>;
|
package/lib/list/src/props.js
CHANGED
|
@@ -10,8 +10,7 @@ exports.listItemPropsBoolean = [
|
|
|
10
10
|
'hoverable',
|
|
11
11
|
'rounded',
|
|
12
12
|
'disabled',
|
|
13
|
-
'loading'
|
|
14
|
-
'loadingSkeleton'
|
|
13
|
+
'loading'
|
|
15
14
|
];
|
|
16
15
|
exports.listItemPropsRenderable = [
|
|
17
16
|
'header',
|
|
@@ -45,11 +44,32 @@ exports.listItemBaseProps = Object.assign(Object.assign(Object.assign({}, export
|
|
|
45
44
|
type: [Function, Array, undefined],
|
|
46
45
|
default: undefined
|
|
47
46
|
} });
|
|
48
|
-
|
|
47
|
+
const headerProps = {
|
|
48
|
+
type: Object
|
|
49
|
+
};
|
|
50
|
+
const descriptionProps = {
|
|
51
|
+
type: Object
|
|
52
|
+
};
|
|
53
|
+
exports.listItemProps = Object.assign(Object.assign({}, exports.listItemBaseProps), { avatar: {
|
|
54
|
+
type: Object,
|
|
55
|
+
default: () => ({})
|
|
56
|
+
}, badge: {
|
|
57
|
+
type: Object,
|
|
58
|
+
default: () => ({})
|
|
59
|
+
}, tag: {
|
|
49
60
|
type: String,
|
|
50
61
|
default: undefined
|
|
51
|
-
}
|
|
52
|
-
|
|
62
|
+
}, prefixAlign: {
|
|
63
|
+
type: String,
|
|
64
|
+
default: 'start'
|
|
65
|
+
}, suffixAlign: {
|
|
66
|
+
type: String,
|
|
67
|
+
default: 'start'
|
|
68
|
+
}, loadingPrefix: Boolean, loadingSuffix: Boolean, header: headerProps, description: descriptionProps, headerSide: headerProps, descriptionSide: descriptionProps });
|
|
69
|
+
exports.listProps = Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), exports.listItemBaseProps), { size: {
|
|
70
|
+
type: [String],
|
|
71
|
+
default: 'medium'
|
|
72
|
+
}, showIcon: {
|
|
53
73
|
type: Boolean,
|
|
54
74
|
default: true
|
|
55
75
|
}, tag: {
|
|
@@ -4,13 +4,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
const cssr_1 = require("../../../_utils/cssr");
|
|
7
|
-
|
|
7
|
+
// --u-border-radius
|
|
8
|
+
// --u-suffix-size
|
|
9
|
+
exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('align-start', `
|
|
10
|
+
align-self: self-start;
|
|
11
|
+
`), (0, cssr_1.cB)('align-center', `
|
|
12
|
+
align-self: center;
|
|
13
|
+
`), (0, cssr_1.cB)('align-end', `
|
|
14
|
+
align-self: self-end;
|
|
15
|
+
`), (0, cssr_1.cB)('list', `
|
|
8
16
|
--u-merged-border-color: var(--u-border-color);
|
|
9
17
|
--u-merged-color: var(--u-color);
|
|
10
18
|
--u-merged-color-focus: var(--u-color-focus);
|
|
11
19
|
--u-merged-color-hover: var(--u-color-hover);
|
|
12
20
|
margin: 0;
|
|
13
|
-
font-size: var(--u-font-size);
|
|
14
21
|
transition:
|
|
15
22
|
background-color .3s var(--u-bezier),
|
|
16
23
|
color .3s var(--u-bezier),
|
|
@@ -21,17 +28,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('list', `
|
|
|
21
28
|
background-color: var(--u-merged-color);
|
|
22
29
|
`, [(0, cssr_1.cM)('clickable', [(0, cssr_1.cB)('list-item', `
|
|
23
30
|
cursor: pointer;
|
|
24
|
-
`)]), (0, cssr_1.cM)('bordered', `
|
|
25
|
-
border: 1px solid var(--u-merged-border-color);
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
border-radius: var(--u-border-radius);
|
|
29
|
-
border-bottom-left-radius: 0;
|
|
30
|
-
border-bottom-right-radius: 0;
|
|
31
|
-
`), (0, cssr_1.c)('&:last-child', `
|
|
32
|
-
border-radius: var(--u-border-radius);
|
|
33
|
-
border-top-left-radius: 0;
|
|
34
|
-
border-top-right-radius: 0;
|
|
31
|
+
`)]), (0, cssr_1.cM)('bordered', [(0, cssr_1.cB)('list-item', `
|
|
32
|
+
border-bottom: 1px solid var(--u-merged-border-color);
|
|
33
|
+
`, [(0, cssr_1.c)('&:last-child', `
|
|
34
|
+
border: none;
|
|
35
35
|
`)])]), (0, cssr_1.cE)('header, footer', `
|
|
36
36
|
padding: var(--u-padding);
|
|
37
37
|
padding-left: 0px;
|
|
@@ -51,11 +51,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('list', `
|
|
|
51
51
|
position: relative;
|
|
52
52
|
outline: none;
|
|
53
53
|
display: flex;
|
|
54
|
-
align-items: center;
|
|
55
54
|
padding: var(--u-padding);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
`, [(0, cssr_1.cB)('skeleton', `
|
|
56
|
+
height: 24px
|
|
57
|
+
`), (0, cssr_1.cE)('main', `
|
|
59
58
|
flex: 1;
|
|
60
59
|
`), (0, cssr_1.c)('&:focus', `
|
|
61
60
|
outline: none;
|
|
@@ -70,81 +69,43 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('list', `
|
|
|
70
69
|
left: 0;
|
|
71
70
|
`), (0, cssr_1.cE)('icon', `
|
|
72
71
|
display: flex;
|
|
73
|
-
font-size: var(--u-icon-size);
|
|
74
72
|
margin-left: var(--u-icon-space);
|
|
75
73
|
`), (0, cssr_1.cE)('suffix', `
|
|
76
74
|
margin-left: var(--u-suffix-space);
|
|
75
|
+
font-size: var(--u-suffix-size);
|
|
76
|
+
align-self: center;
|
|
77
77
|
`), (0, cssr_1.cE)('prefix', `
|
|
78
78
|
margin-right: var(--u-prefix-space);
|
|
79
|
+
display: flex;
|
|
79
80
|
`), (0, cssr_1.cE)('content', `
|
|
80
|
-
flex-grow: 1;
|
|
81
|
-
padding: 0;
|
|
82
81
|
display: flex;
|
|
83
82
|
flex-direction: column;
|
|
84
|
-
|
|
83
|
+
gap: 4px;
|
|
85
84
|
`, [(0, cssr_1.cM)('right', `
|
|
86
|
-
margin-left: auto;
|
|
87
85
|
text-align: right;
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
flex-grow: 1;
|
|
96
|
-
display: flex;
|
|
97
|
-
align-items: flex-start;
|
|
86
|
+
`), (0, cssr_1.cM)('full', {
|
|
87
|
+
width: '100%'
|
|
88
|
+
})]), (0, cssr_1.cE)('text', `
|
|
89
|
+
display: grid;
|
|
90
|
+
gap: 16px;
|
|
91
|
+
grid-template-columns: 1fr 1fr;
|
|
92
|
+
height: 100%
|
|
98
93
|
`), (0, cssr_1.cE)('title', `
|
|
99
|
-
padding-top: 4px;
|
|
100
94
|
flex-grow: 1;
|
|
101
|
-
|
|
102
|
-
font-size: var(--u-title-size);
|
|
103
|
-
font-weight: 500;
|
|
104
|
-
line-height: var(--u-title-line-height);
|
|
105
|
-
`, [(0, cssr_1.c)('&:last-child', `
|
|
106
|
-
margin-bottom: 0;
|
|
107
|
-
`)]), (0, cssr_1.cE)('subtitle', `
|
|
108
|
-
padding-bottom: 4px;
|
|
95
|
+
`), (0, cssr_1.cE)('subtitle', `
|
|
109
96
|
flex-grow: 1;
|
|
110
|
-
font-size: var(--u-subtitle-size);
|
|
111
|
-
font-weight: 500;
|
|
112
|
-
line-height: var(--u-subtitle-line-height);
|
|
113
97
|
color: var(--u-subtitle-color);
|
|
114
98
|
`), (0, cssr_1.cE)('subtitle,title', [(0, cssr_1.c)('&:last-child:first-child', `
|
|
115
|
-
|
|
116
|
-
`)]), (0, cssr_1.cE)('avatar', `
|
|
117
|
-
display: flex;
|
|
118
|
-
margin-right: var(--u-avatar-space);
|
|
119
|
-
`), (0, cssr_1.c)('&:last-child', [(0, cssr_1.cE)('divider', `
|
|
99
|
+
`)]), (0, cssr_1.c)('&:last-child', [(0, cssr_1.cE)('divider', `
|
|
120
100
|
display: none;
|
|
121
101
|
`)]), (0, cssr_1.cM)('default', `
|
|
122
|
-
min-height: var(--u-min-height);
|
|
123
102
|
padding: var(--u-padding);
|
|
124
103
|
`, [(0, cssr_1.cE)('main', `
|
|
125
|
-
display:
|
|
104
|
+
display: none;
|
|
126
105
|
align-items: center;
|
|
127
|
-
`)]), (0, cssr_1.
|
|
128
|
-
padding-top: 0;
|
|
129
|
-
padding-bottom: 4px;
|
|
130
|
-
order: 1;
|
|
131
|
-
margin-top: 4px;
|
|
132
|
-
margin-bottom: 0px;
|
|
133
|
-
`, [(0, cssr_1.c)('&:last-child', `
|
|
134
|
-
margin-top: 0;
|
|
135
|
-
`)]), (0, cssr_1.cE)('subtitle', `
|
|
136
|
-
padding-bottom: 0;
|
|
137
|
-
padding-top: 4px;
|
|
138
|
-
`)]), (0, cssr_1.cM)('columns-even', [(0, cssr_1.cE)('content', [(0, cssr_1.cM)('right', `
|
|
139
|
-
flex-grow: 1;
|
|
140
|
-
text-align: left;
|
|
141
|
-
align-items: stretch;
|
|
142
|
-
`)])]), (0, cssr_1.cM)('bordered', `
|
|
143
|
-
padding: var(--u-padding);
|
|
144
|
-
`), (0, cssr_1.cNotM)('loading', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.cNotM)('loading-skeleton', [(0, cssr_1.cM)('hoverable', `
|
|
106
|
+
`)]), (0, cssr_1.cNotM)('loading', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.cNotM)('loading-skeleton', [(0, cssr_1.cM)('hoverable', `
|
|
145
107
|
cursor: pointer;
|
|
146
108
|
user-select: none;
|
|
147
|
-
padding: var(--u-padding);
|
|
148
109
|
`, [(0, cssr_1.c)('&:hover', `
|
|
149
110
|
background: var(--u-merged-color-hover);
|
|
150
111
|
`), (0, cssr_1.c)('&:focus,&:active', `
|
|
@@ -157,26 +118,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('list', `
|
|
|
157
118
|
border-radius: var(--u-border-radius);
|
|
158
119
|
`), (0, cssr_1.cM)('disabled', [(0, cssr_1.cE)('text, subtitle', `
|
|
159
120
|
color: var(--u-text-color-disabled);
|
|
160
|
-
`)]), (0, cssr_1.
|
|
161
|
-
padding: 5px 0;
|
|
162
|
-
`), (0, cssr_1.cE)('content--left', `
|
|
163
|
-
flex-grow: 0;
|
|
164
|
-
width: calc(66.38% - 8px);
|
|
165
|
-
`), (0, cssr_1.cE)('content--right', `
|
|
166
|
-
flex-grow: 0;
|
|
167
|
-
width: calc(33.62% - 8px);
|
|
168
|
-
`), (0, cssr_1.cE)('title,subtitle', [(0, cssr_1.c)('&:first-child:last-child', `
|
|
169
|
-
padding: 0;
|
|
170
|
-
`)]), (0, cssr_1.cE)('title', `
|
|
171
|
-
margin-bottom: 8px;
|
|
172
|
-
`, [(0, cssr_1.c)('&:last-child', `
|
|
173
|
-
margin-bottom: 0;
|
|
174
|
-
`)]), (0, cssr_1.cM)('description-first', [(0, cssr_1.cE)('title', `
|
|
175
|
-
margin-bottom: 0;
|
|
176
|
-
margin-top: 8px;
|
|
177
|
-
`, [(0, cssr_1.c)('&:last-child', `
|
|
178
|
-
margin-top: 0;
|
|
179
|
-
`)])])])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('list', `
|
|
121
|
+
`)])]), (0, cssr_1.insideModal)((0, cssr_1.cB)('list', `
|
|
180
122
|
--u-merged-color-hover: var(--u-color-hover-modal);
|
|
181
123
|
--u-merged-color: var(--u-color-modal);
|
|
182
124
|
--u-merged-border-color: var(--u-border-color-modal);
|
|
@@ -1,18 +1,12 @@
|
|
|
1
1
|
import type { ThemeCommonVars } from '../../_styles/common';
|
|
2
2
|
import { type Theme } from '../../_mixins';
|
|
3
3
|
export declare const self: (vars: ThemeCommonVars) => {
|
|
4
|
-
padding: string;
|
|
5
4
|
iconSize: string;
|
|
6
5
|
iconSpace: string;
|
|
7
6
|
suffixSpace: string;
|
|
8
7
|
prefixSpace: string;
|
|
9
|
-
titleSize: string;
|
|
10
|
-
titleLineHeight: string;
|
|
11
|
-
subtitleSize: string;
|
|
12
|
-
subtitleLineHeight: string;
|
|
13
8
|
subtitleColor: string;
|
|
14
9
|
avatarSpace: string;
|
|
15
|
-
minHeight: string;
|
|
16
10
|
colorFocus: string;
|
|
17
11
|
pressedScale: string;
|
|
18
12
|
textColorDisabled: string;
|
|
@@ -26,8 +20,11 @@ export declare const self: (vars: ThemeCommonVars) => {
|
|
|
26
20
|
borderColor: string;
|
|
27
21
|
borderColorModal: string;
|
|
28
22
|
borderColorPopover: string;
|
|
29
|
-
|
|
30
|
-
|
|
23
|
+
borderRadiusLarge: string;
|
|
24
|
+
borderRadiusMedium: string;
|
|
25
|
+
borderRadiusSmall: string;
|
|
26
|
+
padding: string;
|
|
27
|
+
suffixSize: string;
|
|
31
28
|
};
|
|
32
29
|
export type ListThemeVars = ReturnType<typeof self>;
|
|
33
30
|
declare const listLight: Theme<'List', ListThemeVars>;
|
package/lib/list/styles/light.js
CHANGED
|
@@ -3,20 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.self = void 0;
|
|
4
4
|
const common_1 = require("../../_styles/common");
|
|
5
5
|
const self = (vars) => {
|
|
6
|
-
const { borderRadius,
|
|
6
|
+
const { borderRadius, borderRadiusMedium, borderRadiusSmall, iconMedium, textSecondary, iconSmall, elementsQuaternary, textTertiary, textPrimary, containerPrimary, elementsTertiary } = vars;
|
|
7
7
|
return {
|
|
8
|
-
padding: '8px 24px',
|
|
9
8
|
iconSize: iconMedium,
|
|
10
9
|
iconSpace: '16px',
|
|
11
10
|
suffixSpace: '20px',
|
|
12
11
|
prefixSpace: '20px',
|
|
13
|
-
titleSize: fontBodyLarge,
|
|
14
|
-
titleLineHeight: lineHeightBodyLarge,
|
|
15
|
-
subtitleSize: fontBodyMedium,
|
|
16
|
-
subtitleLineHeight: lineHeightBodyMedium,
|
|
17
12
|
subtitleColor: textSecondary,
|
|
18
13
|
avatarSpace: iconSmall,
|
|
19
|
-
minHeight: '64px',
|
|
20
14
|
colorFocus: elementsQuaternary,
|
|
21
15
|
pressedScale: '0.98',
|
|
22
16
|
textColorDisabled: textTertiary,
|
|
@@ -30,8 +24,11 @@ const self = (vars) => {
|
|
|
30
24
|
borderColor: elementsQuaternary,
|
|
31
25
|
borderColorModal: elementsQuaternary,
|
|
32
26
|
borderColorPopover: elementsQuaternary,
|
|
33
|
-
borderRadius,
|
|
34
|
-
|
|
27
|
+
borderRadiusLarge: borderRadius,
|
|
28
|
+
borderRadiusMedium,
|
|
29
|
+
borderRadiusSmall,
|
|
30
|
+
padding: '12px 24px',
|
|
31
|
+
suffixSize: '24px'
|
|
35
32
|
};
|
|
36
33
|
};
|
|
37
34
|
exports.self = self;
|
|
@@ -97,6 +97,7 @@ exports.default = (0, cssr_1.cB)('tag', `
|
|
|
97
97
|
cursor: pointer;
|
|
98
98
|
box-shadow: none;
|
|
99
99
|
color: var(--u-text-color-checkable);
|
|
100
|
+
padding: 0px 8px;
|
|
100
101
|
background-color: var(--u-color-checkable);
|
|
101
102
|
transition: border-color .3s var(--u-bezier);
|
|
102
103
|
`, [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', 'background-color: var(--u-color-hover-checkable);', [(0, cssr_1.cNotM)('checked', 'color: var(--u-text-color-hover-checkable);')]), (0, cssr_1.c)('&:focus', `
|
|
@@ -106,4 +107,7 @@ exports.default = (0, cssr_1.cB)('tag', `
|
|
|
106
107
|
transition: border-color .3s var(--u-bezier);`, [(0, cssr_1.cNotM)('checked', 'color: var(--u-text-color-pressed-checkable);')])]), (0, cssr_1.cM)('checked', `
|
|
107
108
|
color: var(--u-text-color-checked);
|
|
108
109
|
background-color: var(--u-color-checked);
|
|
109
|
-
`, [(0, cssr_1.
|
|
110
|
+
`, [(0, cssr_1.cE)('border', `
|
|
111
|
+
border-color: var(--u-color-checked);
|
|
112
|
+
transition: none;
|
|
113
|
+
`), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', 'background-color: var(--u-color-checked-hover);'), (0, cssr_1.c)('&:focus', 'background-color: var(--u-color-checked-hover);'), (0, cssr_1.c)('&:active', 'background-color: var(--u-color-checked-pressed);')])])])]);
|
package/lib/tag/styles/light.js
CHANGED
|
@@ -4,7 +4,7 @@ exports.self = void 0;
|
|
|
4
4
|
const seemly_1 = require("seemly");
|
|
5
5
|
const common_1 = require("../../_styles/common");
|
|
6
6
|
const self = (vars) => {
|
|
7
|
-
const { opacityDisabled, borderRadiusSmall: borderRadius, fontWeightStrong, fontWeight, elementsTertiary, fontBodySmall, fontBodyMedium, textQuaternary, elementsPrimary, elementsSenary, elementsQuinary, textPrimary, elementsQuaternary, transparencySecondary, staticDarkGrey, staticWhite, elementsDarkQuinary, brandPrimary600, brandPrimary500, brandQuaternary600, brandQuaternary500, staticGreen, staticOrange, staticRed, staticBlack } = vars;
|
|
7
|
+
const { opacityDisabled, borderRadiusSmall: borderRadius, fontWeightStrong, fontWeight, elementsTertiary, fontBodySmall, fontBodyMedium, textQuaternary, elementsPrimary, elementsSecondary, elementsSenary, elementsQuinary, textPrimary, elementsQuaternary, transparencySecondary, staticDarkGrey, staticWhite, elementsDarkQuinary, brandPrimary600, brandPrimary500, brandQuaternary600, brandQuaternary500, staticGreen, staticOrange, staticRed, staticBlack } = vars;
|
|
8
8
|
const borderTagWidth = 2;
|
|
9
9
|
return {
|
|
10
10
|
closeIconSizeTiny: '16px',
|
|
@@ -39,7 +39,7 @@ const self = (vars) => {
|
|
|
39
39
|
textColorHoverCheckable: textPrimary,
|
|
40
40
|
textColorPressedCheckable: textPrimary,
|
|
41
41
|
textColorChecked: textQuaternary,
|
|
42
|
-
colorCheckable:
|
|
42
|
+
colorCheckable: elementsSecondary,
|
|
43
43
|
colorHoverCheckable: elementsQuaternary,
|
|
44
44
|
colorPressedCheckable: elementsQuaternary,
|
|
45
45
|
colorChecked: elementsPrimary,
|
|
@@ -222,8 +222,8 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
222
222
|
!this.vertical &&
|
|
223
223
|
!imageCardTypes.includes(listType) &&
|
|
224
224
|
`${clsPrefix}-upload-file-loader--default`
|
|
225
|
-
] },
|
|
226
|
-
(0, vue_1.h)("div", { class: [
|
|
225
|
+
] }, {
|
|
226
|
+
default: () => ((0, vue_1.h)("div", { class: [
|
|
227
227
|
`${clsPrefix}-upload-file`,
|
|
228
228
|
`${clsPrefix}-upload-file--${this.progressStatus}-status`,
|
|
229
229
|
file.url &&
|
|
@@ -249,6 +249,7 @@ exports.default = (0, vue_1.defineComponent)({
|
|
|
249
249
|
? this.$slots['upload-file-subtitle']({ file })
|
|
250
250
|
: ''))),
|
|
251
251
|
actionsNode),
|
|
252
|
-
this.showProgress && ((0, vue_1.h)("div", { class: `${clsPrefix}-upload-file-overlay` }))))
|
|
252
|
+
this.showProgress && ((0, vue_1.h)("div", { class: `${clsPrefix}-upload-file-overlay` }))))
|
|
253
|
+
}));
|
|
253
254
|
}
|
|
254
255
|
});
|
package/lib/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: "1.5.
|
|
1
|
+
declare const _default: "1.5.2";
|
|
2
2
|
export default _default;
|
package/lib/version.js
CHANGED