@popsure/dirty-swan 0.25.2 → 0.26.3
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.css +716 -57
- package/dist/index.css.map +1 -1
- package/dist/index.js +12 -7
- package/dist/index.js.map +1 -1
- package/dist/lib/components/input/autoSuggestInput/index.d.ts +2 -1
- package/dist/lib/components/input/autoSuggestMultiSelect/index.d.ts +2 -1
- package/dist/lib/scss/private/base/_grid.scss +36 -0
- package/dist/lib/scss/private/base/_index.scss +1 -0
- package/dist/lib/scss/private/base/_spacing.scss +52 -20
- package/dist/lib/scss/private/base/flex/_flex.scss +63 -0
- package/dist/lib/scss/private/base/flex/style.module.scss +24 -0
- package/dist/lib/scss/private/components/_notices.scss +13 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Option } from '../../../models/autoSuggestInput';
|
|
3
|
-
declare const _default: ({ currentOption, suggestions, handleSuggestionSelected, onChange, handleSuggestionFetchRequest, handleSuggestionClearRequest, placeholder, className, }: {
|
|
3
|
+
declare const _default: ({ currentOption, suggestions, handleSuggestionSelected, onChange, handleSuggestionFetchRequest, handleSuggestionClearRequest, placeholder, className, wrapText, }: {
|
|
4
4
|
currentOption: string;
|
|
5
5
|
suggestions: Option[];
|
|
6
6
|
handleSuggestionSelected: (value: Option) => void;
|
|
@@ -9,5 +9,6 @@ declare const _default: ({ currentOption, suggestions, handleSuggestionSelected,
|
|
|
9
9
|
handleSuggestionClearRequest: () => void;
|
|
10
10
|
placeholder: string;
|
|
11
11
|
className?: string | undefined;
|
|
12
|
+
wrapText?: boolean | undefined;
|
|
12
13
|
}) => JSX.Element;
|
|
13
14
|
export default _default;
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Option } from '../../../models/autoSuggestInput';
|
|
3
|
-
declare const _default: ({ options, selectedValues, setValues, placeholder, chipsListClassName, multiSelectClassName, }: {
|
|
3
|
+
declare const _default: ({ options, selectedValues, setValues, placeholder, chipsListClassName, multiSelectClassName, wrapText, }: {
|
|
4
4
|
options: Option[];
|
|
5
5
|
selectedValues?: Option[] | undefined;
|
|
6
6
|
setValues: (values: Option[]) => void;
|
|
7
7
|
placeholder: string;
|
|
8
8
|
chipsListClassName?: string | undefined;
|
|
9
9
|
multiSelectClassName?: string | undefined;
|
|
10
|
+
wrapText?: boolean | undefined;
|
|
10
11
|
}) => JSX.Element;
|
|
11
12
|
export default _default;
|
|
@@ -14,3 +14,39 @@
|
|
|
14
14
|
margin: 0 auto;
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
+
|
|
18
|
+
// Taken from https://gist.github.com/Bamieh/912a6f0b63cbb53f3ad0bd8df7171c6a
|
|
19
|
+
@function remove-dot-from-class($class) {
|
|
20
|
+
$class-string: quote($class);
|
|
21
|
+
@return if(
|
|
22
|
+
str-slice($class-string, 0, 1) == '.',
|
|
23
|
+
str-slice($class-string, 2, str-length($class-string)),
|
|
24
|
+
$class-string
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@mixin add-responsive {
|
|
29
|
+
$selector: remove-dot-from-class(#{&});
|
|
30
|
+
@content;
|
|
31
|
+
|
|
32
|
+
// We need to use @at-root to prevent the following rules to be nested inside the selector
|
|
33
|
+
@at-root {
|
|
34
|
+
.sm\:#{$selector} {
|
|
35
|
+
@include grid.p-size-mobile {
|
|
36
|
+
@content;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.md\:#{$selector} {
|
|
41
|
+
@include grid.p-size-tablet {
|
|
42
|
+
@content;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.lg\:#{$selector} {
|
|
47
|
+
@include grid.p-size-desktop {
|
|
48
|
+
@content;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -1,43 +1,75 @@
|
|
|
1
|
+
@use 'grid';
|
|
2
|
+
|
|
1
3
|
@for $i from 0 through 12 {
|
|
2
|
-
.
|
|
3
|
-
margin
|
|
4
|
+
.m#{$i * 8} {
|
|
5
|
+
margin: $i * 8px;
|
|
4
6
|
}
|
|
5
|
-
}
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
margin-bottom: $i * 8px;
|
|
8
|
+
.p#{$i * 8} {
|
|
9
|
+
padding: $i * 8px;
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
// Spacing left & right
|
|
13
14
|
@for $i from 0 through 12 {
|
|
14
|
-
.
|
|
15
|
+
.mx#{$i * 8} {
|
|
16
|
+
margin-left: $i * 8px;
|
|
15
17
|
margin-right: $i * 8px;
|
|
16
18
|
}
|
|
19
|
+
|
|
20
|
+
.px#{$i * 8} {
|
|
21
|
+
padding-left: $i * 8px;
|
|
22
|
+
padding-right: $i * 8px;
|
|
23
|
+
}
|
|
17
24
|
}
|
|
18
25
|
|
|
26
|
+
// Spacing up & down
|
|
19
27
|
@for $i from 0 through 12 {
|
|
20
|
-
.
|
|
21
|
-
margin-
|
|
28
|
+
.my#{$i * 8} {
|
|
29
|
+
margin-top: $i * 8px;
|
|
30
|
+
margin-bottom: $i * 8px;
|
|
22
31
|
}
|
|
23
|
-
}
|
|
24
32
|
|
|
25
|
-
.
|
|
26
|
-
|
|
33
|
+
.py#{$i * 8} {
|
|
34
|
+
padding-top: $i * 8px;
|
|
35
|
+
padding-bottom: $i * 8px;
|
|
36
|
+
}
|
|
27
37
|
}
|
|
28
38
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
39
|
+
// Spacing for each specific area
|
|
40
|
+
$valid_areas: (
|
|
41
|
+
't': 'top',
|
|
42
|
+
'b': 'bottom',
|
|
43
|
+
'l': 'left',
|
|
44
|
+
'r': 'right',
|
|
45
|
+
);
|
|
32
46
|
|
|
33
|
-
|
|
34
|
-
|
|
47
|
+
@each $key, $area in $valid_areas {
|
|
48
|
+
@for $i from 0 through 12 {
|
|
49
|
+
.m#{$key}#{$i * 8} {
|
|
50
|
+
margin-#{$area}: $i * 8px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.p#{$key}#{$i * 8} {
|
|
54
|
+
padding-#{$area}: $i * 8px;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// Auto value for margin
|
|
59
|
+
.m#{$key}-auto {
|
|
60
|
+
margin-#{$area}: auto;
|
|
61
|
+
}
|
|
35
62
|
}
|
|
36
63
|
|
|
37
|
-
.
|
|
38
|
-
margin
|
|
64
|
+
.m-auto {
|
|
65
|
+
margin: auto;
|
|
39
66
|
}
|
|
40
67
|
|
|
41
|
-
.
|
|
68
|
+
.mx-auto {
|
|
42
69
|
margin-left: auto;
|
|
70
|
+
margin-right: auto;
|
|
71
|
+
}
|
|
72
|
+
.my-auto {
|
|
73
|
+
margin-top: auto;
|
|
74
|
+
margin-bottom: auto;
|
|
43
75
|
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
@use '../../../private/base/grid';
|
|
2
|
+
|
|
3
|
+
/** Shared values across align and justify properties */
|
|
4
|
+
$common-values: (
|
|
5
|
+
'start': flex-start,
|
|
6
|
+
'end': flex-end,
|
|
7
|
+
'center': center,
|
|
8
|
+
);
|
|
9
|
+
|
|
10
|
+
$align-values: map-merge(
|
|
11
|
+
$common-values,
|
|
12
|
+
(
|
|
13
|
+
'stretch': stretch,
|
|
14
|
+
'baseline': baseline,
|
|
15
|
+
)
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
$jutify-values: map-merge(
|
|
19
|
+
$common-values,
|
|
20
|
+
(
|
|
21
|
+
'between': space-between,
|
|
22
|
+
'around': space-around,
|
|
23
|
+
'evenly': space-evenly,
|
|
24
|
+
)
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
// Align items
|
|
28
|
+
@each $name, $value in $align-values {
|
|
29
|
+
.ai-#{$name} {
|
|
30
|
+
align-items: $value;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Justify content
|
|
35
|
+
@each $name, $value in $jutify-values {
|
|
36
|
+
.jc-#{$name} {
|
|
37
|
+
justify-content: $value;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.fd-row {
|
|
42
|
+
flex-direction: row !important;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.fd-row-reverse {
|
|
46
|
+
flex-direction: row-reverse !important;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.fd-column {
|
|
50
|
+
flex-direction: column !important;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.fd-column-reverse {
|
|
54
|
+
flex-direction: column-reverse !important;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.f-wrap {
|
|
58
|
+
flex-wrap: wrap;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.f-nowrap {
|
|
62
|
+
flex-wrap: nowrap;
|
|
63
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
margin-bottom: 24px;
|
|
3
|
+
background-color: #f8f8f8 !important;
|
|
4
|
+
border: 1px solid #d2d2d7;
|
|
5
|
+
border-radius: 8px;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.ai-container {
|
|
9
|
+
height: 200px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.item {
|
|
13
|
+
margin: 8px !important;
|
|
14
|
+
background-color: white !important;
|
|
15
|
+
border: 1px solid #d2d2d7;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.ai-item-2 {
|
|
19
|
+
min-height: 100px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.ai-item-3 {
|
|
23
|
+
min-height: 80px;
|
|
24
|
+
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
border: 1px solid;
|
|
6
6
|
border-radius: 8px;
|
|
7
7
|
|
|
8
|
-
&--
|
|
8
|
+
&--primary {
|
|
9
9
|
@extend .p-notice;
|
|
10
10
|
background-color: $ds-purple-100;
|
|
11
11
|
border-color: $ds-purple-500;
|
|
@@ -24,4 +24,16 @@
|
|
|
24
24
|
background-color: $ds-yellow-100;
|
|
25
25
|
border-color: $ds-yellow-500;
|
|
26
26
|
}
|
|
27
|
+
|
|
28
|
+
&--success {
|
|
29
|
+
@extend .p-notice;
|
|
30
|
+
background-color: $ds-green-100;
|
|
31
|
+
border-color: $ds-green-500;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&--info {
|
|
35
|
+
@extend .p-notice;
|
|
36
|
+
background-color: $ds-blue-100;
|
|
37
|
+
border-color: $ds-blue-500;
|
|
38
|
+
}
|
|
27
39
|
}
|