@can2421/ui-components 1.0.36 → 1.0.38
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/components/index.d.ts +6 -0
- package/dist/components/src/button/button.d.ts +13 -4
- package/dist/components/src/button/button.types.d.ts +4 -1
- package/dist/components/src/button/index.d.ts +22 -4
- package/dist/components/vite.config.d.ts +2 -0
- package/dist/index.es.d.ts +5 -0
- package/dist/styles/button.css +113 -8
- package/dist/styles/button.scss +153 -8
- package/dist/styles/index.css +113 -8
- package/dist/ui-components.mjs +57 -46
- package/dist/ui-components.umd.js +2 -2
- package/package.json +1 -1
|
@@ -4,24 +4,33 @@ declare function __VLS_template(): {
|
|
|
4
4
|
default?(_: {}): any;
|
|
5
5
|
};
|
|
6
6
|
refs: {};
|
|
7
|
-
rootEl:
|
|
7
|
+
rootEl: HTMLButtonElement;
|
|
8
8
|
};
|
|
9
9
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
10
10
|
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
11
11
|
readonly type: {
|
|
12
12
|
readonly type: import('vue').PropType<import('./button.types').ButtonType>;
|
|
13
|
-
readonly default: "
|
|
13
|
+
readonly default: "";
|
|
14
14
|
};
|
|
15
15
|
readonly size: StringConstructor;
|
|
16
|
+
readonly disabled: BooleanConstructor;
|
|
17
|
+
readonly plain: BooleanConstructor;
|
|
18
|
+
readonly round: BooleanConstructor;
|
|
16
19
|
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
17
20
|
readonly type: {
|
|
18
21
|
readonly type: import('vue').PropType<import('./button.types').ButtonType>;
|
|
19
|
-
readonly default: "
|
|
22
|
+
readonly default: "";
|
|
20
23
|
};
|
|
21
24
|
readonly size: StringConstructor;
|
|
25
|
+
readonly disabled: BooleanConstructor;
|
|
26
|
+
readonly plain: BooleanConstructor;
|
|
27
|
+
readonly round: BooleanConstructor;
|
|
22
28
|
}>> & Readonly<{}>, {
|
|
23
29
|
readonly type: import('./button.types').ButtonType;
|
|
24
|
-
|
|
30
|
+
readonly disabled: boolean;
|
|
31
|
+
readonly plain: boolean;
|
|
32
|
+
readonly round: boolean;
|
|
33
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLButtonElement>;
|
|
25
34
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
26
35
|
export default _default;
|
|
27
36
|
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
@@ -3,8 +3,11 @@ export type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
|
3
3
|
export declare const buttonProps: {
|
|
4
4
|
readonly type: {
|
|
5
5
|
readonly type: PropType<ButtonType>;
|
|
6
|
-
readonly default: "
|
|
6
|
+
readonly default: "";
|
|
7
7
|
};
|
|
8
8
|
readonly size: StringConstructor;
|
|
9
|
+
readonly disabled: BooleanConstructor;
|
|
10
|
+
readonly plain: BooleanConstructor;
|
|
11
|
+
readonly round: BooleanConstructor;
|
|
9
12
|
};
|
|
10
13
|
export type ButtonProps = ExtractPropTypes<typeof buttonProps>;
|
|
@@ -2,12 +2,18 @@ declare const CButton: import('../../../utils/install').SFCWithInstall<{
|
|
|
2
2
|
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
|
|
3
3
|
readonly type: {
|
|
4
4
|
readonly type: import('vue').PropType<import('./button.types').ButtonType>;
|
|
5
|
-
readonly default: "
|
|
5
|
+
readonly default: "";
|
|
6
6
|
};
|
|
7
7
|
readonly size: StringConstructor;
|
|
8
|
+
readonly disabled: BooleanConstructor;
|
|
9
|
+
readonly plain: BooleanConstructor;
|
|
10
|
+
readonly round: BooleanConstructor;
|
|
8
11
|
}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
|
|
9
12
|
readonly type: import('./button.types').ButtonType;
|
|
10
|
-
|
|
13
|
+
readonly disabled: boolean;
|
|
14
|
+
readonly plain: boolean;
|
|
15
|
+
readonly round: boolean;
|
|
16
|
+
}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLButtonElement, import('vue').ComponentProvideOptions, {
|
|
11
17
|
P: {};
|
|
12
18
|
B: {};
|
|
13
19
|
D: {};
|
|
@@ -17,11 +23,17 @@ declare const CButton: import('../../../utils/install').SFCWithInstall<{
|
|
|
17
23
|
}, Readonly<import('vue').ExtractPropTypes<{
|
|
18
24
|
readonly type: {
|
|
19
25
|
readonly type: import('vue').PropType<import('./button.types').ButtonType>;
|
|
20
|
-
readonly default: "
|
|
26
|
+
readonly default: "";
|
|
21
27
|
};
|
|
22
28
|
readonly size: StringConstructor;
|
|
29
|
+
readonly disabled: BooleanConstructor;
|
|
30
|
+
readonly plain: BooleanConstructor;
|
|
31
|
+
readonly round: BooleanConstructor;
|
|
23
32
|
}>> & Readonly<{}>, {}, {}, {}, {}, {
|
|
24
33
|
readonly type: import('./button.types').ButtonType;
|
|
34
|
+
readonly disabled: boolean;
|
|
35
|
+
readonly plain: boolean;
|
|
36
|
+
readonly round: boolean;
|
|
25
37
|
}>;
|
|
26
38
|
__isFragment?: never;
|
|
27
39
|
__isTeleport?: never;
|
|
@@ -29,11 +41,17 @@ declare const CButton: import('../../../utils/install').SFCWithInstall<{
|
|
|
29
41
|
} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
|
|
30
42
|
readonly type: {
|
|
31
43
|
readonly type: import('vue').PropType<import('./button.types').ButtonType>;
|
|
32
|
-
readonly default: "
|
|
44
|
+
readonly default: "";
|
|
33
45
|
};
|
|
34
46
|
readonly size: StringConstructor;
|
|
47
|
+
readonly disabled: BooleanConstructor;
|
|
48
|
+
readonly plain: BooleanConstructor;
|
|
49
|
+
readonly round: BooleanConstructor;
|
|
35
50
|
}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
|
|
36
51
|
readonly type: import('./button.types').ButtonType;
|
|
52
|
+
readonly disabled: boolean;
|
|
53
|
+
readonly plain: boolean;
|
|
54
|
+
readonly round: boolean;
|
|
37
55
|
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
|
|
38
56
|
$slots: {
|
|
39
57
|
default?(_: {}): any;
|
package/dist/index.es.d.ts
CHANGED
package/dist/styles/button.css
CHANGED
|
@@ -1,20 +1,125 @@
|
|
|
1
1
|
.c-button {
|
|
2
2
|
display: inline-block;
|
|
3
|
-
padding:
|
|
4
|
-
outline: unset;
|
|
5
|
-
border: unset;
|
|
3
|
+
padding: 5px 15px;
|
|
6
4
|
border-radius: 4px;
|
|
7
5
|
background: #fff;
|
|
6
|
+
outline: none;
|
|
7
|
+
color: #606266;
|
|
8
|
+
font-size: 14px;
|
|
9
|
+
border: 1px solid #dcdfe6;
|
|
8
10
|
cursor: pointer;
|
|
11
|
+
user-select: none;
|
|
9
12
|
}
|
|
10
|
-
.c-button
|
|
11
|
-
|
|
13
|
+
.c-button ~ .c-button {
|
|
14
|
+
margin-left: 8px;
|
|
15
|
+
}
|
|
16
|
+
.c-button:not(.c-button--primary, .c-button--danger, .c-button--warning, .c-button--info, .c-button--success, .c-button--plain, .c-button--disabled):hover {
|
|
17
|
+
border-color: #57abff;
|
|
18
|
+
background: #ecf5ff;
|
|
19
|
+
color: #409eff;
|
|
20
|
+
}
|
|
21
|
+
.c-button--primary:not(.c-button--disabled):hover, .c-button--danger:not(.c-button--disabled):hover, .c-button--warning:not(.c-button--disabled):hover, .c-button--info:not(.c-button--disabled):hover, .c-button--success:not(.c-button--disabled):hover {
|
|
22
|
+
opacity: 0.8;
|
|
23
|
+
}
|
|
24
|
+
.c-button:active:not(.c-button--disabled) {
|
|
25
|
+
transform: scale(0.95);
|
|
26
|
+
}
|
|
27
|
+
.c-button--disabled {
|
|
28
|
+
opacity: 0.5;
|
|
29
|
+
cursor: not-allowed;
|
|
30
|
+
}
|
|
31
|
+
.c-button--round {
|
|
32
|
+
border-radius: 20px;
|
|
33
|
+
}
|
|
34
|
+
.c-button--plain {
|
|
35
|
+
background: #fff;
|
|
36
|
+
border: 1px solid #dcdfe6;
|
|
37
|
+
color: #606266;
|
|
38
|
+
}
|
|
39
|
+
.c-button--plain:not(.c-button--disabled):hover {
|
|
40
|
+
border-color: #409eff;
|
|
41
|
+
color: #409eff;
|
|
12
42
|
}
|
|
13
43
|
.c-button--primary {
|
|
14
44
|
background: #409eff;
|
|
45
|
+
border-color: #409eff;
|
|
15
46
|
color: #fff;
|
|
16
47
|
}
|
|
17
|
-
.c-button--
|
|
18
|
-
|
|
19
|
-
|
|
48
|
+
.c-button--primary.c-button--plain {
|
|
49
|
+
background: #ecf5ff;
|
|
50
|
+
border: 1px solid #409eff;
|
|
51
|
+
color: #409eff;
|
|
52
|
+
}
|
|
53
|
+
.c-button--primary.c-button--plain:not(.c-button--disabled):hover {
|
|
54
|
+
background: #409eff;
|
|
55
|
+
border-color: #409eff;
|
|
56
|
+
color: #fff;
|
|
57
|
+
}
|
|
58
|
+
.c-button--success {
|
|
59
|
+
background: #70c646;
|
|
60
|
+
border-color: #70c646;
|
|
61
|
+
color: #fff;
|
|
62
|
+
}
|
|
63
|
+
.c-button--success.c-button--plain {
|
|
64
|
+
background: #f0f9eb;
|
|
65
|
+
border: 1px solid #70c646;
|
|
66
|
+
color: #70c646;
|
|
67
|
+
}
|
|
68
|
+
.c-button--success.c-button--plain:not(.c-button--disabled):hover {
|
|
69
|
+
background: #70c646;
|
|
70
|
+
border-color: #70c646;
|
|
71
|
+
color: #fff;
|
|
72
|
+
}
|
|
73
|
+
.c-button--warning {
|
|
74
|
+
background: #e6a23c;
|
|
75
|
+
border-color: #e6a23c;
|
|
76
|
+
color: #fff;
|
|
77
|
+
}
|
|
78
|
+
.c-button--warning.c-button--plain {
|
|
79
|
+
background: #fdf6ec;
|
|
80
|
+
border: 1px solid #e6a23c;
|
|
81
|
+
color: #e6a23c;
|
|
82
|
+
}
|
|
83
|
+
.c-button--warning.c-button--plain:not(.c-button--disabled):hover {
|
|
84
|
+
background: #e6a23c;
|
|
85
|
+
border-color: #e6a23c;
|
|
86
|
+
color: #fff;
|
|
87
|
+
}
|
|
88
|
+
.c-button--info {
|
|
89
|
+
background: #909399;
|
|
90
|
+
border-color: #909399;
|
|
91
|
+
color: #fff;
|
|
92
|
+
}
|
|
93
|
+
.c-button--info.c-button--plain {
|
|
94
|
+
background: #f4f4f5;
|
|
95
|
+
border: 1px solid #909399;
|
|
96
|
+
color: #909399;
|
|
97
|
+
}
|
|
98
|
+
.c-button--info.c-button--plain:not(.c-button--disabled):hover {
|
|
99
|
+
background: #909399;
|
|
100
|
+
border-color: #909399;
|
|
101
|
+
color: #fff;
|
|
102
|
+
}
|
|
103
|
+
.c-button--danger {
|
|
104
|
+
background: #f56c6c;
|
|
105
|
+
border-color: #f56c6c;
|
|
106
|
+
color: #fff;
|
|
107
|
+
}
|
|
108
|
+
.c-button--danger.c-button--plain {
|
|
109
|
+
background: #fef0f0;
|
|
110
|
+
border: 1px solid #f56c6c;
|
|
111
|
+
color: #f56c6c;
|
|
112
|
+
}
|
|
113
|
+
.c-button--danger.c-button--plain:not(.c-button--disabled):hover {
|
|
114
|
+
background: #f56c6c;
|
|
115
|
+
border-color: #f56c6c;
|
|
116
|
+
color: #fff;
|
|
117
|
+
}
|
|
118
|
+
.c-button--small {
|
|
119
|
+
padding: 2px 7px;
|
|
120
|
+
font-size: 12px;
|
|
121
|
+
}
|
|
122
|
+
.c-button--large {
|
|
123
|
+
padding: 8px 19px;
|
|
124
|
+
font-size: 14px;
|
|
20
125
|
}
|
package/dist/styles/button.scss
CHANGED
|
@@ -2,24 +2,169 @@
|
|
|
2
2
|
|
|
3
3
|
.#{$namespace}-button {
|
|
4
4
|
display: inline-block;
|
|
5
|
-
padding:
|
|
6
|
-
outline: unset;
|
|
7
|
-
border: unset;
|
|
5
|
+
padding: 5px 15px;
|
|
8
6
|
border-radius: 4px;
|
|
9
7
|
background: #fff;
|
|
8
|
+
outline: none;
|
|
9
|
+
color: #606266;
|
|
10
|
+
font-size: 14px;
|
|
11
|
+
border: 1px solid #dcdfe6;
|
|
10
12
|
cursor: pointer;
|
|
13
|
+
user-select: none;
|
|
11
14
|
|
|
12
|
-
|
|
13
|
-
|
|
15
|
+
& ~ & {
|
|
16
|
+
margin-left: 8px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&:not(&--primary, &--danger, &--warning, &--info, &--success, &--plain, &--disabled) {
|
|
20
|
+
&:hover {
|
|
21
|
+
border-color: #57abff;
|
|
22
|
+
background: #ecf5ff;
|
|
23
|
+
color: #409eff;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&--primary, &--danger, &--warning, &--info, &--success {
|
|
28
|
+
&:not(.#{$namespace}-button--disabled) {
|
|
29
|
+
&:hover {
|
|
30
|
+
opacity: 0.8;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&:active:not(&--disabled) {
|
|
36
|
+
transform: scale(0.95);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&--disabled {
|
|
40
|
+
opacity: 0.5;
|
|
41
|
+
cursor: not-allowed;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&--round {
|
|
45
|
+
border-radius: 20px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&--plain {
|
|
49
|
+
background: #fff;
|
|
50
|
+
border: 1px solid #dcdfe6;
|
|
51
|
+
color: #606266;
|
|
52
|
+
|
|
53
|
+
&:not(.#{$namespace}-button--disabled) {
|
|
54
|
+
&:hover {
|
|
55
|
+
border-color: #409eff;
|
|
56
|
+
color: #409eff;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
14
59
|
}
|
|
15
60
|
|
|
16
61
|
&--primary {
|
|
17
62
|
background: #409eff;
|
|
63
|
+
border-color: #409eff;
|
|
18
64
|
color: #fff;
|
|
65
|
+
|
|
66
|
+
&.#{$namespace}-button--plain {
|
|
67
|
+
background: #ecf5ff;
|
|
68
|
+
border: 1px solid #409eff;
|
|
69
|
+
color: #409eff;
|
|
70
|
+
|
|
71
|
+
&:not(.#{$namespace}-button--disabled) {
|
|
72
|
+
&:hover {
|
|
73
|
+
background: #409eff;
|
|
74
|
+
border-color: #409eff;
|
|
75
|
+
color: #fff;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
19
79
|
}
|
|
20
80
|
|
|
21
|
-
&--
|
|
22
|
-
|
|
23
|
-
|
|
81
|
+
&--success {
|
|
82
|
+
background: #70c646;
|
|
83
|
+
border-color: #70c646;
|
|
84
|
+
color: #fff;
|
|
85
|
+
|
|
86
|
+
&.#{$namespace}-button--plain {
|
|
87
|
+
background: #f0f9eb;
|
|
88
|
+
border: 1px solid #70c646;
|
|
89
|
+
color: #70c646;
|
|
90
|
+
|
|
91
|
+
&:not(.#{$namespace}-button--disabled) {
|
|
92
|
+
&:hover {
|
|
93
|
+
background: #70c646;
|
|
94
|
+
border-color: #70c646;
|
|
95
|
+
color: #fff;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&--warning {
|
|
102
|
+
background: #e6a23c;
|
|
103
|
+
border-color: #e6a23c;
|
|
104
|
+
color: #fff;
|
|
105
|
+
|
|
106
|
+
&.#{$namespace}-button--plain {
|
|
107
|
+
background: #fdf6ec;
|
|
108
|
+
border: 1px solid #e6a23c;
|
|
109
|
+
color: #e6a23c;
|
|
110
|
+
|
|
111
|
+
&:not(.#{$namespace}-button--disabled) {
|
|
112
|
+
&:hover {
|
|
113
|
+
background: #e6a23c;
|
|
114
|
+
border-color: #e6a23c;
|
|
115
|
+
color: #fff;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&--info {
|
|
122
|
+
background: #909399;
|
|
123
|
+
border-color: #909399;
|
|
124
|
+
color: #fff;
|
|
125
|
+
|
|
126
|
+
&.#{$namespace}-button--plain {
|
|
127
|
+
background: #f4f4f5;
|
|
128
|
+
border: 1px solid #909399;
|
|
129
|
+
color: #909399;
|
|
130
|
+
|
|
131
|
+
&:not(.#{$namespace}-button--disabled) {
|
|
132
|
+
&:hover {
|
|
133
|
+
background: #909399;
|
|
134
|
+
border-color: #909399;
|
|
135
|
+
color: #fff;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&--danger {
|
|
142
|
+
background: #f56c6c;
|
|
143
|
+
border-color: #f56c6c;
|
|
144
|
+
color: #fff;
|
|
145
|
+
|
|
146
|
+
&.#{$namespace}-button--plain {
|
|
147
|
+
background: #fef0f0;
|
|
148
|
+
border: 1px solid #f56c6c;
|
|
149
|
+
color: #f56c6c;
|
|
150
|
+
|
|
151
|
+
&:not(.#{$namespace}-button--disabled) {
|
|
152
|
+
&:hover {
|
|
153
|
+
background: #f56c6c;
|
|
154
|
+
border-color: #f56c6c;
|
|
155
|
+
color: #fff;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&--small {
|
|
162
|
+
padding: 2px 7px;
|
|
163
|
+
font-size: 12px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
&--large {
|
|
167
|
+
padding: 8px 19px;
|
|
168
|
+
font-size: 14px;
|
|
24
169
|
}
|
|
25
170
|
}
|
package/dist/styles/index.css
CHANGED
|
@@ -1,20 +1,125 @@
|
|
|
1
1
|
.c-button {
|
|
2
2
|
display: inline-block;
|
|
3
|
-
padding:
|
|
4
|
-
outline: unset;
|
|
5
|
-
border: unset;
|
|
3
|
+
padding: 5px 15px;
|
|
6
4
|
border-radius: 4px;
|
|
7
5
|
background: #fff;
|
|
6
|
+
outline: none;
|
|
7
|
+
color: #606266;
|
|
8
|
+
font-size: 14px;
|
|
9
|
+
border: 1px solid #dcdfe6;
|
|
8
10
|
cursor: pointer;
|
|
11
|
+
user-select: none;
|
|
9
12
|
}
|
|
10
|
-
.c-button
|
|
11
|
-
|
|
13
|
+
.c-button ~ .c-button {
|
|
14
|
+
margin-left: 8px;
|
|
15
|
+
}
|
|
16
|
+
.c-button:not(.c-button--primary, .c-button--danger, .c-button--warning, .c-button--info, .c-button--success, .c-button--plain, .c-button--disabled):hover {
|
|
17
|
+
border-color: #57abff;
|
|
18
|
+
background: #ecf5ff;
|
|
19
|
+
color: #409eff;
|
|
20
|
+
}
|
|
21
|
+
.c-button--primary:not(.c-button--disabled):hover, .c-button--danger:not(.c-button--disabled):hover, .c-button--warning:not(.c-button--disabled):hover, .c-button--info:not(.c-button--disabled):hover, .c-button--success:not(.c-button--disabled):hover {
|
|
22
|
+
opacity: 0.8;
|
|
23
|
+
}
|
|
24
|
+
.c-button:active:not(.c-button--disabled) {
|
|
25
|
+
transform: scale(0.95);
|
|
26
|
+
}
|
|
27
|
+
.c-button--disabled {
|
|
28
|
+
opacity: 0.5;
|
|
29
|
+
cursor: not-allowed;
|
|
30
|
+
}
|
|
31
|
+
.c-button--round {
|
|
32
|
+
border-radius: 20px;
|
|
33
|
+
}
|
|
34
|
+
.c-button--plain {
|
|
35
|
+
background: #fff;
|
|
36
|
+
border: 1px solid #dcdfe6;
|
|
37
|
+
color: #606266;
|
|
38
|
+
}
|
|
39
|
+
.c-button--plain:not(.c-button--disabled):hover {
|
|
40
|
+
border-color: #409eff;
|
|
41
|
+
color: #409eff;
|
|
12
42
|
}
|
|
13
43
|
.c-button--primary {
|
|
14
44
|
background: #409eff;
|
|
45
|
+
border-color: #409eff;
|
|
15
46
|
color: #fff;
|
|
16
47
|
}
|
|
17
|
-
.c-button--
|
|
18
|
-
|
|
19
|
-
|
|
48
|
+
.c-button--primary.c-button--plain {
|
|
49
|
+
background: #ecf5ff;
|
|
50
|
+
border: 1px solid #409eff;
|
|
51
|
+
color: #409eff;
|
|
52
|
+
}
|
|
53
|
+
.c-button--primary.c-button--plain:not(.c-button--disabled):hover {
|
|
54
|
+
background: #409eff;
|
|
55
|
+
border-color: #409eff;
|
|
56
|
+
color: #fff;
|
|
57
|
+
}
|
|
58
|
+
.c-button--success {
|
|
59
|
+
background: #70c646;
|
|
60
|
+
border-color: #70c646;
|
|
61
|
+
color: #fff;
|
|
62
|
+
}
|
|
63
|
+
.c-button--success.c-button--plain {
|
|
64
|
+
background: #f0f9eb;
|
|
65
|
+
border: 1px solid #70c646;
|
|
66
|
+
color: #70c646;
|
|
67
|
+
}
|
|
68
|
+
.c-button--success.c-button--plain:not(.c-button--disabled):hover {
|
|
69
|
+
background: #70c646;
|
|
70
|
+
border-color: #70c646;
|
|
71
|
+
color: #fff;
|
|
72
|
+
}
|
|
73
|
+
.c-button--warning {
|
|
74
|
+
background: #e6a23c;
|
|
75
|
+
border-color: #e6a23c;
|
|
76
|
+
color: #fff;
|
|
77
|
+
}
|
|
78
|
+
.c-button--warning.c-button--plain {
|
|
79
|
+
background: #fdf6ec;
|
|
80
|
+
border: 1px solid #e6a23c;
|
|
81
|
+
color: #e6a23c;
|
|
82
|
+
}
|
|
83
|
+
.c-button--warning.c-button--plain:not(.c-button--disabled):hover {
|
|
84
|
+
background: #e6a23c;
|
|
85
|
+
border-color: #e6a23c;
|
|
86
|
+
color: #fff;
|
|
87
|
+
}
|
|
88
|
+
.c-button--info {
|
|
89
|
+
background: #909399;
|
|
90
|
+
border-color: #909399;
|
|
91
|
+
color: #fff;
|
|
92
|
+
}
|
|
93
|
+
.c-button--info.c-button--plain {
|
|
94
|
+
background: #f4f4f5;
|
|
95
|
+
border: 1px solid #909399;
|
|
96
|
+
color: #909399;
|
|
97
|
+
}
|
|
98
|
+
.c-button--info.c-button--plain:not(.c-button--disabled):hover {
|
|
99
|
+
background: #909399;
|
|
100
|
+
border-color: #909399;
|
|
101
|
+
color: #fff;
|
|
102
|
+
}
|
|
103
|
+
.c-button--danger {
|
|
104
|
+
background: #f56c6c;
|
|
105
|
+
border-color: #f56c6c;
|
|
106
|
+
color: #fff;
|
|
107
|
+
}
|
|
108
|
+
.c-button--danger.c-button--plain {
|
|
109
|
+
background: #fef0f0;
|
|
110
|
+
border: 1px solid #f56c6c;
|
|
111
|
+
color: #f56c6c;
|
|
112
|
+
}
|
|
113
|
+
.c-button--danger.c-button--plain:not(.c-button--disabled):hover {
|
|
114
|
+
background: #f56c6c;
|
|
115
|
+
border-color: #f56c6c;
|
|
116
|
+
color: #fff;
|
|
117
|
+
}
|
|
118
|
+
.c-button--small {
|
|
119
|
+
padding: 2px 7px;
|
|
120
|
+
font-size: 12px;
|
|
121
|
+
}
|
|
122
|
+
.c-button--large {
|
|
123
|
+
padding: 8px 19px;
|
|
124
|
+
font-size: 14px;
|
|
20
125
|
}
|
package/dist/ui-components.mjs
CHANGED
|
@@ -1,96 +1,107 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var
|
|
2
|
-
import { ref as
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".c-button[data-v-2fe69762]{display:inline-block;padding:5px 15px;border-radius:4px;background:#fff;outline:none;color:#606266;font-size:14px;border:1px solid #dcdfe6;cursor:pointer;-webkit-user-select:none;user-select:none}.c-button~.c-button[data-v-2fe69762]{margin-left:8px}.c-button[data-v-2fe69762]:not(.c-button--primary,.c-button--danger,.c-button--warning,.c-button--info,.c-button--success,.c-button--plain,.c-button--disabled):hover{border-color:#57abff;background:#ecf5ff;color:#409eff}.c-button--primary[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--danger[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--warning[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--info[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--success[data-v-2fe69762]:not(.c-button--disabled):hover{opacity:.8}.c-button[data-v-2fe69762]:active:not(.c-button--disabled){transform:scale(.95)}.c-button--disabled[data-v-2fe69762]{opacity:.5;cursor:not-allowed}.c-button--round[data-v-2fe69762]{border-radius:20px}.c-button--plain[data-v-2fe69762]{background:#fff;border:1px solid #dcdfe6;color:#606266}.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{border-color:#409eff;color:#409eff}.c-button--primary[data-v-2fe69762]{background:#409eff;border-color:#409eff;color:#fff}.c-button--primary.c-button--plain[data-v-2fe69762]{background:#ecf5ff;border:1px solid #409eff;color:#409eff}.c-button--primary.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#409eff;border-color:#409eff;color:#fff}.c-button--success[data-v-2fe69762]{background:#70c646;border-color:#70c646;color:#fff}.c-button--success.c-button--plain[data-v-2fe69762]{background:#f0f9eb;border:1px solid #70c646;color:#70c646}.c-button--success.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#70c646;border-color:#70c646;color:#fff}.c-button--warning[data-v-2fe69762]{background:#e6a23c;border-color:#e6a23c;color:#fff}.c-button--warning.c-button--plain[data-v-2fe69762]{background:#fdf6ec;border:1px solid #e6a23c;color:#e6a23c}.c-button--warning.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#e6a23c;border-color:#e6a23c;color:#fff}.c-button--info[data-v-2fe69762]{background:#909399;border-color:#909399;color:#fff}.c-button--info.c-button--plain[data-v-2fe69762]{background:#f4f4f5;border:1px solid #909399;color:#909399}.c-button--info.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#909399;border-color:#909399;color:#fff}.c-button--danger[data-v-2fe69762]{background:#f56c6c;border-color:#f56c6c;color:#fff}.c-button--danger.c-button--plain[data-v-2fe69762]{background:#fef0f0;border:1px solid #f56c6c;color:#f56c6c}.c-button--danger.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#f56c6c;border-color:#f56c6c;color:#fff}.c-button--small[data-v-2fe69762]{padding:2px 7px;font-size:12px}.c-button--large[data-v-2fe69762]{padding:8px 19px;font-size:14px}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
import { ref as l, getCurrentInstance as u, computed as p, unref as s, provide as C, inject as v, defineComponent as d, createElementBlock as y, openBlock as B, normalizeClass as S, renderSlot as f, watch as h } from "vue";
|
|
3
3
|
function m(e) {
|
|
4
|
-
return e.install = (
|
|
5
|
-
const
|
|
6
|
-
|
|
4
|
+
return e.install = (n) => {
|
|
5
|
+
const t = e.name || "UnknownComponent";
|
|
6
|
+
n.component(t, e);
|
|
7
7
|
}, e;
|
|
8
8
|
}
|
|
9
|
-
const
|
|
9
|
+
const b = Symbol("c"), r = "c", i = l({
|
|
10
10
|
namespace: "c"
|
|
11
11
|
});
|
|
12
|
-
function
|
|
13
|
-
const
|
|
14
|
-
return
|
|
12
|
+
function k(e, n = void 0) {
|
|
13
|
+
const t = u() ? v(b, i) : i;
|
|
14
|
+
return p(() => {
|
|
15
15
|
var o;
|
|
16
|
-
return ((o =
|
|
16
|
+
return ((o = t.value) == null ? void 0 : o[e]) ?? n;
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
|
-
function $(e,
|
|
20
|
-
const o = !!
|
|
19
|
+
function $(e, n) {
|
|
20
|
+
const o = !!u() ? C : void 0;
|
|
21
21
|
if (!o) {
|
|
22
22
|
console.warn("provideGlobalConfig", "provideGlobalConfig() can only be used inside setup().");
|
|
23
23
|
return;
|
|
24
24
|
}
|
|
25
|
-
const c =
|
|
26
|
-
return o(
|
|
25
|
+
const c = p(() => s(e));
|
|
26
|
+
return o(b, c), c;
|
|
27
27
|
}
|
|
28
|
-
function
|
|
29
|
-
return `${
|
|
28
|
+
function a(e) {
|
|
29
|
+
return `${k("namespace", r).value}-${e}`;
|
|
30
30
|
}
|
|
31
|
-
const
|
|
31
|
+
const g = {
|
|
32
32
|
type: {
|
|
33
33
|
type: String,
|
|
34
|
-
default: "
|
|
34
|
+
default: ""
|
|
35
35
|
},
|
|
36
|
-
size: String
|
|
37
|
-
|
|
36
|
+
size: String,
|
|
37
|
+
disabled: Boolean,
|
|
38
|
+
plain: Boolean,
|
|
39
|
+
round: Boolean
|
|
40
|
+
}, x = ["disabled"], z = /* @__PURE__ */ d({
|
|
38
41
|
name: "CButton",
|
|
39
42
|
__name: "button",
|
|
40
|
-
props:
|
|
43
|
+
props: g,
|
|
41
44
|
setup(e) {
|
|
42
|
-
const
|
|
43
|
-
function
|
|
45
|
+
const n = e;
|
|
46
|
+
function t() {
|
|
44
47
|
console.log("click");
|
|
45
48
|
}
|
|
46
|
-
return (o, c) => (
|
|
47
|
-
class:
|
|
48
|
-
|
|
49
|
+
return (o, c) => (B(), y("button", {
|
|
50
|
+
class: S([
|
|
51
|
+
s(a)("button"),
|
|
52
|
+
n.type && s(a)(`button--${n.type}`),
|
|
53
|
+
n.size && s(a)(`button--${n.size}`),
|
|
54
|
+
n.disabled && s(a)("button--disabled"),
|
|
55
|
+
n.plain && s(a)("button--plain"),
|
|
56
|
+
n.round && s(a)("button--round")
|
|
57
|
+
]),
|
|
58
|
+
disabled: n.disabled,
|
|
59
|
+
onClick: t
|
|
49
60
|
}, [
|
|
50
|
-
|
|
51
|
-
],
|
|
61
|
+
f(o.$slots, "default", {}, void 0, !0)
|
|
62
|
+
], 10, x));
|
|
52
63
|
}
|
|
53
|
-
}), P = (e,
|
|
54
|
-
const
|
|
55
|
-
for (const [o, c] of
|
|
56
|
-
|
|
57
|
-
return
|
|
58
|
-
}, j = /* @__PURE__ */ P(
|
|
64
|
+
}), P = (e, n) => {
|
|
65
|
+
const t = e.__vccOpts || e;
|
|
66
|
+
for (const [o, c] of n)
|
|
67
|
+
t[o] = c;
|
|
68
|
+
return t;
|
|
69
|
+
}, j = /* @__PURE__ */ P(z, [["__scopeId", "data-v-2fe69762"]]), w = m(j), G = /* @__PURE__ */ d({
|
|
59
70
|
name: "CConfigProvider",
|
|
60
71
|
__name: "index",
|
|
61
72
|
props: {
|
|
62
73
|
namespace: { default: r }
|
|
63
74
|
},
|
|
64
75
|
setup(e) {
|
|
65
|
-
const
|
|
76
|
+
const n = e, t = l({
|
|
66
77
|
namespace: r
|
|
67
|
-
}), o = $(
|
|
78
|
+
}), o = $(t);
|
|
68
79
|
return h(
|
|
69
|
-
() =>
|
|
80
|
+
() => n,
|
|
70
81
|
(c) => {
|
|
71
|
-
|
|
82
|
+
t.value.namespace = c == null ? void 0 : c.namespace;
|
|
72
83
|
},
|
|
73
84
|
{
|
|
74
85
|
immediate: !0,
|
|
75
86
|
deep: !0
|
|
76
87
|
}
|
|
77
|
-
), (c,
|
|
88
|
+
), (c, _) => f(c.$slots, "default", { config: s(o) });
|
|
78
89
|
}
|
|
79
|
-
}), O = m(G),
|
|
90
|
+
}), O = m(G), I = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
80
91
|
__proto__: null,
|
|
81
92
|
CButton: w,
|
|
82
93
|
CConfigProvider: O,
|
|
83
|
-
buttonProps:
|
|
84
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
94
|
+
buttonProps: g
|
|
95
|
+
}, Symbol.toStringTag, { value: "Module" })), N = {
|
|
85
96
|
install(e) {
|
|
86
|
-
Object.entries(
|
|
87
|
-
e.component(
|
|
97
|
+
Object.entries(I).forEach(([n, t]) => {
|
|
98
|
+
e.component(n, t);
|
|
88
99
|
});
|
|
89
100
|
}
|
|
90
101
|
};
|
|
91
102
|
export {
|
|
92
103
|
w as CButton,
|
|
93
104
|
O as CConfigProvider,
|
|
94
|
-
|
|
95
|
-
|
|
105
|
+
g as buttonProps,
|
|
106
|
+
N as default
|
|
96
107
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var
|
|
2
|
-
(function(
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode(".c-button[data-v-2fe69762]{display:inline-block;padding:5px 15px;border-radius:4px;background:#fff;outline:none;color:#606266;font-size:14px;border:1px solid #dcdfe6;cursor:pointer;-webkit-user-select:none;user-select:none}.c-button~.c-button[data-v-2fe69762]{margin-left:8px}.c-button[data-v-2fe69762]:not(.c-button--primary,.c-button--danger,.c-button--warning,.c-button--info,.c-button--success,.c-button--plain,.c-button--disabled):hover{border-color:#57abff;background:#ecf5ff;color:#409eff}.c-button--primary[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--danger[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--warning[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--info[data-v-2fe69762]:not(.c-button--disabled):hover,.c-button--success[data-v-2fe69762]:not(.c-button--disabled):hover{opacity:.8}.c-button[data-v-2fe69762]:active:not(.c-button--disabled){transform:scale(.95)}.c-button--disabled[data-v-2fe69762]{opacity:.5;cursor:not-allowed}.c-button--round[data-v-2fe69762]{border-radius:20px}.c-button--plain[data-v-2fe69762]{background:#fff;border:1px solid #dcdfe6;color:#606266}.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{border-color:#409eff;color:#409eff}.c-button--primary[data-v-2fe69762]{background:#409eff;border-color:#409eff;color:#fff}.c-button--primary.c-button--plain[data-v-2fe69762]{background:#ecf5ff;border:1px solid #409eff;color:#409eff}.c-button--primary.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#409eff;border-color:#409eff;color:#fff}.c-button--success[data-v-2fe69762]{background:#70c646;border-color:#70c646;color:#fff}.c-button--success.c-button--plain[data-v-2fe69762]{background:#f0f9eb;border:1px solid #70c646;color:#70c646}.c-button--success.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#70c646;border-color:#70c646;color:#fff}.c-button--warning[data-v-2fe69762]{background:#e6a23c;border-color:#e6a23c;color:#fff}.c-button--warning.c-button--plain[data-v-2fe69762]{background:#fdf6ec;border:1px solid #e6a23c;color:#e6a23c}.c-button--warning.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#e6a23c;border-color:#e6a23c;color:#fff}.c-button--info[data-v-2fe69762]{background:#909399;border-color:#909399;color:#fff}.c-button--info.c-button--plain[data-v-2fe69762]{background:#f4f4f5;border:1px solid #909399;color:#909399}.c-button--info.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#909399;border-color:#909399;color:#fff}.c-button--danger[data-v-2fe69762]{background:#f56c6c;border-color:#f56c6c;color:#fff}.c-button--danger.c-button--plain[data-v-2fe69762]{background:#fef0f0;border:1px solid #f56c6c;color:#f56c6c}.c-button--danger.c-button--plain[data-v-2fe69762]:not(.c-button--disabled):hover{background:#f56c6c;border-color:#f56c6c;color:#fff}.c-button--small[data-v-2fe69762]{padding:2px 7px;font-size:12px}.c-button--large[data-v-2fe69762]{padding:8px 19px;font-size:14px}")),document.head.appendChild(o)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
(function(i,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(i=typeof globalThis<"u"?globalThis:i||self,n(i["can-lib"]={},i.Vue))})(this,(function(i,n){"use strict";function d(t){return t.install=e=>{const o=t.name||"UnknownComponent";e.component(o,t)},t}const f=Symbol("c"),a="c",u=n.ref({namespace:"c"});function b(t,e=void 0){const o=n.getCurrentInstance()?n.inject(f,u):u;return n.computed(()=>{var s;return((s=o.value)==null?void 0:s[t])??e})}function _(t,e){const s=!!n.getCurrentInstance()?n.provide:void 0;if(!s){console.warn("provideGlobalConfig","provideGlobalConfig() can only be used inside setup().");return}const c=n.computed(()=>n.unref(t));return s(f,c),c}function r(t){return`${b("namespace",a).value}-${t}`}const l={type:{type:String,default:""},size:String,disabled:Boolean,plain:Boolean,round:Boolean},g=["disabled"],p=d(((t,e)=>{const o=t.__vccOpts||t;for(const[s,c]of e)o[s]=c;return o})(n.defineComponent({name:"CButton",__name:"button",props:l,setup(t){const e=t;function o(){console.log("click")}return(s,c)=>(n.openBlock(),n.createElementBlock("button",{class:n.normalizeClass([n.unref(r)("button"),e.type&&n.unref(r)(`button--${e.type}`),e.size&&n.unref(r)(`button--${e.size}`),e.disabled&&n.unref(r)("button--disabled"),e.plain&&n.unref(r)("button--plain"),e.round&&n.unref(r)("button--round")]),disabled:e.disabled,onClick:o},[n.renderSlot(s.$slots,"default",{},void 0,!0)],10,g))}}),[["__scopeId","data-v-2fe69762"]])),m=d(n.defineComponent({name:"CConfigProvider",__name:"index",props:{namespace:{default:a}},setup(t){const e=t,o=n.ref({namespace:a}),s=_(o);return n.watch(()=>e,c=>{o.value.namespace=c==null?void 0:c.namespace},{immediate:!0,deep:!0}),(c,S)=>n.renderSlot(c.$slots,"default",{config:n.unref(s)})}})),C=Object.freeze(Object.defineProperty({__proto__:null,CButton:p,CConfigProvider:m,buttonProps:l},Symbol.toStringTag,{value:"Module"})),y={install(t){Object.entries(C).forEach(([e,o])=>{t.component(e,o)})}};i.CButton=p,i.CConfigProvider=m,i.buttonProps=l,i.default=y,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|