@alauda/ui 6.4.2 → 6.4.3-beta.1

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.
Files changed (10) hide show
  1. package/esm2020/input/search/search.component.mjs +11 -4
  2. package/fesm2015/alauda-ui.mjs +9 -2
  3. package/fesm2015/alauda-ui.mjs.map +1 -1
  4. package/fesm2020/alauda-ui.mjs +9 -2
  5. package/fesm2020/alauda-ui.mjs.map +1 -1
  6. package/input/search/search.component.d.ts +3 -1
  7. package/package.json +1 -1
  8. package/theme/_mixin.scss +50 -20
  9. package/theme/_theme-preset.scss +20 -0
  10. package/theme/style.css +36 -9
package/input/search/search.component.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { EventEmitter } from '@angular/core';
1
+ import { ElementRef, EventEmitter } from '@angular/core';
2
2
  import { ComponentSize } from '../../types';
3
3
  import { Bem } from '../../utils';
4
4
  import * as i0 from "@angular/core";
@@ -15,9 +15,11 @@ export declare class SearchComponent {
15
15
  keywordChange: EventEmitter<string>;
16
16
  search: EventEmitter<string>;
17
17
  clear: EventEmitter<void>;
18
+ inputRef: ElementRef<HTMLInputElement>;
18
19
  value: string;
19
20
  get showSpinner(): boolean;
20
21
  get showClear(): boolean;
22
+ focus(): void;
21
23
  emitChange(value: string): void;
22
24
  emitSearch(): void;
23
25
  emitClear(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alauda/ui",
3
- "version": "6.4.2",
3
+ "version": "6.4.3-beta.1",
4
4
  "description": "Angular UI components by Alauda Frontend Team.",
5
5
  "repository": "git+https://github.com/alauda/alauda-ui.git",
6
6
  "author": "Alauda Frontend",
package/theme/_mixin.scss CHANGED
@@ -58,48 +58,78 @@
58
58
  }
59
59
 
60
60
  // 使用 box-shadow 模拟带圆角的 outline
61
- @mixin outline-shadow($color: primary) {
62
- @include theme-light {
61
+ @mixin outline-shadow($color: primary, $theme: auto) {
62
+ @if ($theme == light) {
63
63
  box-shadow: 0 0 0 2px use-rgba($color, 0.16);
64
- }
65
- @include theme-dark {
64
+ } @else if($theme == dark) {
66
65
  box-shadow: 0 0 0 2px use-rgba($color, 0.3);
66
+ } @else {
67
+ @include theme-light {
68
+ box-shadow: 0 0 0 2px use-rgba($color, 0.16);
69
+ }
70
+ @include theme-dark {
71
+ box-shadow: 0 0 0 2px use-rgba($color, 0.3);
72
+ }
67
73
  }
68
74
  }
69
75
 
70
- @mixin card-shadow() {
71
- @include theme-light {
76
+ @mixin card-shadow($theme: auto) {
77
+ @if ($theme == light) {
72
78
  box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.1);
73
- }
74
- @include theme-dark {
79
+ } @else if($theme == dark) {
75
80
  box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.75);
81
+ } @else {
82
+ @include theme-light {
83
+ box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.1);
84
+ }
85
+ @include theme-dark {
86
+ box-shadow: 0 0 4px 0 use-rgba(origin-shadow, 0.75);
87
+ }
76
88
  }
77
89
  }
78
90
 
79
- @mixin popper-shadow() {
80
- @include theme-light {
91
+ @mixin popper-shadow($theme: auto) {
92
+ @if ($theme == light) {
81
93
  box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
82
- }
83
- @include theme-dark {
94
+ } @else if($theme == dark) {
84
95
  box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.75);
96
+ } @else {
97
+ @include theme-light {
98
+ box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
99
+ }
100
+ @include theme-dark {
101
+ box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.75);
102
+ }
85
103
  }
86
104
  }
87
105
 
88
- @mixin modal-shadow() {
89
- @include theme-light {
106
+ @mixin modal-shadow($theme: auto) {
107
+ @if ($theme == light) {
90
108
  box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
91
- }
92
- @include theme-dark {
109
+ } @else if($theme == dark) {
93
110
  box-shadow: 0 4px 16px 0 use-rgba(origin-shadow, 0.75);
111
+ } @else {
112
+ @include theme-light {
113
+ box-shadow: 0 2px 8px 0 use-rgba(origin-shadow, 0.2);
114
+ }
115
+ @include theme-dark {
116
+ box-shadow: 0 4px 16px 0 use-rgba(origin-shadow, 0.75);
117
+ }
94
118
  }
95
119
  }
96
120
 
97
- @mixin modal-backdrop() {
98
- @include theme-light {
121
+ @mixin modal-backdrop($theme: auto) {
122
+ @if ($theme == light) {
99
123
  background-color: use-rgba(origin-shadow, 0.4);
100
- }
101
- @include theme-dark {
124
+ } @else if($theme == dark) {
102
125
  background-color: use-rgba(origin-shadow, 0.75);
126
+ } @else {
127
+ @include theme-light {
128
+ background-color: use-rgba(origin-shadow, 0.4);
129
+ }
130
+ @include theme-dark {
131
+ background-color: use-rgba(origin-shadow, 0.75);
132
+ }
103
133
  }
104
134
  }
105
135
 
package/theme/_theme-preset.scss CHANGED
@@ -49,6 +49,7 @@
49
49
  }
50
50
 
51
51
  @mixin light-mode {
52
+ color-scheme: light;
52
53
  --aui-color-blue: #{rgb-string(#007af5)};
53
54
  --aui-color-b-0: #{rgb-string(#0067d0)};
54
55
  --aui-color-b-1: #{rgb-string(#268df6)};
@@ -58,6 +59,15 @@
58
59
  --aui-color-b-5: #{rgb-string(#cce4fd)};
59
60
  --aui-color-b-6: #{rgb-string(#e5f1fe)};
60
61
  --aui-color-b-7: #{rgb-string(#f2f8fe)};
62
+ --aui-color-primary: var(--aui-color-blue);
63
+ --aui-color-p-0: var(--aui-color-b-0);
64
+ --aui-color-p-1: var(--aui-color-b-1);
65
+ --aui-color-p-2: var(--aui-color-b-2);
66
+ --aui-color-p-3: var(--aui-color-b-3);
67
+ --aui-color-p-4: var(--aui-color-b-4);
68
+ --aui-color-p-5: var(--aui-color-b-5);
69
+ --aui-color-p-6: var(--aui-color-b-6);
70
+ --aui-color-p-7: var(--aui-color-b-7);
61
71
  --aui-color-green: #{rgb-string(#00c261)};
62
72
  --aui-color-g-0: #{rgb-string(#00a552)};
63
73
  --aui-color-g-1: #{rgb-string(#26cb78)};
@@ -103,6 +113,7 @@
103
113
  }
104
114
 
105
115
  @mixin dark-mode {
116
+ color-scheme: dark;
106
117
  --aui-color-blue: #{rgb-string(#3d8eff)};
107
118
  --aui-color-b-0: #{rgb-string(#3674cc)};
108
119
  --aui-color-b-1: #{rgb-string(#6daaff)};
@@ -112,6 +123,15 @@
112
123
  --aui-color-b-5: #{rgb-string(#283651)};
113
124
  --aui-color-b-6: #{rgb-string(#2a4066)};
114
125
  --aui-color-b-7: #{rgb-string(#2c4a7a)};
126
+ --aui-color-primary: var(--aui-color-blue);
127
+ --aui-color-p-0: var(--aui-color-b-0);
128
+ --aui-color-p-1: var(--aui-color-b-1);
129
+ --aui-color-p-2: var(--aui-color-b-2);
130
+ --aui-color-p-3: var(--aui-color-b-3);
131
+ --aui-color-p-4: var(--aui-color-b-4);
132
+ --aui-color-p-5: var(--aui-color-b-5);
133
+ --aui-color-p-6: var(--aui-color-b-6);
134
+ --aui-color-p-7: var(--aui-color-b-7);
115
135
  --aui-color-green: #{rgb-string(#11b671)};
116
136
  --aui-color-g-0: #{rgb-string(#159261)};
117
137
  --aui-color-g-1: #{rgb-string(#4cc894)};
package/theme/style.css CHANGED
@@ -9,6 +9,15 @@
9
9
  --aui-color-b-5: 204, 228, 253;
10
10
  --aui-color-b-6: 229, 241, 254;
11
11
  --aui-color-b-7: 242, 248, 254;
12
+ --aui-color-primary: var(--aui-color-blue);
13
+ --aui-color-p-0: var(--aui-color-b-0);
14
+ --aui-color-p-1: var(--aui-color-b-1);
15
+ --aui-color-p-2: var(--aui-color-b-2);
16
+ --aui-color-p-3: var(--aui-color-b-3);
17
+ --aui-color-p-4: var(--aui-color-b-4);
18
+ --aui-color-p-5: var(--aui-color-b-5);
19
+ --aui-color-p-6: var(--aui-color-b-6);
20
+ --aui-color-p-7: var(--aui-color-b-7);
12
21
  --aui-color-green: 0, 194, 97;
13
22
  --aui-color-g-0: 0, 165, 82;
14
23
  --aui-color-g-1: 38, 203, 120;
@@ -64,6 +73,15 @@ html[aui-theme-mode=light] {
64
73
  --aui-color-b-5: 204, 228, 253;
65
74
  --aui-color-b-6: 229, 241, 254;
66
75
  --aui-color-b-7: 242, 248, 254;
76
+ --aui-color-primary: var(--aui-color-blue);
77
+ --aui-color-p-0: var(--aui-color-b-0);
78
+ --aui-color-p-1: var(--aui-color-b-1);
79
+ --aui-color-p-2: var(--aui-color-b-2);
80
+ --aui-color-p-3: var(--aui-color-b-3);
81
+ --aui-color-p-4: var(--aui-color-b-4);
82
+ --aui-color-p-5: var(--aui-color-b-5);
83
+ --aui-color-p-6: var(--aui-color-b-6);
84
+ --aui-color-p-7: var(--aui-color-b-7);
67
85
  --aui-color-green: 0, 194, 97;
68
86
  --aui-color-g-0: 0, 165, 82;
69
87
  --aui-color-g-1: 38, 203, 120;
@@ -120,6 +138,15 @@ html[aui-theme-mode=light] {
120
138
  --aui-color-b-5: 40, 54, 81;
121
139
  --aui-color-b-6: 42, 64, 102;
122
140
  --aui-color-b-7: 44, 74, 122;
141
+ --aui-color-primary: var(--aui-color-blue);
142
+ --aui-color-p-0: var(--aui-color-b-0);
143
+ --aui-color-p-1: var(--aui-color-b-1);
144
+ --aui-color-p-2: var(--aui-color-b-2);
145
+ --aui-color-p-3: var(--aui-color-b-3);
146
+ --aui-color-p-4: var(--aui-color-b-4);
147
+ --aui-color-p-5: var(--aui-color-b-5);
148
+ --aui-color-p-6: var(--aui-color-b-6);
149
+ --aui-color-p-7: var(--aui-color-b-7);
123
150
  --aui-color-green: 17, 182, 113;
124
151
  --aui-color-g-0: 21, 146, 97;
125
152
  --aui-color-g-1: 76, 200, 148;
@@ -175,6 +202,15 @@ html[aui-theme-mode=dark] {
175
202
  --aui-color-b-5: 40, 54, 81;
176
203
  --aui-color-b-6: 42, 64, 102;
177
204
  --aui-color-b-7: 44, 74, 122;
205
+ --aui-color-primary: var(--aui-color-blue);
206
+ --aui-color-p-0: var(--aui-color-b-0);
207
+ --aui-color-p-1: var(--aui-color-b-1);
208
+ --aui-color-p-2: var(--aui-color-b-2);
209
+ --aui-color-p-3: var(--aui-color-b-3);
210
+ --aui-color-p-4: var(--aui-color-b-4);
211
+ --aui-color-p-5: var(--aui-color-b-5);
212
+ --aui-color-p-6: var(--aui-color-b-6);
213
+ --aui-color-p-7: var(--aui-color-b-7);
178
214
  --aui-color-green: 17, 182, 113;
179
215
  --aui-color-g-0: 21, 146, 97;
180
216
  --aui-color-g-1: 76, 200, 148;
@@ -261,15 +297,6 @@ html[aui-theme-mode=dark] {
261
297
  --aui-form-item-width-l: 732px;
262
298
  --aui-form-item-width-m: 436px;
263
299
  --aui-form-item-width-s: 140px;
264
- --aui-color-primary: var(--aui-color-blue);
265
- --aui-color-p-0: var(--aui-color-b-0);
266
- --aui-color-p-1: var(--aui-color-b-1);
267
- --aui-color-p-2: var(--aui-color-b-2);
268
- --aui-color-p-3: var(--aui-color-b-3);
269
- --aui-color-p-4: var(--aui-color-b-4);
270
- --aui-color-p-5: var(--aui-color-b-5);
271
- --aui-color-p-6: var(--aui-color-b-6);
272
- --aui-color-p-7: var(--aui-color-b-7);
273
300
  }
274
301
 
275
302
  body {