mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-20 21:15:01 +00:00
4368bdb2bc
* feat: Form select component to use with onboarding form * Update Select.vue * Update WithLabel.vue
58 lines
1.1 KiB
Vue
58 lines
1.1 KiB
Vue
<template>
|
|
<div class="space-y-1">
|
|
<label
|
|
v-if="label"
|
|
:for="name"
|
|
class="flex justify-between text-sm font-medium leading-6 text-slate-900 dark:text-white"
|
|
:class="{ 'text-red-500': hasError }"
|
|
>
|
|
<slot name="label">
|
|
{{ label }}
|
|
</slot>
|
|
</label>
|
|
<div class="w-full">
|
|
<div class="flex items-center relative w-full">
|
|
<fluent-icon
|
|
v-if="icon"
|
|
size="16"
|
|
:icon="icon"
|
|
class="absolute left-2 transform text-slate-400 dark:text-slate-600 w-5 h-5"
|
|
/>
|
|
<slot />
|
|
</div>
|
|
<span
|
|
v-if="errorMessage && hasError"
|
|
class="text-xs text-red-400 leading-2"
|
|
>
|
|
{{ errorMessage }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
hasError: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
errorMessage: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
};
|
|
</script>
|