@studiocms/ui 1.0.0-beta.0 → 1.0.0-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.
|
@@ -3,17 +3,23 @@
|
|
|
3
3
|
flex-direction: row;
|
|
4
4
|
align-items: center;
|
|
5
5
|
}
|
|
6
|
-
.sui-group .sui-button:not(:first-child):not(:last-child),
|
|
7
|
-
.sui-group .sui-
|
|
6
|
+
.sui-group > .sui-button:not(:first-child):not(:last-child),
|
|
7
|
+
.sui-group .sui-dropdown-container:not(:first-child):not(:last-child) .sui-button,
|
|
8
|
+
.sui-group > .sui-badge:not(:first-child):not(:last-child) {
|
|
8
9
|
border-radius: 0;
|
|
9
10
|
}
|
|
10
|
-
.sui-group .sui-button:first-child,
|
|
11
|
-
.sui-group .sui-
|
|
11
|
+
.sui-group > .sui-button:first-child,
|
|
12
|
+
.sui-group .sui-dropdown-container:first-child .sui-button,
|
|
13
|
+
.sui-group > .sui-badge:first-child {
|
|
12
14
|
border-top-right-radius: 0;
|
|
13
15
|
border-bottom-right-radius: 0;
|
|
14
16
|
}
|
|
15
|
-
.sui-group .sui-button:last-child,
|
|
16
|
-
.sui-group .sui-
|
|
17
|
+
.sui-group > .sui-button:last-child,
|
|
18
|
+
.sui-group .sui-dropdown-container:last-child .sui-button,
|
|
19
|
+
.sui-group > .sui-badge:last-child {
|
|
17
20
|
border-top-left-radius: 0;
|
|
18
21
|
border-bottom-left-radius: 0;
|
|
19
22
|
}
|
|
23
|
+
.sui-group .sui-button:focus-visible {
|
|
24
|
+
z-index: 2;
|
|
25
|
+
}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
---
|
|
2
|
+
// @ts-ignore - This is a TypeGenerated Module, available in dev thanks to manual d.ts file - This comment is here because this causes a type-error during build
|
|
3
|
+
import { type AvailableIcons } from 'studiocms:ui/icons';
|
|
2
4
|
import type { HTMLAttributes } from 'astro/types';
|
|
3
5
|
import { generateID } from '../../utils/generateID.js';
|
|
4
6
|
import './input.css';
|
|
7
|
+
import { AstroError } from 'astro/errors';
|
|
8
|
+
import Icon from '../Icon/Icon.astro';
|
|
5
9
|
|
|
6
10
|
/**
|
|
7
11
|
* The props for the input component.
|
|
@@ -39,6 +43,19 @@ interface Props extends HTMLAttributes<'input'> {
|
|
|
39
43
|
* Additional classes to apply to the input.
|
|
40
44
|
*/
|
|
41
45
|
class?: string;
|
|
46
|
+
/**
|
|
47
|
+
* An optional icon to be shown in the input.
|
|
48
|
+
*/
|
|
49
|
+
icon?:
|
|
50
|
+
| AvailableIcons
|
|
51
|
+
| {
|
|
52
|
+
name: AvailableIcons;
|
|
53
|
+
position: 'left' | 'right';
|
|
54
|
+
};
|
|
55
|
+
/**
|
|
56
|
+
* A description to be shown below the input
|
|
57
|
+
*/
|
|
58
|
+
description?: string;
|
|
42
59
|
}
|
|
43
60
|
|
|
44
61
|
const {
|
|
@@ -50,8 +67,24 @@ const {
|
|
|
50
67
|
isRequired = false,
|
|
51
68
|
disabled = false,
|
|
52
69
|
class: className,
|
|
70
|
+
icon,
|
|
71
|
+
description,
|
|
53
72
|
...props
|
|
54
73
|
} = Astro.props;
|
|
74
|
+
|
|
75
|
+
if (typeof icon === 'object') {
|
|
76
|
+
if (!icon.name) throw new AstroError('Missing icon name for input!');
|
|
77
|
+
if (!icon.position) throw new AstroError('Missing icon position for input!');
|
|
78
|
+
|
|
79
|
+
if (!['left', 'right'].includes(icon.position))
|
|
80
|
+
throw new AstroError('Invalid icon position for input!');
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
const iconPos = icon
|
|
84
|
+
? typeof icon === 'string' || (typeof icon === 'object' && icon.position === 'left')
|
|
85
|
+
? 'left'
|
|
86
|
+
: 'right'
|
|
87
|
+
: undefined;
|
|
55
88
|
---
|
|
56
89
|
|
|
57
90
|
<label for={name} class="sui-input-label" class:list={[disabled && "disabled"]}>
|
|
@@ -60,16 +93,25 @@ const {
|
|
|
60
93
|
{label} <span class="req-star">{isRequired && "*"}</span>
|
|
61
94
|
</span>
|
|
62
95
|
)}
|
|
96
|
+
{typeof icon === "string" && (
|
|
97
|
+
<Icon name={icon} width={20} height={20} class="input-icon icon-left" />
|
|
98
|
+
)}
|
|
99
|
+
{typeof icon === "object" && (
|
|
100
|
+
<Icon name={icon.name} width={20} height={20} class="input-icon" class:list={[`icon-${iconPos}`]} />
|
|
101
|
+
)}
|
|
63
102
|
<input
|
|
64
103
|
placeholder={placeholder}
|
|
65
104
|
name={name}
|
|
66
105
|
id={name}
|
|
67
106
|
type={type}
|
|
68
107
|
class="sui-input"
|
|
69
|
-
class:list={[className]}
|
|
108
|
+
class:list={[className, iconPos && `has-icon icon-${iconPos}`]}
|
|
70
109
|
required={isRequired}
|
|
71
110
|
disabled={disabled}
|
|
72
111
|
value={defaultValue}
|
|
73
112
|
{...props}
|
|
74
113
|
/>
|
|
114
|
+
{description && (
|
|
115
|
+
<span class="sui-input-desc">{description}</span>
|
|
116
|
+
)}
|
|
75
117
|
</label>
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
gap: .25rem;
|
|
6
|
+
position: relative;
|
|
6
7
|
}
|
|
7
8
|
.sui-input-label.disabled {
|
|
8
9
|
opacity: 0.5;
|
|
@@ -36,3 +37,32 @@
|
|
|
36
37
|
color: var(--danger-base);
|
|
37
38
|
font-weight: 700;
|
|
38
39
|
}
|
|
40
|
+
.sui-input-desc {
|
|
41
|
+
font-size: .825rem;
|
|
42
|
+
}
|
|
43
|
+
.input-icon {
|
|
44
|
+
position: absolute;
|
|
45
|
+
top: 50%;
|
|
46
|
+
transform: translateY(-50%);
|
|
47
|
+
}
|
|
48
|
+
.input-icon.icon-left {
|
|
49
|
+
left: 0.75rem;
|
|
50
|
+
}
|
|
51
|
+
.input-icon.icon-right {
|
|
52
|
+
right: 0.75rem;
|
|
53
|
+
}
|
|
54
|
+
.label + .input-icon {
|
|
55
|
+
top: calc(50% + 14px);
|
|
56
|
+
}
|
|
57
|
+
.label + .input-icon:has(~ .sui-input-desc) {
|
|
58
|
+
top: calc(50%);
|
|
59
|
+
}
|
|
60
|
+
.input-icon:has(~ .sui-input-desc):not(.label + .input-icon) {
|
|
61
|
+
top: calc(50% - 14px);
|
|
62
|
+
}
|
|
63
|
+
.sui-input.has-icon.icon-left {
|
|
64
|
+
padding-left: calc(1.5rem + 20px);
|
|
65
|
+
}
|
|
66
|
+
.sui-input.has-icon.icon-right {
|
|
67
|
+
padding-right: calc(1.5rem + 20px);
|
|
68
|
+
}
|