vue-tel-input-vuetify icon indicating copy to clipboard operation
vue-tel-input-vuetify copied to clipboard

Add "persistent-placeholder" Prop

Open IOIIOOIO opened this issue 3 years ago • 1 comments

Is your feature request related to a problem? Please describe...

I can't use the persistent-placeholder prop, which is normally available for Vuetify inputs.

IOIIOOIO avatar Jan 03 '22 22:01 IOIIOOIO

After forking this repo and attempting to fix it myself I found that Vuetify needs to be updated to ^2.5. I'd be happy to assist but would need direction since I don't have the scope to know what the ramifications of the update could be.

For anyone else having this issue, I used the following CSS. This works for me since we use persistent-placeholder on all our inputs.

Globally, in a .scss file:

.v-text-field .v-label {
	transform: translateY(-18px) scale(0.81) !important;
}

Alternatively, you can do it scoped by wrapping the vue-tel-input-vuetify in Vue component:

<template>
	<vue-tel-input-vuetify class="c-tel-input"
				           v-bind="$attrs"
					   v-on="$listeners"
					   v-model="phone">
		<template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
			<slot :name="slot" v-bind="scope"/>
		</template>
	</vue-tel-input-vuetify>
</template>

<script>
	export default {
		name: "LTelInput"
	}
</script>

<style lang="scss" scoped>
	.c-tel-input {
		&::v-deep {
			.v-label {
				transform: translateY(-18px) scale(0.81) !important;
			}
		}
	}
</style>

Usage:

<l-tel-input  v-model="phone"></l-tel-input>

IOIIOOIO avatar Jan 04 '22 09:01 IOIIOOIO