@yuzu-jobs/ui-components 0.0.3 → 0.0.5
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/index.ts +2 -0
- package/package.json +1 -1
- package/src/InputLabel.astro +2 -2
- package/src/InputSelect.astro +58 -0
package/index.ts
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
// Then, use this file to export everything you want your user to access.
|
|
3
3
|
|
|
4
4
|
import InputText from "./src/InputText.astro";
|
|
5
|
+
import InputSelect from "./src/InputSelect.astro";
|
|
5
6
|
import InputContainer from "./src/InputContainer.astro";
|
|
6
7
|
import InputLabel from "./src/InputLabel.astro";
|
|
7
8
|
import Alert from "./src/Alert.astro";
|
|
@@ -12,6 +13,7 @@ import ProfileSetupFlowHeader from "./src/ProfileSetupFlowHeader.astro";
|
|
|
12
13
|
export {
|
|
13
14
|
Button,
|
|
14
15
|
InputText,
|
|
16
|
+
InputSelect,
|
|
15
17
|
InputContainer,
|
|
16
18
|
InputLabel,
|
|
17
19
|
Alert,
|
package/package.json
CHANGED
package/src/InputLabel.astro
CHANGED
|
@@ -8,7 +8,7 @@ interface Props {
|
|
|
8
8
|
const { text, inputId, required } = Astro.props;
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
-
<label class="text-sm font-semibold" for={inputId}>
|
|
11
|
+
<label class="text-sm font-semibold relative" for={inputId}>
|
|
12
12
|
{text}
|
|
13
|
-
{required && <span class="text-red-500 text-lg">*</span>}
|
|
13
|
+
{required && <span class="text-red-500 text-lg absolute -top-3">*</span>}
|
|
14
14
|
</label>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
---
|
|
2
|
+
interface Option {
|
|
3
|
+
value: string;
|
|
4
|
+
label: string;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
interface Props {
|
|
8
|
+
id: string;
|
|
9
|
+
name: string;
|
|
10
|
+
options: Option[];
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
required?: boolean;
|
|
13
|
+
value?: string;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
const { id, name, options, placeholder, required, value } = Astro.props;
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
<div class="relative">
|
|
20
|
+
<select
|
|
21
|
+
class="w-full p-2 pr-8 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent bg-white appearance-none cursor-pointer"
|
|
22
|
+
id={id}
|
|
23
|
+
name={name}
|
|
24
|
+
required={required ?? false}
|
|
25
|
+
>
|
|
26
|
+
{
|
|
27
|
+
placeholder && (
|
|
28
|
+
<option value="" disabled selected={!value}>
|
|
29
|
+
{placeholder}
|
|
30
|
+
</option>
|
|
31
|
+
)
|
|
32
|
+
}
|
|
33
|
+
{
|
|
34
|
+
options.map((option) => (
|
|
35
|
+
<option value={option.value} selected={option.value === value}>
|
|
36
|
+
{option.label}
|
|
37
|
+
</option>
|
|
38
|
+
))
|
|
39
|
+
}
|
|
40
|
+
</select>
|
|
41
|
+
<div
|
|
42
|
+
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400"
|
|
43
|
+
>
|
|
44
|
+
<svg
|
|
45
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
46
|
+
width="16"
|
|
47
|
+
height="16"
|
|
48
|
+
viewBox="0 0 24 24"
|
|
49
|
+
fill="none"
|
|
50
|
+
stroke="currentColor"
|
|
51
|
+
stroke-width="2"
|
|
52
|
+
stroke-linecap="round"
|
|
53
|
+
stroke-linejoin="round"
|
|
54
|
+
>
|
|
55
|
+
<path d="m6 9 6 6 6-6"></path>
|
|
56
|
+
</svg>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|