@yuzu-jobs/ui-components 0.0.6 → 0.0.7
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/InputSwitch.astro +50 -0
package/index.ts
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
import InputText from "./src/InputText.astro";
|
|
5
5
|
import InputSelect from "./src/InputSelect.astro";
|
|
6
|
+
import InputSwitch from "./src/InputSwitch.astro";
|
|
6
7
|
import InputContainer from "./src/InputContainer.astro";
|
|
7
8
|
import InputLabel from "./src/InputLabel.astro";
|
|
8
9
|
import Alert from "./src/Alert.astro";
|
|
@@ -14,6 +15,7 @@ export {
|
|
|
14
15
|
Button,
|
|
15
16
|
InputText,
|
|
16
17
|
InputSelect,
|
|
18
|
+
InputSwitch,
|
|
17
19
|
InputContainer,
|
|
18
20
|
InputLabel,
|
|
19
21
|
Alert,
|
package/package.json
CHANGED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
---
|
|
2
|
+
interface Props {
|
|
3
|
+
id: string;
|
|
4
|
+
name: string;
|
|
5
|
+
label?: string;
|
|
6
|
+
checked?: boolean;
|
|
7
|
+
required?: boolean;
|
|
8
|
+
"data-pref-type"?: string;
|
|
9
|
+
"data-pref-channel"?: string;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const {
|
|
13
|
+
id,
|
|
14
|
+
name,
|
|
15
|
+
label,
|
|
16
|
+
checked,
|
|
17
|
+
required,
|
|
18
|
+
"data-pref-type": dataPrefType,
|
|
19
|
+
"data-pref-channel": dataPrefChannel,
|
|
20
|
+
} = Astro.props;
|
|
21
|
+
|
|
22
|
+
const hasSlot = Astro.slots.has("default");
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
<label class="flex items-center gap-3 cursor-pointer group" for={id}>
|
|
26
|
+
<div class="relative">
|
|
27
|
+
<input
|
|
28
|
+
class="sr-only peer"
|
|
29
|
+
type="checkbox"
|
|
30
|
+
id={id}
|
|
31
|
+
name={name}
|
|
32
|
+
required={required ?? false}
|
|
33
|
+
checked={checked ?? false}
|
|
34
|
+
data-pref-type={dataPrefType}
|
|
35
|
+
data-pref-channel={dataPrefChannel}
|
|
36
|
+
/>
|
|
37
|
+
<div
|
|
38
|
+
class="w-10 h-6 bg-gray-200 rounded-full transition-colors peer-checked:bg-primary peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-primary peer-focus-visible:ring-offset-2"
|
|
39
|
+
>
|
|
40
|
+
</div>
|
|
41
|
+
<div
|
|
42
|
+
class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow-sm transition-transform peer-checked:translate-x-4"
|
|
43
|
+
>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
<span class="text-sm group-hover:text-primary transition-colors">
|
|
47
|
+
{hasSlot ? <slot /> : label}
|
|
48
|
+
{required && <span class="text-red-500 text-lg">*</span>}
|
|
49
|
+
</span>
|
|
50
|
+
</label>
|