inertia-bootstrap-forms 1.0.96 → 1.0.97

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 +90 -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.97",
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,126 @@ 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;
78
95
  }
79
96
 
80
97
  .telephone-input .vti__input.vti__phone {
81
- padding-right: 3rem;
98
+ padding-right: 4rem;
82
99
  }
83
100
 
84
101
  .telephone-input .vti__dropdown-list {
85
- left: auto;
86
- right: 0;
102
+ padding: 0 !important;
103
+ left: auto;
104
+ right: 0;
87
105
  }
88
106
 
89
107
  .telephone-input .vti__dropdown-list .vti__dropdown-item {
90
- direction: rtl;
91
- text-align: right;
108
+ direction: rtl;
109
+ text-align: right;
92
110
  }
93
111
 
94
112
  .telephone-input .vti__dropdown-list .vti__dropdown-item strong {
95
- font-weight: normal;
113
+ font-weight: normal;
96
114
  }
97
115
 
98
116
  .telephone-input .vti__selection {
99
- font-size: inherit;
117
+ font-size: inherit;
100
118
  }
101
119
 
102
- .telephone-input .form-control.is-invalid{
103
- padding-right: 0.75rem;
104
- background-position: left calc(0.425em + 0.25rem) center;
120
+ .telephone-input .form-control.is-invalid {
121
+ padding-right: 0.75rem;
122
+ background-position: left calc(0.425em + 0.25rem) center;
105
123
  }
124
+
125
+ .telephone-input .vti__dropdown-arrow {
126
+ margin: 0 4px;
127
+ }
128
+
106
129
  </style>