inertia-bootstrap-forms 1.0.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.
- package/Bootstrap/InputGroup.vue +9 -0
- package/Bootstrap/InputGroupText.vue +9 -0
- package/Inputs/AmountInput.vue +64 -0
- package/Inputs/CaptchaInput.vue +100 -0
- package/Inputs/CheckboxInput.vue +56 -0
- package/Inputs/DatePickerInput.vue +137 -0
- package/Inputs/EditorInput.vue +131 -0
- package/Inputs/EmailInput.vue +22 -0
- package/Inputs/FileInput.vue +196 -0
- package/Inputs/FormContainer.vue +129 -0
- package/Inputs/FormLabel.vue +21 -0
- package/Inputs/MobileInput.vue +22 -0
- package/Inputs/PasswordInput.vue +22 -0
- package/Inputs/Select2Input.vue +193 -0
- package/Inputs/SubmitButton.vue +20 -0
- package/Inputs/TelInput.vue +106 -0
- package/Inputs/TextAreaInput.vue +33 -0
- package/Inputs/TextInput.vue +34 -0
- package/Inputs/countryCodes.js +241 -0
- package/Inputs/locationInput.vue +122 -0
- package/package.json +30 -0
- package/vue-select.css +387 -0
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import {VueTelInput} from 'vue-tel-input';
|
|
3
|
+
import 'vue-tel-input/vue-tel-input.css';
|
|
4
|
+
import {inject} from "vue";
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
components: {
|
|
8
|
+
VueTelInput
|
|
9
|
+
},
|
|
10
|
+
props: {
|
|
11
|
+
name: {
|
|
12
|
+
type: String,
|
|
13
|
+
default: 'email',
|
|
14
|
+
required: true,
|
|
15
|
+
},
|
|
16
|
+
placeHolder: {
|
|
17
|
+
type: String,
|
|
18
|
+
default: '000 000 0000',
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
setup(props) {
|
|
22
|
+
let form = inject('form');
|
|
23
|
+
|
|
24
|
+
if (form === undefined) {
|
|
25
|
+
form = {
|
|
26
|
+
errors: {},
|
|
27
|
+
getID(name) {
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
return {form};
|
|
33
|
+
},
|
|
34
|
+
methods: {
|
|
35
|
+
inputEvent(number, phone) {
|
|
36
|
+
this.form[this.name] = phone.number;
|
|
37
|
+
this.valid = phone.valid;
|
|
38
|
+
console.log('input', number, phone);
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
data() {
|
|
42
|
+
return {
|
|
43
|
+
defaultValue: this.form[this.name],
|
|
44
|
+
valid: null,
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
</script>
|
|
49
|
+
<template>
|
|
50
|
+
<div class="telephone-input input-group fanum" dir="ltr">
|
|
51
|
+
<vue-tel-input
|
|
52
|
+
mode="national"
|
|
53
|
+
:validCharactersOnly="true"
|
|
54
|
+
defaultCountry="ir"
|
|
55
|
+
:dropdownOptions="{
|
|
56
|
+
showDialCodeInList:true,
|
|
57
|
+
showDialCodeInSelection:true,
|
|
58
|
+
showFlags:false,
|
|
59
|
+
}"
|
|
60
|
+
@on-input="inputEvent"
|
|
61
|
+
:inputOptions="{
|
|
62
|
+
placeholder: placeHolder
|
|
63
|
+
}"
|
|
64
|
+
v-model="defaultValue"
|
|
65
|
+
:styleClasses="'form-control' + ((valid === false || form?.errors[name] !== undefined) ? ' is-invalid' : '')"/>
|
|
66
|
+
</div>
|
|
67
|
+
</template>
|
|
68
|
+
<style>
|
|
69
|
+
.telephone-input {
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.telephone-input .vti__dropdown {
|
|
73
|
+
position: absolute;
|
|
74
|
+
top: 0;
|
|
75
|
+
right: 0;
|
|
76
|
+
bottom: 0;
|
|
77
|
+
border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.telephone-input .vti__input.vti__phone {
|
|
81
|
+
padding-right: 3rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.telephone-input .vti__dropdown-list {
|
|
85
|
+
left: auto;
|
|
86
|
+
right: 0;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.telephone-input .vti__dropdown-list .vti__dropdown-item {
|
|
90
|
+
direction: rtl;
|
|
91
|
+
text-align: right;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.telephone-input .vti__dropdown-list .vti__dropdown-item strong {
|
|
95
|
+
font-weight: normal;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.telephone-input .vti__selection {
|
|
99
|
+
font-size: inherit;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.telephone-input .form-control.is-invalid{
|
|
103
|
+
padding-right: 0.75rem;
|
|
104
|
+
background-position: left calc(0.425em + 0.25rem) center;
|
|
105
|
+
}
|
|
106
|
+
</style>
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import {inject} from "vue";
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
props: {
|
|
6
|
+
name: {
|
|
7
|
+
type: String,
|
|
8
|
+
required: true,
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
setup(props) {
|
|
12
|
+
let form = inject('form');
|
|
13
|
+
|
|
14
|
+
if (form === undefined) {
|
|
15
|
+
form = {
|
|
16
|
+
errors: {},
|
|
17
|
+
getID(name) {
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
return {form};
|
|
23
|
+
},
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
<template>
|
|
27
|
+
<textarea
|
|
28
|
+
:name="name"
|
|
29
|
+
v-model="form[this.name]"
|
|
30
|
+
:class="{'is-invalid': form?.errors[name] !== undefined}"
|
|
31
|
+
:disabled="form?.processing"
|
|
32
|
+
class="form-control"></textarea>
|
|
33
|
+
</template>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import {inject} from "vue";
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
props: {
|
|
6
|
+
name: {
|
|
7
|
+
type: String,
|
|
8
|
+
required: true,
|
|
9
|
+
},
|
|
10
|
+
},
|
|
11
|
+
setup(props) {
|
|
12
|
+
let form = inject('form');
|
|
13
|
+
|
|
14
|
+
if (form === undefined) {
|
|
15
|
+
form = {
|
|
16
|
+
errors: {},
|
|
17
|
+
getID(name) {
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
return {form};
|
|
23
|
+
},
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
<template>
|
|
27
|
+
<input
|
|
28
|
+
:name="name"
|
|
29
|
+
v-model="form[this.name]"
|
|
30
|
+
:class="{'is-invalid': form?.errors[name] !== undefined}"
|
|
31
|
+
:disabled="form?.processing"
|
|
32
|
+
type="text"
|
|
33
|
+
class="form-control">
|
|
34
|
+
</template>
|
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
export default [{"country": "Afghanistan", "code": "93", "iso": "AF"},
|
|
2
|
+
{"country": "Albania", "code": "355", "iso": "AL"},
|
|
3
|
+
{"country": "Algeria", "code": "213", "iso": "DZ"},
|
|
4
|
+
{"country": "American Samoa", "code": "1-684", "iso": "AS"},
|
|
5
|
+
{"country": "Andorra", "code": "376", "iso": "AD"},
|
|
6
|
+
{"country": "Angola", "code": "244", "iso": "AO"},
|
|
7
|
+
{"country": "Anguilla", "code": "1-264", "iso": "AI"},
|
|
8
|
+
{"country": "Antarctica", "code": "672", "iso": "AQ"},
|
|
9
|
+
{"country": "Antigua and Barbuda", "code": "1-268", "iso": "AG"},
|
|
10
|
+
{"country": "Argentina", "code": "54", "iso": "AR"},
|
|
11
|
+
{"country": "Armenia", "code": "374", "iso": "AM"},
|
|
12
|
+
{"country": "Aruba", "code": "297", "iso": "AW"},
|
|
13
|
+
{"country": "Australia", "code": "61", "iso": "AU"},
|
|
14
|
+
{"country": "Austria", "code": "43", "iso": "AT"},
|
|
15
|
+
{"country": "Azerbaijan", "code": "994", "iso": "AZ"},
|
|
16
|
+
{"country": "Bahamas", "code": "1-242", "iso": "BS"},
|
|
17
|
+
{"country": "Bahrain", "code": "973", "iso": "BH"},
|
|
18
|
+
{"country": "Bangladesh", "code": "880", "iso": "BD"},
|
|
19
|
+
{"country": "Barbados", "code": "1-246", "iso": "BB"},
|
|
20
|
+
{"country": "Belarus", "code": "375", "iso": "BY"},
|
|
21
|
+
{"country": "Belgium", "code": "32", "iso": "BE"},
|
|
22
|
+
{"country": "Belize", "code": "501", "iso": "BZ"},
|
|
23
|
+
{"country": "Benin", "code": "229", "iso": "BJ"},
|
|
24
|
+
{"country": "Bermuda", "code": "1-441", "iso": "BM"},
|
|
25
|
+
{"country": "Bhutan", "code": "975", "iso": "BT"},
|
|
26
|
+
{"country": "Bolivia", "code": "591", "iso": "BO"},
|
|
27
|
+
{"country": "Bosnia and Herzegovina", "code": "387", "iso": "BA"},
|
|
28
|
+
{"country": "Botswana", "code": "267", "iso": "BW"},
|
|
29
|
+
{"country": "Brazil", "code": "55", "iso": "BR"},
|
|
30
|
+
{"country": "British Indian Ocean Territory", "code": "246", "iso": "IO"},
|
|
31
|
+
{"country": "British Virgin Islands", "code": "1-284", "iso": "VG"},
|
|
32
|
+
{"country": "Brunei", "code": "673", "iso": "BN"},
|
|
33
|
+
{"country": "Bulgaria", "code": "359", "iso": "BG"},
|
|
34
|
+
{"country": "Burkina Faso", "code": "226", "iso": "BF"},
|
|
35
|
+
{"country": "Burundi", "code": "257", "iso": "BI"},
|
|
36
|
+
{"country": "Cambodia", "code": "855", "iso": "KH"},
|
|
37
|
+
{"country": "Cameroon", "code": "237", "iso": "CM"},
|
|
38
|
+
{"country": "Canada", "code": "1", "iso": "CA"},
|
|
39
|
+
{"country": "Cape Verde", "code": "238", "iso": "CV"},
|
|
40
|
+
{"country": "Cayman Islands", "code": "1-345", "iso": "KY"},
|
|
41
|
+
{"country": "Central African Republic", "code": "236", "iso": "CF"},
|
|
42
|
+
{"country": "Chad", "code": "235", "iso": "TD"},
|
|
43
|
+
{"country": "Chile", "code": "56", "iso": "CL"},
|
|
44
|
+
{"country": "China", "code": "86", "iso": "CN"},
|
|
45
|
+
{"country": "Christmas Island", "code": "61", "iso": "CX"},
|
|
46
|
+
{"country": "Cocos Islands", "code": "61", "iso": "CC"},
|
|
47
|
+
{"country": "Colombia", "code": "57", "iso": "CO"},
|
|
48
|
+
{"country": "Comoros", "code": "269", "iso": "KM"},
|
|
49
|
+
{"country": "Cook Islands", "code": "682", "iso": "CK"},
|
|
50
|
+
{"country": "Costa Rica", "code": "506", "iso": "CR"},
|
|
51
|
+
{"country": "Croatia", "code": "385", "iso": "HR"},
|
|
52
|
+
{"country": "Cuba", "code": "53", "iso": "CU"},
|
|
53
|
+
{"country": "Curacao", "code": "599", "iso": "CW"},
|
|
54
|
+
{"country": "Cyprus", "code": "357", "iso": "CY"},
|
|
55
|
+
{"country": "Czech Republic", "code": "420", "iso": "CZ"},
|
|
56
|
+
{"country": "Democratic Republic of the Congo", "code": "243", "iso": "CD"},
|
|
57
|
+
{"country": "Denmark", "code": "45", "iso": "DK"},
|
|
58
|
+
{"country": "Djibouti", "code": "253", "iso": "DJ"},
|
|
59
|
+
{"country": "Dominica", "code": "1-767", "iso": "DM"},
|
|
60
|
+
{"country": "Dominican Republic", "code": "1-809, 1-829, 1-849", "iso": "DO"},
|
|
61
|
+
{"country": "East Timor", "code": "670", "iso": "TL"},
|
|
62
|
+
{"country": "Ecuador", "code": "593", "iso": "EC"},
|
|
63
|
+
{"country": "Egypt", "code": "20", "iso": "EG"},
|
|
64
|
+
{"country": "El Salvador", "code": "503", "iso": "SV"},
|
|
65
|
+
{"country": "Equatorial Guinea", "code": "240", "iso": "GQ"},
|
|
66
|
+
{"country": "Eritrea", "code": "291", "iso": "ER"},
|
|
67
|
+
{"country": "Estonia", "code": "372", "iso": "EE"},
|
|
68
|
+
{"country": "Ethiopia", "code": "251", "iso": "ET"},
|
|
69
|
+
{"country": "Falkland Islands", "code": "500", "iso": "FK"},
|
|
70
|
+
{"country": "Faroe Islands", "code": "298", "iso": "FO"},
|
|
71
|
+
{"country": "Fiji", "code": "679", "iso": "FJ"},
|
|
72
|
+
{"country": "Finland", "code": "358", "iso": "FI"},
|
|
73
|
+
{"country": "France", "code": "33", "iso": "FR"},
|
|
74
|
+
{"country": "French Polynesia", "code": "689", "iso": "PF"},
|
|
75
|
+
{"country": "Gabon", "code": "241", "iso": "GA"},
|
|
76
|
+
{"country": "Gambia", "code": "220", "iso": "GM"},
|
|
77
|
+
{"country": "Georgia", "code": "995", "iso": "GE"},
|
|
78
|
+
{"country": "Germany", "code": "49", "iso": "DE"},
|
|
79
|
+
{"country": "Ghana", "code": "233", "iso": "GH"},
|
|
80
|
+
{"country": "Gibraltar", "code": "350", "iso": "GI"},
|
|
81
|
+
{"country": "Greece", "code": "30", "iso": "GR"},
|
|
82
|
+
{"country": "Greenland", "code": "299", "iso": "GL"},
|
|
83
|
+
{"country": "Grenada", "code": "1-473", "iso": "GD"},
|
|
84
|
+
{"country": "Guam", "code": "1-671", "iso": "GU"},
|
|
85
|
+
{"country": "Guatemala", "code": "502", "iso": "GT"},
|
|
86
|
+
{"country": "Guernsey", "code": "44-1481", "iso": "GG"},
|
|
87
|
+
{"country": "Guinea", "code": "224", "iso": "GN"},
|
|
88
|
+
{"country": "Guinea-Bissau", "code": "245", "iso": "GW"},
|
|
89
|
+
{"country": "Guyana", "code": "592", "iso": "GY"},
|
|
90
|
+
{"country": "Haiti", "code": "509", "iso": "HT"},
|
|
91
|
+
{"country": "Honduras", "code": "504", "iso": "HN"},
|
|
92
|
+
{"country": "Hong Kong", "code": "852", "iso": "HK"},
|
|
93
|
+
{"country": "Hungary", "code": "36", "iso": "HU"},
|
|
94
|
+
{"country": "Iceland", "code": "354", "iso": "IS"},
|
|
95
|
+
{"country": "India", "code": "91", "iso": "IN"},
|
|
96
|
+
{"country": "Indonesia", "code": "62", "iso": "ID"},
|
|
97
|
+
{"country": "ایران", "code": "98", "iso": "IR"},
|
|
98
|
+
{"country": "Iraq", "code": "964", "iso": "IQ"},
|
|
99
|
+
{"country": "Ireland", "code": "353", "iso": "IE"},
|
|
100
|
+
{"country": "Isle of Man", "code": "44-1624", "iso": "IM"},
|
|
101
|
+
{"country": "Israel", "code": "972", "iso": "IL"},
|
|
102
|
+
{"country": "Italy", "code": "39", "iso": "IT"},
|
|
103
|
+
{"country": "Ivory Coast", "code": "225", "iso": "CI"},
|
|
104
|
+
{"country": "Jamaica", "code": "1-876", "iso": "JM"},
|
|
105
|
+
{"country": "Japan", "code": "81", "iso": "JP"},
|
|
106
|
+
{"country": "Jersey", "code": "44-1534", "iso": "JE"},
|
|
107
|
+
{"country": "Jordan", "code": "962", "iso": "JO"},
|
|
108
|
+
{"country": "Kazakhstan", "code": "7", "iso": "KZ"},
|
|
109
|
+
{"country": "Kenya", "code": "254", "iso": "KE"},
|
|
110
|
+
{"country": "Kiribati", "code": "686", "iso": "KI"},
|
|
111
|
+
{"country": "Kosovo", "code": "383", "iso": "XK"},
|
|
112
|
+
{"country": "Kuwait", "code": "965", "iso": "KW"},
|
|
113
|
+
{"country": "Kyrgyzstan", "code": "996", "iso": "KG"},
|
|
114
|
+
{"country": "Laos", "code": "856", "iso": "LA"},
|
|
115
|
+
{"country": "Latvia", "code": "371", "iso": "LV"},
|
|
116
|
+
{"country": "Lebanon", "code": "961", "iso": "LB"},
|
|
117
|
+
{"country": "Lesotho", "code": "266", "iso": "LS"},
|
|
118
|
+
{"country": "Liberia", "code": "231", "iso": "LR"},
|
|
119
|
+
{"country": "Libya", "code": "218", "iso": "LY"},
|
|
120
|
+
{"country": "Liechtenstein", "code": "423", "iso": "LI"},
|
|
121
|
+
{"country": "Lithuania", "code": "370", "iso": "LT"},
|
|
122
|
+
{"country": "Luxembourg", "code": "352", "iso": "LU"},
|
|
123
|
+
{"country": "Macao", "code": "853", "iso": "MO"},
|
|
124
|
+
{"country": "Macedonia", "code": "389", "iso": "MK"},
|
|
125
|
+
{"country": "Madagascar", "code": "261", "iso": "MG"},
|
|
126
|
+
{"country": "Malawi", "code": "265", "iso": "MW"},
|
|
127
|
+
{"country": "Malaysia", "code": "60", "iso": "MY"},
|
|
128
|
+
{"country": "Maldives", "code": "960", "iso": "MV"},
|
|
129
|
+
{"country": "Mali", "code": "223", "iso": "ML"},
|
|
130
|
+
{"country": "Malta", "code": "356", "iso": "MT"},
|
|
131
|
+
{"country": "Marshall Islands", "code": "692", "iso": "MH"},
|
|
132
|
+
{"country": "Mauritania", "code": "222", "iso": "MR"},
|
|
133
|
+
{"country": "Mauritius", "code": "230", "iso": "MU"},
|
|
134
|
+
{"country": "Mayotte", "code": "262", "iso": "YT"},
|
|
135
|
+
{"country": "Mexico", "code": "52", "iso": "MX"},
|
|
136
|
+
{"country": "Micronesia", "code": "691", "iso": "FM"},
|
|
137
|
+
{"country": "Moldova", "code": "373", "iso": "MD"},
|
|
138
|
+
{"country": "Monaco", "code": "377", "iso": "MC"},
|
|
139
|
+
{"country": "Mongolia", "code": "976", "iso": "MN"},
|
|
140
|
+
{"country": "Montenegro", "code": "382", "iso": "ME"},
|
|
141
|
+
{"country": "Montserrat", "code": "1-664", "iso": "MS"},
|
|
142
|
+
{"country": "Morocco", "code": "212", "iso": "MA"},
|
|
143
|
+
{"country": "Mozambique", "code": "258", "iso": "MZ"},
|
|
144
|
+
{"country": "Myanmar", "code": "95", "iso": "MM"},
|
|
145
|
+
{"country": "Namibia", "code": "264", "iso": "NA"},
|
|
146
|
+
{"country": "Nauru", "code": "674", "iso": "NR"},
|
|
147
|
+
{"country": "Nepal", "code": "977", "iso": "NP"},
|
|
148
|
+
{"country": "Netherlands", "code": "31", "iso": "NL"},
|
|
149
|
+
{"country": "Netherlands Antilles", "code": "599", "iso": "AN"},
|
|
150
|
+
{"country": "New Caledonia", "code": "687", "iso": "NC"},
|
|
151
|
+
{"country": "New Zealand", "code": "64", "iso": "NZ"},
|
|
152
|
+
{"country": "Nicaragua", "code": "505", "iso": "NI"},
|
|
153
|
+
{"country": "Niger", "code": "227", "iso": "NE"},
|
|
154
|
+
{"country": "Nigeria", "code": "234", "iso": "NG"},
|
|
155
|
+
{"country": "Niue", "code": "683", "iso": "NU"},
|
|
156
|
+
{"country": "North Korea", "code": "850", "iso": "KP"},
|
|
157
|
+
{"country": "Northern Mariana Islands", "code": "1-670", "iso": "MP"},
|
|
158
|
+
{"country": "Norway", "code": "47", "iso": "NO"},
|
|
159
|
+
{"country": "Oman", "code": "968", "iso": "OM"},
|
|
160
|
+
{"country": "Pakistan", "code": "92", "iso": "PK"},
|
|
161
|
+
{"country": "Palau", "code": "680", "iso": "PW"},
|
|
162
|
+
{"country": "Palestine", "code": "970", "iso": "PS"},
|
|
163
|
+
{"country": "Panama", "code": "507", "iso": "PA"},
|
|
164
|
+
{"country": "Papua New Guinea", "code": "675", "iso": "PG"},
|
|
165
|
+
{"country": "Paraguay", "code": "595", "iso": "PY"},
|
|
166
|
+
{"country": "Peru", "code": "51", "iso": "PE"},
|
|
167
|
+
{"country": "Philippines", "code": "63", "iso": "PH"},
|
|
168
|
+
{"country": "Pitcairn", "code": "64", "iso": "PN"},
|
|
169
|
+
{"country": "Poland", "code": "48", "iso": "PL"},
|
|
170
|
+
{"country": "Portugal", "code": "351", "iso": "PT"},
|
|
171
|
+
{"country": "Puerto Rico", "code": "1-787, 1-939", "iso": "PR"},
|
|
172
|
+
{"country": "Qatar", "code": "974", "iso": "QA"},
|
|
173
|
+
{"country": "Republic of the Congo", "code": "242", "iso": "CG"},
|
|
174
|
+
{"country": "Reunion", "code": "262", "iso": "RE"},
|
|
175
|
+
{"country": "Romania", "code": "40", "iso": "RO"},
|
|
176
|
+
{"country": "Russia", "code": "7", "iso": "RU"},
|
|
177
|
+
{"country": "Rwanda", "code": "250", "iso": "RW"},
|
|
178
|
+
{"country": "Saint Barthelemy", "code": "590", "iso": "BL"},
|
|
179
|
+
{"country": "Saint Helena", "code": "290", "iso": "SH"},
|
|
180
|
+
{"country": "Saint Kitts and Nevis", "code": "1-869", "iso": "KN"},
|
|
181
|
+
{"country": "Saint Lucia", "code": "1-758", "iso": "LC"},
|
|
182
|
+
{"country": "Saint Martin", "code": "590", "iso": "MF"},
|
|
183
|
+
{"country": "Saint Pierre and Miquelon", "code": "508", "iso": "PM"},
|
|
184
|
+
{"country": "Saint Vincent and the Grenadines", "code": "1-784", "iso": "VC"},
|
|
185
|
+
{"country": "Samoa", "code": "685", "iso": "WS"},
|
|
186
|
+
{"country": "San Marino", "code": "378", "iso": "SM"},
|
|
187
|
+
{"country": "Sao Tome and Principe", "code": "239", "iso": "ST"},
|
|
188
|
+
{"country": "Saudi Arabia", "code": "966", "iso": "SA"},
|
|
189
|
+
{"country": "Senegal", "code": "221", "iso": "SN"},
|
|
190
|
+
{"country": "Serbia", "code": "381", "iso": "RS"},
|
|
191
|
+
{"country": "Seychelles", "code": "248", "iso": "SC"},
|
|
192
|
+
{"country": "Sierra Leone", "code": "232", "iso": "SL"},
|
|
193
|
+
{"country": "Singapore", "code": "65", "iso": "SG"},
|
|
194
|
+
{"country": "Sint Maarten", "code": "1-721", "iso": "SX"},
|
|
195
|
+
{"country": "Slovakia", "code": "421", "iso": "SK"},
|
|
196
|
+
{"country": "Slovenia", "code": "386", "iso": "SI"},
|
|
197
|
+
{"country": "Solomon Islands", "code": "677", "iso": "SB"},
|
|
198
|
+
{"country": "Somalia", "code": "252", "iso": "SO"},
|
|
199
|
+
{"country": "South Africa", "code": "27", "iso": "ZA"},
|
|
200
|
+
{"country": "South Korea", "code": "82", "iso": "KR"},
|
|
201
|
+
{"country": "South Sudan", "code": "211", "iso": "SS"},
|
|
202
|
+
{"country": "Spain", "code": "34", "iso": "ES"},
|
|
203
|
+
{"country": "Sri Lanka", "code": "94", "iso": "LK"},
|
|
204
|
+
{"country": "Sudan", "code": "249", "iso": "SD"},
|
|
205
|
+
{"country": "Suriname", "code": "597", "iso": "SR"},
|
|
206
|
+
{"country": "Svalbard and Jan Mayen", "code": "47", "iso": "SJ"},
|
|
207
|
+
{"country": "Swaziland", "code": "268", "iso": "SZ"},
|
|
208
|
+
{"country": "Sweden", "code": "46", "iso": "SE"},
|
|
209
|
+
{"country": "Switzerland", "code": "41", "iso": "CH"},
|
|
210
|
+
{"country": "Syria", "code": "963", "iso": "SY"},
|
|
211
|
+
{"country": "Taiwan", "code": "886", "iso": "TW"},
|
|
212
|
+
{"country": "Tajikistan", "code": "992", "iso": "TJ"},
|
|
213
|
+
{"country": "Tanzania", "code": "255", "iso": "TZ"},
|
|
214
|
+
{"country": "Thailand", "code": "66", "iso": "TH"},
|
|
215
|
+
{"country": "Togo", "code": "228", "iso": "TG"},
|
|
216
|
+
{"country": "Tokelau", "code": "690", "iso": "TK"},
|
|
217
|
+
{"country": "Tonga", "code": "676", "iso": "TO"},
|
|
218
|
+
{"country": "Trinidad and Tobago", "code": "1-868", "iso": "TT"},
|
|
219
|
+
{"country": "Tunisia", "code": "216", "iso": "TN"},
|
|
220
|
+
{"country": "Turkey", "code": "90", "iso": "TR"},
|
|
221
|
+
{"country": "Turkmenistan", "code": "993", "iso": "TM"},
|
|
222
|
+
{"country": "Turks and Caicos Islands", "code": "1-649", "iso": "TC"},
|
|
223
|
+
{"country": "Tuvalu", "code": "688", "iso": "TV"},
|
|
224
|
+
{"country": "U.S. Virgin Islands", "code": "1-340", "iso": "VI"},
|
|
225
|
+
{"country": "Uganda", "code": "256", "iso": "UG"},
|
|
226
|
+
{"country": "Ukraine", "code": "380", "iso": "UA"},
|
|
227
|
+
{"country": "United Arab Emirates", "code": "971", "iso": "AE"},
|
|
228
|
+
{"country": "United Kingdom", "code": "44", "iso": "GB"},
|
|
229
|
+
{"country": "United States", "code": "1", "iso": "US"},
|
|
230
|
+
{"country": "Uruguay", "code": "598", "iso": "UY"},
|
|
231
|
+
{"country": "Uzbekistan", "code": "998", "iso": "UZ"},
|
|
232
|
+
{"country": "Vanuatu", "code": "678", "iso": "VU"},
|
|
233
|
+
{"country": "Vatican", "code": "379", "iso": "VA"},
|
|
234
|
+
{"country": "Venezuela", "code": "58", "iso": "VE"},
|
|
235
|
+
{"country": "Vietnam", "code": "84", "iso": "VN"},
|
|
236
|
+
{"country": "Wallis and Futuna", "code": "681", "iso": "WF"},
|
|
237
|
+
{"country": "Western Sahara", "code": "212", "iso": "EH"},
|
|
238
|
+
{"country": "Yemen", "code": "967", "iso": "YE"},
|
|
239
|
+
{"country": "Zambia", "code": "260", "iso": "ZM"},
|
|
240
|
+
{"country": "Zimbabwe", "code": "263", "iso": "ZW"}
|
|
241
|
+
];
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import "leaflet/dist/leaflet.css";
|
|
3
|
+
import {LMap, LTileLayer, LMarker} from "@vue-leaflet/vue-leaflet";
|
|
4
|
+
import {inject} from "vue";
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
components: {
|
|
8
|
+
LMap, LTileLayer, LMarker
|
|
9
|
+
},
|
|
10
|
+
props: {
|
|
11
|
+
name: {
|
|
12
|
+
type: String,
|
|
13
|
+
default: 'location',
|
|
14
|
+
required: false,
|
|
15
|
+
},
|
|
16
|
+
disabled: {
|
|
17
|
+
type: [Boolean, String],
|
|
18
|
+
default: false,
|
|
19
|
+
},
|
|
20
|
+
modelValue: Object,
|
|
21
|
+
},
|
|
22
|
+
setup(props) {
|
|
23
|
+
let form = inject('form');
|
|
24
|
+
|
|
25
|
+
if (form === undefined) {
|
|
26
|
+
form = {
|
|
27
|
+
errors: {},
|
|
28
|
+
zoom: 8,
|
|
29
|
+
center: [47.41322, -1.219482],
|
|
30
|
+
getID(name) {
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return {form};
|
|
36
|
+
},
|
|
37
|
+
methods: {
|
|
38
|
+
setMarker(event) {
|
|
39
|
+
this.marker = {
|
|
40
|
+
lat: event?.latlng?.lat || event?.target?._latlng?.lat,
|
|
41
|
+
lng: event?.latlng?.lng || event?.target?._latlng?.lng,
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
this.$emit('update:modelValue', this.marker);
|
|
45
|
+
this.form[this.name] = this.marker;
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
data() {
|
|
49
|
+
return {
|
|
50
|
+
zoom: 13,
|
|
51
|
+
marker: {
|
|
52
|
+
lat: this.modelValue?.lat || this.form[this.name]?.lat || null,
|
|
53
|
+
lng: this.modelValue?.lng || this.form[this.name]?.lng || null,
|
|
54
|
+
},
|
|
55
|
+
center: {
|
|
56
|
+
lat: this.modelValue?.lat || this.form[this.name]?.lat || 35.69293,
|
|
57
|
+
lng: this.modelValue?.lng || this.form[this.name]?.lng || 51.36372,
|
|
58
|
+
},
|
|
59
|
+
};
|
|
60
|
+
},
|
|
61
|
+
|
|
62
|
+
}
|
|
63
|
+
</script>
|
|
64
|
+
<template>
|
|
65
|
+
<div class="location-map-container" :class="{disabled: disabled || form.processing, 'is-invalid': form?.errors[name] !== undefined}">
|
|
66
|
+
<l-map ref="map" v-model:zoom="zoom" :useGlobalLeaflet="false" :center="this.center" @click="setMarker">
|
|
67
|
+
<l-tile-layer
|
|
68
|
+
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
69
|
+
layer-type="base"
|
|
70
|
+
name="OpenStreetMap"
|
|
71
|
+
></l-tile-layer>
|
|
72
|
+
<LMarker :lat-lng="marker" v-if="marker" :draggable="true" @dragend="setMarker"/>
|
|
73
|
+
</l-map>
|
|
74
|
+
</div>
|
|
75
|
+
</template>
|
|
76
|
+
<style>
|
|
77
|
+
.location-map-container {
|
|
78
|
+
position: relative;
|
|
79
|
+
width: 100%;
|
|
80
|
+
height: 300px;
|
|
81
|
+
overflow: hidden;
|
|
82
|
+
border-radius: var(--bs-border-radius);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.location-map-container.is-invalid {
|
|
86
|
+
border: 1px solid var(--bs-form-invalid-border-color);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.location-map-container[disabled],
|
|
90
|
+
.location-map-container.disabled:before {
|
|
91
|
+
content: "";
|
|
92
|
+
background-color: rgba(var(--bs-light-rgb), 0.4);
|
|
93
|
+
display: block;
|
|
94
|
+
position: absolute;
|
|
95
|
+
top: 0;
|
|
96
|
+
right: 0;
|
|
97
|
+
left: 0;
|
|
98
|
+
bottom: 0;
|
|
99
|
+
z-index: 9999;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.location-map-container {
|
|
103
|
+
.leaflet-pane,
|
|
104
|
+
.leaflet-tile,
|
|
105
|
+
.leaflet-marker-icon,
|
|
106
|
+
.leaflet-marker-shadow,
|
|
107
|
+
.leaflet-tile-container,
|
|
108
|
+
.leaflet-pane > svg,
|
|
109
|
+
.leaflet-pane > canvas,
|
|
110
|
+
.leaflet-zoom-box,
|
|
111
|
+
.leaflet-image-layer,
|
|
112
|
+
.leaflet-layer {
|
|
113
|
+
left: auto;
|
|
114
|
+
right: 0;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.leaflet-control-attribution.leaflet-control {
|
|
118
|
+
display: none;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
</style>
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "inertia-bootstrap-forms",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Create bootstrap forms with inertia and twitter bootstrap",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"author": "NovinVision",
|
|
10
|
+
"license": "ISC",
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "git+https://github.com/novinvision/inertia-bootstrap-forms.git"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [
|
|
16
|
+
"inertia",
|
|
17
|
+
"vue",
|
|
18
|
+
"laravel",
|
|
19
|
+
"bootstrap",
|
|
20
|
+
"forms"
|
|
21
|
+
],
|
|
22
|
+
"dependencies": {
|
|
23
|
+
"vue": "^3.0.0",
|
|
24
|
+
"vue-select": "^4.0.0-beta.6"
|
|
25
|
+
},
|
|
26
|
+
"bugs": {
|
|
27
|
+
"url": "https://github.com/novinvision/inertia-bootstrap-forms/issues"
|
|
28
|
+
},
|
|
29
|
+
"homepage": "https://github.com/novinvision/inertia-bootstrap-forms#readme"
|
|
30
|
+
}
|