8066b36ebf
--------- Co-authored-by: Pranav <pranavrajs@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
64 lines
1.1 KiB
Vue
64 lines
1.1 KiB
Vue
<script setup>
|
|
import { defineProps, defineModel } from 'vue';
|
|
import WithLabel from './WithLabel.vue';
|
|
|
|
defineProps({
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
hasError: Boolean,
|
|
errorMessage: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
spacing: {
|
|
type: String,
|
|
default: 'base',
|
|
validator: value => ['base', 'compact'].includes(value),
|
|
},
|
|
});
|
|
|
|
defineOptions({
|
|
inheritAttrs: false,
|
|
});
|
|
|
|
const model = defineModel({
|
|
type: [String, Number],
|
|
required: true,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<WithLabel
|
|
:label="label"
|
|
:icon="icon"
|
|
:name="name"
|
|
:has-error="hasError"
|
|
:error-message="errorMessage"
|
|
>
|
|
<template #rightOfLabel>
|
|
<slot />
|
|
</template>
|
|
<input
|
|
v-bind="$attrs"
|
|
v-model="model"
|
|
type="text"
|
|
:class="{
|
|
error: hasError,
|
|
'px-3 py-3': spacing === 'base',
|
|
'px-3 py-2 mb-0': spacing === 'compact',
|
|
'pl-9': icon,
|
|
}"
|
|
/>
|
|
</WithLabel>
|
|
</template>
|