LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Updates on new components (#10444)

Browse Source
This commit is contained in:
Sivin Varghese
2024-11-20 20:21:35 +05:30
committed by GitHub
parent 76a4140224
commit b0d6089bb6
33 changed files with 684 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/javascript/dashboard/components-next/input/Input.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { computed } from 'vue';
import { computed, ref, onMounted, nextTick } from 'vue';
const props = defineProps({
modelValue: {
type: [String, Number],
@@ -42,9 +42,22 @@ const props = defineProps({
type: String,
default: '',
},
autofocus: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['update:modelValue', 'blur', 'input']);
const emit = defineEmits([
'update:modelValue',
'blur',
'input',
'focus',
'enter',
]);
const isFocused = ref(false);
const inputRef = ref(null);
const messageClass = computed(() => {
switch (props.messageType) {
@@ -62,7 +75,7 @@ const inputBorderClass = computed(() => {
case 'error':
return 'border-n-ruby-8 dark:border-n-ruby-8 hover:border-n-ruby-9 dark:hover:border-n-ruby-9 disabled:border-n-ruby-8 dark:disabled:border-n-ruby-8';
default:
return 'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak';
return 'border-n-weak dark:border-n-weak hover:border-n-slate-6 dark:hover:border-n-slate-6 disabled:border-n-weak dark:disabled:border-n-weak focus:border-n-brand dark:focus:border-n-brand';
}
});
@@ -70,6 +83,28 @@ const handleInput = event => {
emit('update:modelValue', event.target.value);
emit('input', event);
};
const handleFocus = event => {
emit('focus', event);
isFocused.value = true;
};
const handleBlur = event => {
emit('blur', event);
isFocused.value = false;
};
const handleEnter = event => {
emit('enter', event);
};
onMounted(() => {
if (props.autofocus) {
nextTick(() => {
inputRef.value?.focus();
});
}
});
</script>
<template>
@@ -85,15 +120,25 @@ const handleInput = event => {
<slot name="prefix" />
<input
:id="id"
ref="inputRef"
:value="modelValue"
:class="[customInputClass, inputBorderClass]"
:class="[
customInputClass,
inputBorderClass,
{
error: messageType === 'error',
focus: isFocused,
},
]"
:type="type"
:placeholder="placeholder"
:disabled="disabled"
:min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 border rounded-lg focus:border-n-brand dark:focus:border-n-brand bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-11 dark:placeholder:text-n-slate-11 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 border rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
@input="handleInput"
@blur="emit('blur')"
@focus="handleFocus"
@blur="handleBlur"
@keyup.enter="handleEnter"
/>
<p
v-if="message"