@platformatic/ui-components 0.7.13 → 0.7.14
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/assets/index-B9K4dv-s.js +40 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/forms/InputWithSeparator.jsx +8 -0
- package/src/components/forms/InputWithSeparator.module.css +1 -1
- package/src/components/icons/AddUserIcon.jsx +102 -0
- package/src/components/icons/index.js +2 -0
- package/dist/assets/index-KFg_CKsg.js +0 -40
package/dist/index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Platformatic UI Components</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-B9K4dv-s.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-TVRb_Qow.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -90,6 +90,13 @@ function InputWithSeparator ({
|
|
|
90
90
|
onChange({ value: event.target.value, chunks })
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
+
function handleKeyDown (event) {
|
|
94
|
+
if ((event.keyCode === 46 || event.keyCode === 8) && value === '' && chunks.length > 0) {
|
|
95
|
+
setChunks(prevChunks => prevChunks.splice(0, prevChunks.length - 1))
|
|
96
|
+
onChange({ value: '', chunks })
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
93
100
|
function normalClassName () {
|
|
94
101
|
return `${baseClassName} `
|
|
95
102
|
}
|
|
@@ -150,6 +157,7 @@ function InputWithSeparator ({
|
|
|
150
157
|
placeholder={chunks.length > 0 ? '' : placeholder}
|
|
151
158
|
className={inputClassName}
|
|
152
159
|
onChange={handleChange}
|
|
160
|
+
onKeyDown={handleKeyDown}
|
|
153
161
|
disabled={disabled}
|
|
154
162
|
onFocus={() => handleFocus()}
|
|
155
163
|
onBlur={() => handleBlur()}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
@apply flex min-h-[40px] border border-solid box-border rounded items-center gap-2 flex-wrap relative grow px-2;
|
|
9
9
|
}
|
|
10
10
|
.input {
|
|
11
|
-
@apply h-full m-0 border-0;
|
|
11
|
+
@apply h-full m-0 border-0 min-w-[250px];
|
|
12
12
|
padding-block: 0;
|
|
13
13
|
padding-inline: 0;
|
|
14
14
|
background: inherit;
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
5
|
+
|
|
6
|
+
const AddUserIcon = ({
|
|
7
|
+
color = MAIN_DARK_BLUE,
|
|
8
|
+
size = MEDIUM,
|
|
9
|
+
disabled = false,
|
|
10
|
+
inactive = false
|
|
11
|
+
}) => {
|
|
12
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
13
|
+
if (disabled) {
|
|
14
|
+
className += ` ${styles.iconDisabled}`
|
|
15
|
+
}
|
|
16
|
+
if (inactive) {
|
|
17
|
+
className += ` ${styles.iconInactive}`
|
|
18
|
+
}
|
|
19
|
+
let icon = <></>
|
|
20
|
+
|
|
21
|
+
switch (size) {
|
|
22
|
+
case SMALL:
|
|
23
|
+
icon = (
|
|
24
|
+
<svg
|
|
25
|
+
width={16}
|
|
26
|
+
height={16}
|
|
27
|
+
viewBox='0 0 16 16'
|
|
28
|
+
fill='none'
|
|
29
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
30
|
+
className={className}
|
|
31
|
+
>
|
|
32
|
+
<path d='M7 10.0554C4.16229 10.3728 2 12.0181 2 14.0001H8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
33
|
+
<circle cx='8' cy='5' r='3' stroke='none' />
|
|
34
|
+
<circle cx='11' cy='11' r='3' stroke='none' />
|
|
35
|
+
<path d='M9.58569 11H12.4141' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M11 12.4143L11 9.58588' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
</svg>
|
|
38
|
+
)
|
|
39
|
+
break
|
|
40
|
+
case MEDIUM:
|
|
41
|
+
icon = (
|
|
42
|
+
<svg
|
|
43
|
+
width={24}
|
|
44
|
+
height={24}
|
|
45
|
+
viewBox='0 0 24 24'
|
|
46
|
+
fill='none'
|
|
47
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
48
|
+
className={className}
|
|
49
|
+
>
|
|
50
|
+
<path d='M10.5 15.083C6.24343 15.5591 3 18.0271 3 21H12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
|
+
<circle cx='12' cy='7.5' r='4.5' stroke='none' strokeWidth={1.5} />
|
|
52
|
+
<circle cx='16.5' cy='16.5' r='4.5' stroke='none' strokeWidth={1.5} />
|
|
53
|
+
<path d='M14.3787 16.5H18.6213' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
54
|
+
<path d='M16.5 18.6213L16.5 14.3787' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
55
|
+
</svg>
|
|
56
|
+
)
|
|
57
|
+
break
|
|
58
|
+
case LARGE:
|
|
59
|
+
icon = (
|
|
60
|
+
<svg
|
|
61
|
+
width={40}
|
|
62
|
+
height={40}
|
|
63
|
+
viewBox='0 0 40 40'
|
|
64
|
+
fill='none'
|
|
65
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
66
|
+
className={className}
|
|
67
|
+
>
|
|
68
|
+
<path d='M17.5 25.1382C10.4057 25.9316 5 30.0449 5 34.9999H20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
69
|
+
<circle cx='20' cy='12.5' r='7.5' stroke='none' strokeWidth={2} />
|
|
70
|
+
<circle cx='27.5' cy='27.5' r='7.5' stroke='none' strokeWidth={2} />
|
|
71
|
+
<path d='M23.9644 27.5H31.0354' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
72
|
+
<path d='M27.5 31.0356L27.5 23.9646' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
73
|
+
</svg>
|
|
74
|
+
)
|
|
75
|
+
break
|
|
76
|
+
|
|
77
|
+
default:
|
|
78
|
+
break
|
|
79
|
+
}
|
|
80
|
+
return icon
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
AddUserIcon.propTypes = {
|
|
84
|
+
/**
|
|
85
|
+
* color of text, icon and borders
|
|
86
|
+
*/
|
|
87
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
88
|
+
/**
|
|
89
|
+
* Size
|
|
90
|
+
*/
|
|
91
|
+
size: PropTypes.oneOf(SIZES),
|
|
92
|
+
/**
|
|
93
|
+
* disabled
|
|
94
|
+
*/
|
|
95
|
+
disabled: PropTypes.bool,
|
|
96
|
+
/**
|
|
97
|
+
* inactive
|
|
98
|
+
*/
|
|
99
|
+
inactive: PropTypes.bool
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export default AddUserIcon
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import AddIcon from './AddIcon'
|
|
2
2
|
import AddEnvVariableIcon from './AddEnvVariableIcon'
|
|
3
3
|
import AddRouteIcon from './AddRouteIcon'
|
|
4
|
+
import AddUserIcon from './AddUserIcon'
|
|
4
5
|
import AlertIcon from './AlertIcon'
|
|
5
6
|
import AllAppsIcon from './AllAppsIcon'
|
|
6
7
|
import AllInOneIcon from './AllInOneIcon'
|
|
@@ -189,6 +190,7 @@ export default {
|
|
|
189
190
|
AddIcon,
|
|
190
191
|
AddEnvVariableIcon,
|
|
191
192
|
AddRouteIcon,
|
|
193
|
+
AddUserIcon,
|
|
192
194
|
AlertIcon,
|
|
193
195
|
AllAppsIcon,
|
|
194
196
|
AllInOneIcon,
|