@platformatic/ui-components 0.6.10 → 0.6.11
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-3WVulCbJ.js +40 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/DropDown.jsx +14 -3
- package/src/components/DropDown.module.css +4 -1
- package/src/components/forms/Select.module.css +1 -1
- package/src/components/icons/CreateAppIcon.jsx +2 -3
- package/dist/assets/index-ClhaEtyn.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-3WVulCbJ.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-CeMo0DvI.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -8,13 +8,15 @@ import { DARK_BLUE, LIGHT_BLUE, MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './cons
|
|
|
8
8
|
function DropDown ({
|
|
9
9
|
pictureUrl = '',
|
|
10
10
|
header = '',
|
|
11
|
+
headerClassName = '',
|
|
11
12
|
align = 'left',
|
|
12
13
|
items = [],
|
|
13
14
|
backgroundColor = DARK_BLUE,
|
|
14
15
|
textColor = MAIN_DARK_BLUE,
|
|
15
16
|
headerColor = WHITE,
|
|
16
17
|
borderColor = WHITE,
|
|
17
|
-
lastButton = null
|
|
18
|
+
lastButton = null,
|
|
19
|
+
menuCustomClassName = ''
|
|
18
20
|
}) {
|
|
19
21
|
const [open, setOpen] = useState(false)
|
|
20
22
|
const borderClass = commonStyles[`bordered--${borderColor}-30`]
|
|
@@ -22,6 +24,7 @@ function DropDown ({
|
|
|
22
24
|
let classNameMenu = `${styles.menu} `
|
|
23
25
|
classNameMenu += commonStyles[`background-color-${backgroundColor}`]
|
|
24
26
|
classNameMenu += ' ' + borderClass
|
|
27
|
+
classNameMenu += ' ' + menuCustomClassName
|
|
25
28
|
|
|
26
29
|
let classNameItem = `${styles.item} `
|
|
27
30
|
classNameItem += commonStyles[`text--${textColor}`]
|
|
@@ -49,7 +52,7 @@ function DropDown ({
|
|
|
49
52
|
<div className={`${styles.dropDown} ${styles[align]}`}>
|
|
50
53
|
<span className={headerClassNamme} onClick={handleOpen}>
|
|
51
54
|
{pictureUrl && <img src={pictureUrl} height={32} width={32} className={styles.picture} />}
|
|
52
|
-
{header}
|
|
55
|
+
{header && (<span className={headerClassName || styles.headerClassNameDefault}>{header}</span>)}
|
|
53
56
|
{!open && <div className={styles.arrow}><PlatformaticIcon iconName='ArrowRightIcon' color={headerColor} onClick={null} /></div>}
|
|
54
57
|
{open && <div className={styles.arrow}><PlatformaticIcon iconName='ArrowDownIcon' color={headerColor} onClick={null} /></div>}
|
|
55
58
|
</span>
|
|
@@ -78,6 +81,10 @@ DropDown.propTypes = {
|
|
|
78
81
|
* header
|
|
79
82
|
*/
|
|
80
83
|
header: PropTypes.string,
|
|
84
|
+
/**
|
|
85
|
+
* headerClassName
|
|
86
|
+
*/
|
|
87
|
+
headerClassName: PropTypes.string,
|
|
81
88
|
/**
|
|
82
89
|
* align
|
|
83
90
|
*/
|
|
@@ -105,7 +112,11 @@ DropDown.propTypes = {
|
|
|
105
112
|
/**
|
|
106
113
|
* lastButton
|
|
107
114
|
*/
|
|
108
|
-
lastButton: PropTypes.node
|
|
115
|
+
lastButton: PropTypes.node,
|
|
116
|
+
/**
|
|
117
|
+
* menuCustomClassName
|
|
118
|
+
*/
|
|
119
|
+
menuCustomClassName: PropTypes.string
|
|
109
120
|
}
|
|
110
121
|
|
|
111
122
|
export default DropDown
|
|
@@ -12,7 +12,10 @@
|
|
|
12
12
|
transform: translateY(-50%);
|
|
13
13
|
}
|
|
14
14
|
.header {
|
|
15
|
-
@apply flex items-center hover:cursor-pointer relative pr-6
|
|
15
|
+
@apply flex items-center hover:cursor-pointer relative pr-6;
|
|
16
|
+
}
|
|
17
|
+
.headerClassNameDefault {
|
|
18
|
+
@apply tracking-more-widest uppercase text-sm font-normal;
|
|
16
19
|
}
|
|
17
20
|
.picture {
|
|
18
21
|
@apply border border-transparent rounded-full mr-2;
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
@apply outline-none;
|
|
18
18
|
}
|
|
19
19
|
.options {
|
|
20
|
-
@apply absolute left-0 top-[42px] w-
|
|
20
|
+
@apply absolute left-0 top-[42px] w-full max-h-[216px] overflow-y-auto z-20 p-2 box-border;
|
|
21
21
|
}
|
|
22
22
|
.bordered-options {
|
|
23
23
|
@apply border border-solid rounded
|
|
@@ -45,9 +45,8 @@ const CreateAppIcon = ({
|
|
|
45
45
|
xmlns='http://www.w3.org/2000/svg'
|
|
46
46
|
className={className}
|
|
47
47
|
>
|
|
48
|
-
<path d='
|
|
49
|
-
<path d='
|
|
50
|
-
|
|
48
|
+
<path d='M15.75 10.5L20.2966 13.125V18.375L15.75 21L11.2034 18.375V13.125L15.75 10.5Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
49
|
+
<path d='M15 8.03329C14.5134 5.17539 12.0316 3 9.04323 3C5.70565 3 3 5.71343 3 9.06062C3 11.9927 5.07616 14.4385 7.83459 15M9.04323 6V12M6 9L12 9.06062' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
51
50
|
</svg>
|
|
52
51
|
)
|
|
53
52
|
break
|