scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-01 11:37:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Form input component to use with onboarding form (#8850)

Browse Source 
* feat: Form input component to use with onboarding form

* Update Input.vue

* Update WithLabel.vue

* Review fixes
This commit is contained in:
Nithin David Thomas
2024-02-05 10:17:06 -08:00
committed by GitHub
parent bb3851a35c
commit 65e9cee019
1 changed files with 42 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
app/javascript/v3/components/Form/Input.vue
View File

@@ -1,44 +1,40 @@
<template>
<div>
<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 }"
>
{{ label }}
<slot />
</label>
<div class="mt-1">
<input
:id="name"
:name="name"
:type="type"
autocomplete="off"
:required="required"
:placeholder="placeholder"
:data-testid="dataTestid"
:value="value"
:class="{
'focus:ring-red-600 ring-red-600': hasError,
'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
!hasError,
}"
class="block w-full rounded-md border-0 px-3 py-3 appearance-none shadow-sm ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 outline-none dark:bg-slate-700"
@input="onInput"
@blur="$emit('blur')"
/>
<span
v-if="errorMessage && hasError"
class="text-xs leading-2 text-red-400"
>
{{ errorMessage }}
</span>
</div>
</div>
<with-label
:label="label"
:icon="icon"
:name="name"
:has-error="hasError"
:error-message="errorMessage"
>
<input
:id="name"
:name="name"
:type="type"
autocomplete="off"
:required="required"
:placeholder="placeholder"
:data-testid="dataTestid"
:value="value"
:class="{
'focus:ring-red-600 ring-red-600': hasError,
'dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200':
!hasError,
'px-3 py-3': spacing === 'base',
'px-3 py-2 mb-0': spacing === 'compact',
'pl-9': icon,
}"
class="block w-full border-none rounded-xl shadow-sm appearance-none outline outline-1 outline-slate-200 dark:outline-slate-800 focus:outline-none focus:outline-0 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-800"
@input="onInput"
@blur="$emit('blur')"
/>
</with-label>
</template>
<script>
import WithLabel from './WithLabel.vue';
export default {
components: {
WithLabel,
},
props: {
label: {
type: String,
@@ -64,6 +60,10 @@ export default {
type: [String, Number],
default: '',
},
icon: {
type: String,
default: '',
},
hasError: {
type: Boolean,
default: false,
@@ -76,6 +76,11 @@ export default {
type: String,
default: '',
},
spacing: {
type: String,
default: 'base',
validator: value => ['base', 'compact'].includes(value),
},
},
methods: {
onInput(e) {