fix(component): add dense and outlined props

add dense and outlined props on both select and textfield

fix #21

README.md

@@ -178,6 +178,7 @@ Use the `vue-tel-input-vuetify` component:
   | `flat` | `Boolean` | `false` | Removes elevation (shadow) added to element when using the solo or solo-inverted props |
   | `light` | `Boolean` | `false` | Applies the light theme variant to the component. |
   | `validate-on-blur` | `Boolean` | `false` | Delays validation until blur event |
+  | `dense` | `Boolean` | `false` | Reduces the input height |
   | `outlined` | `Boolean` | `false` | Applies the outlined style to the input |
   | `persistent-hint` | `Boolean` | `false` | Forces hint to always be visible |
   | `readonly` | `Boolean` | `false` | Puts input in readonly state |

lib/vue-tel-input-vuetify.vue

@@ -7,6 +7,8 @@
         @change="onChangeCountryCode"
         :items="sortedCountries"
         :disabled="disabled"
+        :outlined="outlined"
+        :dense="dense"
         item-text="name"
         item-value="dialCode"
         return-object
@@ -41,6 +43,7 @@
       :light="light"
       :validate-on-blur="validateOnBlur"
       :outlined="outlined"
+      :dense="dense"
       :persistent-hint="persistentHint"
       :readonly="readonly"
       :error="error"
@@ -223,6 +226,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    dense: {
+      type: Boolean,
+      default: false,
+    },
     persistentHint: {
       type: Boolean,
       default: false,
@@ -740,9 +747,20 @@ export default {
     border-bottom: 1px solid #cacaca;
   }
 
-  .v-select__selections {
-    .vti__flag {
-      margin-left: 18px;
+  .v-text-field {
+    .v-select__selections {
+      position: relative;
+      .vti__flag {
+        position: absolute;
+        margin-left: 18px;
+      }
+    }
+    &--outlined {
+      .v-select__selections {
+        .vti__flag {
+          margin-left: auto;
+        }
+      }
     }
   }
 }

src/components/Example.vue

@@ -3,8 +3,10 @@
     <v-row justify="center">
       <v-col cols="6">
         <vue-tel-input-vuetify
+          outlined
           :preferred-countries="['id', 'gb', 'ua', 'us']"
           :valid-characters-only="true"
+          select-label="Code"
           @input="onInput"
         />
       </v-col>

src/lib/vue-tel-input-vuetify.vue

@@ -7,6 +7,8 @@
         @change="onChangeCountryCode"
         :items="sortedCountries"
         :disabled="disabled"
+        :outlined="outlined"
+        :dense="dense"
         item-text="name"
         item-value="dialCode"
         return-object
@@ -41,6 +43,7 @@
       :light="light"
       :validate-on-blur="validateOnBlur"
       :outlined="outlined"
+      :dense="dense"
       :persistent-hint="persistentHint"
       :readonly="readonly"
       :error="error"
@@ -223,6 +226,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    dense: {
+      type: Boolean,
+      default: false,
+    },
     persistentHint: {
       type: Boolean,
       default: false,
@@ -740,9 +747,20 @@ export default {
     border-bottom: 1px solid #cacaca;
   }
 
-  .v-select__selections {
-    .vti__flag {
-      margin-left: 18px;
+  .v-text-field {
+    .v-select__selections {
+      position: relative;
+      .vti__flag {
+        position: absolute;
+        margin-left: 18px;
+      }
+    }
+    &--outlined {
+      .v-select__selections {
+        .vti__flag {
+          margin-left: auto;
+        }
+      }
     }
   }
 }