inertia-bootstrap-forms 1.0.96 → 1.0.98

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.
Files changed (7) hide show
  1. package/dist/{index-44pMAgyY.js → index-CjvHl4SS.js} +1 -1
  2. package/dist/{index-CB9UGQcm.js → index-DAKDc7eT.js} +4 -1
  3. package/dist/inertia-bootstrap-forms.es.js +1 -1
  4. package/dist/inertia-bootstrap-forms.umd.js +1 -1
  5. package/dist/style.css +1 -1
  6. package/package.json +1 -1
  7. package/src/TelInput.vue +91 -67
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "inertia-bootstrap-forms",
3
- "version": "1.0.96",
3
+ "version": "1.0.98",
4
4
  "description": "Create bootstrap forms with inertia and twitter bootstrap",
5
5
  "main": "dist/inertia-bootstrap-forms.cjs.js",
6
6
  "module": "dist/inertia-bootstrap-forms.es.js",
package/src/TelInput.vue CHANGED
@@ -4,103 +4,127 @@ import 'vue-tel-input/vue-tel-input.css';
4
4
  import {defineComponent, inject} from "vue";
5
5
 
6
6
  export default defineComponent({
7
- components: {
8
- VueTelInput
7
+ components: {
8
+ VueTelInput
9
+ },
10
+ props: {
11
+ name: {
12
+ type: String,
13
+ default: 'email',
14
+ required: true,
9
15
  },
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
- },
16
+ placeHolder: {
17
+ type: String,
18
+ default: '000 000 0000',
20
19
  },
21
- setup(props) {
22
- let form = inject('form');
20
+ },
21
+ setup(props) {
22
+ let form = inject('form');
23
23
 
24
- if (form === undefined) {
25
- form = {
26
- errors: {},
27
- getID(name) {
28
- }
29
- };
24
+ if (form === undefined) {
25
+ form = {
26
+ errors: {},
27
+ getID(name) {
30
28
  }
29
+ };
30
+ }
31
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
- }
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,
46
45
  }
46
+ }
47
47
  })
48
48
  </script>
49
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>
50
+ <div class="telephone-input input-group fanum" dir="ltr">
51
+ <vue-tel-input
52
+ mode="national"
53
+ :validCharactersOnly="true"
54
+ defaultCountry="ir"
55
+ :preferredCountries="['ir', 'us', 'tr', 'ca']"
56
+ :dropdownOptions="{
57
+ showDialCodeInList:true,
58
+ showDialCodeInSelection:true,
59
+ showSearchBox:true,
60
+ searchBoxPlaceholder:'Search...',
61
+ showFlags:false,
62
+ }"
63
+ @on-input="inputEvent"
64
+ :inputOptions="{
65
+ placeholder: placeHolder
66
+ }"
67
+ v-model="defaultValue"
68
+ :styleClasses="'form-control' + ((valid === false || form?.errors[name] !== undefined) ? ' is-invalid' : '')"/>
69
+ </div>
67
70
  </template>
68
71
  <style>
69
- .telephone-input {
72
+ .telephone-input .vue-tel-input {
73
+ border-color: var(--bs-border-color, #ccc);
74
+ border-width: var(--bs-border-width, 1px);
75
+ border-radius: var(--bs-border-radius, .5rem);
76
+ }
77
+
78
+ .telephone-input .vti__input.vti__search_box {
79
+ border: 0;
80
+ font-size: var(--bs-body-font-size, .9rem);
81
+ background: var(--bs-tertiary-bg, #eee);
82
+ border-radius: var(--bs-border-radius, .5rem);
83
+ }
84
+
85
+ .telephone-input .vti__search_box_container {
86
+ display: flex;
70
87
  }
71
88
 
72
89
  .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;
90
+ position: absolute;
91
+ top: 0;
92
+ right: 0;
93
+ bottom: 0;
94
+ border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
95
+ padding: 7px 7px 7px 0;
78
96
  }
79
97
 
80
98
  .telephone-input .vti__input.vti__phone {
81
- padding-right: 3rem;
99
+ padding-right: 4rem;
82
100
  }
83
101
 
84
102
  .telephone-input .vti__dropdown-list {
85
- left: auto;
86
- right: 0;
103
+ padding: 0 !important;
104
+ left: auto;
105
+ right: 0;
87
106
  }
88
107
 
89
108
  .telephone-input .vti__dropdown-list .vti__dropdown-item {
90
- direction: rtl;
91
- text-align: right;
109
+ direction: rtl;
110
+ text-align: right;
92
111
  }
93
112
 
94
113
  .telephone-input .vti__dropdown-list .vti__dropdown-item strong {
95
- font-weight: normal;
114
+ font-weight: normal;
96
115
  }
97
116
 
98
117
  .telephone-input .vti__selection {
99
- font-size: inherit;
118
+ font-size: inherit;
100
119
  }
101
120
 
102
- .telephone-input .form-control.is-invalid{
103
- padding-right: 0.75rem;
104
- background-position: left calc(0.425em + 0.25rem) center;
121
+ .telephone-input .form-control.is-invalid {
122
+ padding-right: 0.75rem;
123
+ background-position: left calc(0.425em + 0.25rem) center;
105
124
  }
125
+
126
+ .telephone-input .vti__dropdown-arrow {
127
+ margin: 0 4px;
128
+ }
129
+
106
130
  </style>