@sk-web-gui/core 0.1.70 → 0.1.71
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 +2 -2
- package/src/components/badge.js +140 -30
- package/src/components/pagination.js +5 -4
- package/src/components/side-menu.js +5 -5
- package/src/index.js +2 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sk-web-gui/core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.71",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"files": [
|
|
@@ -31,5 +31,5 @@
|
|
|
31
31
|
"postcss-import": "^14.0.2",
|
|
32
32
|
"tailwindcss": "^2.2.4"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "da5a8271e573b0d6fa137cb15ab1a8bffde0a467"
|
|
35
35
|
}
|
package/src/components/badge.js
CHANGED
|
@@ -1,60 +1,170 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
'
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
'@apply text-body bg-neutral-200 border border-transparent': {},
|
|
7
|
-
'@apply dark:text-neutral-100 dark:bg-neutral-700': {},
|
|
1
|
+
function badgeSolid(colors) {
|
|
2
|
+
return {
|
|
3
|
+
'&-solid': {
|
|
4
|
+
'@apply border-2 border-white box-border': {},
|
|
5
|
+
'@apply text-white': {},
|
|
8
6
|
|
|
9
7
|
...colors.reduce(
|
|
10
8
|
(styles, color) => ({
|
|
11
9
|
...styles,
|
|
12
10
|
[`&[data-color="${color}"]`]: {
|
|
13
|
-
[`@apply
|
|
14
|
-
[`@apply
|
|
15
|
-
'@apply dark:bg-opacity-15': {},
|
|
11
|
+
//[`@apply border-${color}`]: {},
|
|
12
|
+
[`@apply text-white bg-${color}`]: {},
|
|
16
13
|
},
|
|
17
14
|
}),
|
|
18
15
|
{}
|
|
19
16
|
),
|
|
17
|
+
|
|
18
|
+
"&[data-color='primary']": {
|
|
19
|
+
'@apply bg-primary': {},
|
|
20
|
+
},
|
|
21
|
+
"&[data-color='warning']": {
|
|
22
|
+
'@apply bg-warning': {},
|
|
23
|
+
},
|
|
24
|
+
"&[data-color='error']": {
|
|
25
|
+
'@apply bg-error': {},
|
|
26
|
+
},
|
|
27
|
+
"&[data-color='neutral']": {
|
|
28
|
+
'@apply bg-neutral-400': {},
|
|
29
|
+
},
|
|
30
|
+
|
|
20
31
|
},
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
function badgeOutline(colors) {
|
|
36
|
+
return {
|
|
37
|
+
'&-outline': {
|
|
38
|
+
'@apply border border-gray-stroke': {},
|
|
39
|
+
'@apply text-body bg-transparent': {},
|
|
21
40
|
|
|
22
|
-
'&-solid': {
|
|
23
|
-
'@apply text-white bg-neutral-500 border border-transparent': {},
|
|
24
|
-
'@apply dark:border-neutral-600 dark:text-neutral-100 dark:bg-neutral-700': {},
|
|
25
41
|
...colors.reduce(
|
|
26
42
|
(styles, color) => ({
|
|
27
43
|
...styles,
|
|
28
44
|
[`&[data-color="${color}"]`]: {
|
|
29
|
-
[`@apply
|
|
30
|
-
[`@apply
|
|
31
|
-
|
|
32
|
-
'@apply dark:border-opacity-40': {},
|
|
45
|
+
[`@apply border-current`]: {},
|
|
46
|
+
[`@apply text-${color}`]: {},
|
|
47
|
+
|
|
33
48
|
},
|
|
34
49
|
}),
|
|
35
50
|
{}
|
|
36
51
|
),
|
|
52
|
+
|
|
53
|
+
'&.badge': {
|
|
54
|
+
'&-disabled': {
|
|
55
|
+
'@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
|
|
56
|
+
'&.active': {
|
|
57
|
+
'@apply border-gray-stroke': {},
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
|
|
62
|
+
"&[data-color='primary']": {
|
|
63
|
+
'@apply border-primary': {},
|
|
64
|
+
'@apply text-primary': {},
|
|
65
|
+
},
|
|
66
|
+
"&[data-color='warning']": {
|
|
67
|
+
'@apply border-warning': {},
|
|
68
|
+
'@apply text-warning': {},
|
|
69
|
+
},
|
|
70
|
+
"&[data-color='error']": {
|
|
71
|
+
'@apply border-error': {},
|
|
72
|
+
'@apply text-error': {},
|
|
73
|
+
},
|
|
74
|
+
"&[data-color='neutral']": {
|
|
75
|
+
'@apply border-neutral-300': {},
|
|
76
|
+
'@apply border-neutral-300': {},
|
|
77
|
+
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
};
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
module.exports = badge = (colors) => ({
|
|
85
|
+
'.badge': {
|
|
86
|
+
'@apply relative': {},
|
|
87
|
+
'@apply m-0': {},
|
|
88
|
+
'@apply inline-flex items-center justify-center content-center align-middle': {},
|
|
89
|
+
'@apply font-medium leading-none': {},
|
|
90
|
+
|
|
91
|
+
'&-fullrounded': {
|
|
92
|
+
'@apply rounded-full': {},
|
|
93
|
+
},
|
|
94
|
+
|
|
95
|
+
//rounding
|
|
96
|
+
'&-roundedcorners-md': {
|
|
97
|
+
'@apply rounded-3xl px-sm': {},
|
|
98
|
+
},
|
|
99
|
+
|
|
100
|
+
'&-roundedcorners-lg': {
|
|
101
|
+
'@apply rounded-3xl px-sm': {},
|
|
37
102
|
},
|
|
38
103
|
|
|
104
|
+
// sizing
|
|
39
105
|
'&-sm': {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
borderRadius: '2em',
|
|
106
|
+
'@apply text-opacity-0 text-[0rem] overflow-hidden rounded-full': {},
|
|
107
|
+
minHeight: '9px',
|
|
108
|
+
maxHeight: '9px',
|
|
109
|
+
minWidth: '9px',
|
|
45
110
|
},
|
|
46
111
|
|
|
47
112
|
'&-md': {
|
|
48
|
-
'@apply
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
113
|
+
'@apply text-xs font-bold': {},
|
|
114
|
+
minHeight: '23px',
|
|
115
|
+
maxHeight: '23px',
|
|
116
|
+
minWidth: '23px',
|
|
117
|
+
|
|
118
|
+
},
|
|
119
|
+
|
|
120
|
+
'&-lg': {
|
|
121
|
+
'@apply text-sm font-bold': {},
|
|
122
|
+
minHeight: '27px',
|
|
123
|
+
maxHeight: '27px',
|
|
124
|
+
minWidth: '27px',
|
|
125
|
+
|
|
126
|
+
},
|
|
127
|
+
|
|
128
|
+
'&-standard-sm': {
|
|
129
|
+
'@apply right-[-4px] self-center' : {},
|
|
130
|
+
},
|
|
131
|
+
'&-standard-md': {
|
|
132
|
+
'@apply right-[-4px] self-center': {},
|
|
133
|
+
},
|
|
134
|
+
'&-standard-lg': {
|
|
135
|
+
'@apply right-[-4px] self-center': {},
|
|
136
|
+
},
|
|
137
|
+
|
|
138
|
+
'&-super-sm': {
|
|
139
|
+
'@apply right-[-2px] top-[-5px]': {},
|
|
53
140
|
},
|
|
141
|
+
'&-super-md': {
|
|
142
|
+
'@apply right-[-3px] top-[-8px]': {},
|
|
143
|
+
},
|
|
144
|
+
'&-super-lg': {
|
|
145
|
+
'@apply right-[-4px] top-[-8px]': {},
|
|
146
|
+
},
|
|
147
|
+
|
|
148
|
+
'&-superoverlap-sm': {
|
|
149
|
+
'@apply right-[3px] top-[-5px]': {},
|
|
150
|
+
},
|
|
151
|
+
'&-superoverlap-md': {
|
|
152
|
+
'@apply right-[8px] top-[-6px]': {},
|
|
153
|
+
},
|
|
154
|
+
'&-superoverlap-lg': {
|
|
155
|
+
'@apply right-[8px] top-[-8px]': {},
|
|
156
|
+
},
|
|
157
|
+
|
|
54
158
|
|
|
55
|
-
'&-
|
|
56
|
-
'@apply
|
|
57
|
-
|
|
159
|
+
'&-fit-content': {
|
|
160
|
+
'@apply p-0': {},
|
|
161
|
+
fontSize: 'inherit',
|
|
58
162
|
},
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
// variants
|
|
166
|
+
...badgeSolid(colors),
|
|
167
|
+
...badgeOutline(colors),
|
|
168
|
+
|
|
59
169
|
},
|
|
60
170
|
});
|
|
@@ -15,11 +15,11 @@ module.exports = Pagination = () => ({
|
|
|
15
15
|
},
|
|
16
16
|
|
|
17
17
|
'&-list': {
|
|
18
|
-
'@apply flex items-
|
|
18
|
+
'@apply flex items-center': {},
|
|
19
19
|
},
|
|
20
20
|
|
|
21
21
|
'&-pageLabel': {
|
|
22
|
-
'@apply cursor-pointer m-sm': {},
|
|
22
|
+
'@apply cursor-pointer m-sm box-content': {},
|
|
23
23
|
width: '1.5em',
|
|
24
24
|
height: '1.75em',
|
|
25
25
|
|
|
@@ -29,7 +29,8 @@ module.exports = Pagination = () => ({
|
|
|
29
29
|
},
|
|
30
30
|
|
|
31
31
|
'&-prevNextButton': {
|
|
32
|
-
'@apply text-body ml-4 inline-flex items-center sm:w-auto inline-flex flex-row leading-none': {},
|
|
32
|
+
'@apply text-body ml-4 my-sm inline-flex items-center sm:w-auto inline-flex flex-row leading-none': {},
|
|
33
|
+
height: '1.75em',
|
|
33
34
|
|
|
34
35
|
'&[data-reverse=true]': {
|
|
35
36
|
'@apply mr-4 ml-0 flex-row-reverse': {},
|
|
@@ -54,7 +55,7 @@ module.exports = Pagination = () => ({
|
|
|
54
55
|
},
|
|
55
56
|
|
|
56
57
|
'&-icon': {
|
|
57
|
-
'@apply m-1
|
|
58
|
+
'@apply m-1 leading-none flex items-center': {},
|
|
58
59
|
|
|
59
60
|
'.MuiSvgIcon-root': {
|
|
60
61
|
fontSize: '1em',
|
|
@@ -3,11 +3,7 @@ module.exports = Menu = () => ({
|
|
|
3
3
|
'@apply w-[440px]': {},
|
|
4
4
|
|
|
5
5
|
'.menu-header': {
|
|
6
|
-
'@apply py-[2rem] px-[1.6rem] bg-primary text-white
|
|
7
|
-
|
|
8
|
-
'label, .label': {
|
|
9
|
-
'@apply text-xl font-bold text-white': {},
|
|
10
|
-
},
|
|
6
|
+
'@apply py-[2rem] px-[1.6rem] rounded-t-[.2rem] bg-primary text-white': {},
|
|
11
7
|
|
|
12
8
|
'.label-small': {
|
|
13
9
|
'@apply text-[1.6rem]': {},
|
|
@@ -24,6 +20,10 @@ module.exports = Menu = () => ({
|
|
|
24
20
|
'.label-header': {
|
|
25
21
|
'@apply flex items-center': {},
|
|
26
22
|
|
|
23
|
+
'label, .label': {
|
|
24
|
+
'@apply text-xl font-bold': {},
|
|
25
|
+
},
|
|
26
|
+
|
|
27
27
|
span: {
|
|
28
28
|
'@apply ml-auto': {},
|
|
29
29
|
},
|
package/src/index.js
CHANGED
|
@@ -6,6 +6,7 @@ const withOpacity = require('./with-opacity');
|
|
|
6
6
|
// components
|
|
7
7
|
const Alert = require('./components/alert');
|
|
8
8
|
const AlertBanner = require('./components/alert-banner');
|
|
9
|
+
const Badge = require('./components/badge');
|
|
9
10
|
const Breadcrumb = require('./components/breadcrumb');
|
|
10
11
|
const ButtonGroup = require('./components/button-group');
|
|
11
12
|
|
|
@@ -49,6 +50,7 @@ const SearchBar = require('./components/search-bar');
|
|
|
49
50
|
const components = [
|
|
50
51
|
Alert,
|
|
51
52
|
AlertBanner,
|
|
53
|
+
Badge,
|
|
52
54
|
Breadcrumb,
|
|
53
55
|
ButtonGroup,
|
|
54
56
|
Button,
|