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

feat: Vite + vue 3 💚 (#10047)

Browse Source 
Fixes https://github.com/chatwoot/chatwoot/issues/8436
Fixes https://github.com/chatwoot/chatwoot/issues/9767
Fixes https://github.com/chatwoot/chatwoot/issues/10156
Fixes https://github.com/chatwoot/chatwoot/issues/6031
Fixes https://github.com/chatwoot/chatwoot/issues/5696
Fixes https://github.com/chatwoot/chatwoot/issues/9250
Fixes https://github.com/chatwoot/chatwoot/issues/9762

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Shivam Mishra
2024-10-02 13:06:30 +05:30
committed by GitHub
parent e0bf2bd9d4
commit 42f6621afb
661 changed files with 15939 additions and 31194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/v3/components/Form/Button.vue
View File

@@ -27,8 +27,6 @@ const props = defineProps({
},
});
const emit = defineEmits(['click']);
const attrs = useAttrs();
const baseClasses = {
@@ -73,13 +71,6 @@ const sizeClass = computed(() => {
});
const buttonClasses = computed(() => [colorClass.value, sizeClass.value]);
const onClick = () => {
if (props.disabled) {
return;
}
emit('click');
};
</script>
<template>
@@ -87,7 +78,6 @@ const onClick = () => {
class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
:class="buttonClasses"
v-bind="$attrs"
@click="onClick"
>
<fluent-icon
v-if="icon && !trailingIcon"

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

@@ -1,66 +1,40 @@
<script>
<script setup>
import { defineProps, defineModel } from 'vue';
import WithLabel from './WithLabel.vue';
export default {
components: {
WithLabel,
defineProps({
label: {
type: String,
required: true,
},
props: {
label: {
type: String,
default: '',
},
name: {
type: String,
required: true,
},
type: {
type: String,
default: 'text',
},
tabindex: {
type: Number,
default: undefined,
},
required: {
type: Boolean,
default: false,
},
placeholder: {
type: String,
default: '',
},
value: {
type: [String, Number],
default: '',
},
icon: {
type: String,
default: '',
},
hasError: {
type: Boolean,
default: false,
},
errorMessage: {
type: String,
default: '',
},
dataTestid: {
type: String,
default: '',
},
spacing: {
type: String,
default: 'base',
validator: value => ['base', 'compact'].includes(value),
},
icon: {
type: String,
default: '',
},
methods: {
onInput(e) {
this.$emit('input', e.target.value);
},
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>
@@ -75,27 +49,17 @@ export default {
<slot />
</template>
<input
:id="name"
:name="name"
:type="type"
autocomplete="off"
:tabindex="tabindex"
:required="required"
:placeholder="placeholder"
:data-testid="dataTestid"
:value="value"
v-bind="$attrs"
v-model="model"
class="block w-full border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-1 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
:class="{
'focus:outline-red-600 outline-red-600 dark:focus:outline-red-600 dark:outline-red-600':
hasError,
'focus:outline-red-600 outline-red-600': hasError,
'outline-slate-200 dark:outline-slate-600 dark:focus:outline-woot-500 focus:outline-woot-500':
!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-md shadow-sm appearance-none outline outline-1 focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
@input="onInput"
@blur="$emit('blur')"
/>
</WithLabel>
</template>