grav-svelte 0.0.99 → 0.1.0
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.
|
@@ -6,7 +6,12 @@
|
|
|
6
6
|
label: string;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
// Exported values - component always provides all 3
|
|
10
|
+
export let valueVar: string = ""; // Concatenated: "+528444612811"
|
|
11
|
+
export let dialCode: string = ""; // Dial code only: "+52"
|
|
12
|
+
export let phoneNumber: string = ""; // Phone number only: "8444612811"
|
|
13
|
+
|
|
14
|
+
// Common props
|
|
10
15
|
export let label: string;
|
|
11
16
|
export let disabled = false;
|
|
12
17
|
export let obligatory = false;
|
|
@@ -15,7 +20,7 @@
|
|
|
15
20
|
|
|
16
21
|
// Internal state
|
|
17
22
|
let selectedDialCode: string = defaultDialCode;
|
|
18
|
-
let
|
|
23
|
+
let internalPhoneNumber: string = "";
|
|
19
24
|
let validationMessage = "";
|
|
20
25
|
let isValid = true;
|
|
21
26
|
|
|
@@ -53,10 +58,17 @@
|
|
|
53
58
|
{ value: "+32", label: "🇧🇪 +32" },
|
|
54
59
|
];
|
|
55
60
|
|
|
56
|
-
//
|
|
61
|
+
// Update all exported values reactively
|
|
57
62
|
$: {
|
|
58
|
-
|
|
59
|
-
|
|
63
|
+
const cleanNumber = internalPhoneNumber.replace(/\D/g, "");
|
|
64
|
+
|
|
65
|
+
// Update separate values
|
|
66
|
+
dialCode = selectedDialCode;
|
|
67
|
+
phoneNumber = cleanNumber;
|
|
68
|
+
|
|
69
|
+
// Update concatenated value
|
|
70
|
+
if (selectedDialCode && cleanNumber) {
|
|
71
|
+
valueVar = selectedDialCode + cleanNumber;
|
|
60
72
|
} else if (selectedDialCode) {
|
|
61
73
|
valueVar = selectedDialCode;
|
|
62
74
|
} else {
|
|
@@ -65,9 +77,7 @@
|
|
|
65
77
|
|
|
66
78
|
// Validation logic
|
|
67
79
|
if (validation) {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
if (phoneNumber && !/^\d+$/.test(cleanNumber)) {
|
|
80
|
+
if (internalPhoneNumber && !/^\d+$/.test(cleanNumber)) {
|
|
71
81
|
validationMessage = "Phone number must contain only digits";
|
|
72
82
|
isValid = false;
|
|
73
83
|
} else if (cleanNumber && cleanNumber.length < 7) {
|
|
@@ -90,7 +100,7 @@
|
|
|
90
100
|
function handlePhoneInput(event: Event) {
|
|
91
101
|
const input = event.target as HTMLInputElement;
|
|
92
102
|
const cleaned = input.value.replace(/\D/g, "");
|
|
93
|
-
|
|
103
|
+
internalPhoneNumber = cleaned;
|
|
94
104
|
}
|
|
95
105
|
</script>
|
|
96
106
|
|
|
@@ -118,7 +128,7 @@
|
|
|
118
128
|
<div class="phone-number-wrapper">
|
|
119
129
|
<input
|
|
120
130
|
type="tel"
|
|
121
|
-
bind:value={
|
|
131
|
+
bind:value={internalPhoneNumber}
|
|
122
132
|
on:input={handlePhoneInput}
|
|
123
133
|
{disabled}
|
|
124
134
|
placeholder="Phone number"
|