feat: Eslint rules (#9839)
# Pull Request Template ## Description This PR adds new eslint rules to the code base. **Error rules** | Rule name | Type | Files updated | | ----------------- | --- | - | | `vue/block-order` | error | ✅ | | `vue/component-name-in-template-casing` | error | ✅ | | `vue/component-options-name-casing` | error | ✅ | | `vue/custom-event-name-casing` | error | ✅ | | `vue/define-emits-declaration` | error | ✅ | | `vue/no-unused-properties` | error | ✅ | | `vue/define-macros-order` | error | ✅ | | `vue/define-props-declaration` | error | ✅ | | `vue/match-component-import-name` | error | ✅ | | `vue/next-tick-style` | error | ✅ | | `vue/no-bare-strings-in-template` | error | ✅ | | `vue/no-empty-component-block` | error | ✅ | | `vue/no-multiple-objects-in-class` | error | ✅ | | `vue/no-required-prop-with-default` | error | ✅ | | `vue/no-static-inline-styles` | error | ✅ | | `vue/no-template-target-blank` | error | ✅ | | `vue/no-this-in-before-route-enter` | error | ✅ | | `vue/no-undef-components` | error | ✅ | | `vue/no-unused-emit-declarations` | error | ✅ | | `vue/no-unused-refs` | error | ✅ | | `vue/no-use-v-else-with-v-for` | error | ✅ | | `vue/no-useless-v-bind` | error | ✅ | | `vue/no-v-text` | error | ✅ | | `vue/padding-line-between-blocks` | error | ✅ | | ~`vue/prefer-prop-type-boolean-first`~ | ~error~ | ❌ (removed this rule, cause a bug in displaying custom attributes) | | `vue/prefer-separate-static-class` | error | ✅ | | `vue/prefer-true-attribute-shorthand` | error | ✅ | | `vue/require-explicit-slots` | error | ✅ | | `vue/require-macro-variable-name` | error | ✅ | **Warn rules** | Rule name | Type | Files updated | | ---- | ------------- | ------------- | | `vue/no-root-v-if` | warn | ❎ | Fixes https://linear.app/chatwoot/issue/CW-3492/vue-eslint-rules ## Type of change - [x] New feature (non-breaking change which adds functionality) ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Fayaz Ahmed <fayazara@gmail.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> Co-authored-by: Pranav <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
@@ -1,52 +1,3 @@
|
||||
<template>
|
||||
<div class="widget-preview-container">
|
||||
<div v-if="isWidgetVisible" class="screen-selector">
|
||||
<input-radio-group
|
||||
name="widget-screen"
|
||||
:items="widgetScreens"
|
||||
:action="handleScreenChange"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isWidgetVisible" class="widget-wrapper">
|
||||
<WidgetHead :config="getWidgetHeadConfig" />
|
||||
<div>
|
||||
<WidgetBody :config="getWidgetBodyConfig" />
|
||||
<WidgetFooter :config="getWidgetFooterConfig" />
|
||||
<div class="branding">
|
||||
<a class="branding-link">
|
||||
<img class="branding-image" :src="globalConfig.logoThumbnail" />
|
||||
<span>
|
||||
{{
|
||||
useInstallationName(
|
||||
$t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
|
||||
globalConfig.installationName
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-bubble" :style="getBubblePositionStyle">
|
||||
<button
|
||||
class="bubble"
|
||||
:class="getBubbleTypeClass"
|
||||
:style="{ background: color }"
|
||||
@click="toggleWidget"
|
||||
>
|
||||
<img
|
||||
v-if="!isWidgetVisible"
|
||||
src="~dashboard/assets/images/bubble-logo.svg"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
{{ getWidgetBubbleLauncherTitle }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WidgetHead from './WidgetHead.vue';
|
||||
import WidgetBody from './WidgetBody.vue';
|
||||
@@ -75,7 +26,6 @@ export default {
|
||||
},
|
||||
websiteName: {
|
||||
type: String,
|
||||
default: '',
|
||||
required: true,
|
||||
},
|
||||
logo: {
|
||||
@@ -198,6 +148,55 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="widget-preview-container">
|
||||
<div v-if="isWidgetVisible" class="screen-selector">
|
||||
<InputRadioGroup
|
||||
name="widget-screen"
|
||||
:items="widgetScreens"
|
||||
:action="handleScreenChange"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="isWidgetVisible" class="widget-wrapper">
|
||||
<WidgetHead :config="getWidgetHeadConfig" />
|
||||
<div>
|
||||
<WidgetBody :config="getWidgetBodyConfig" />
|
||||
<WidgetFooter :config="getWidgetFooterConfig" />
|
||||
<div class="branding">
|
||||
<a class="branding-link">
|
||||
<img class="branding-image" :src="globalConfig.logoThumbnail" />
|
||||
<span>
|
||||
{{
|
||||
useInstallationName(
|
||||
$t('INBOX_MGMT.WIDGET_BUILDER.BRANDING_TEXT'),
|
||||
globalConfig.installationName
|
||||
)
|
||||
}}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-bubble" :style="getBubblePositionStyle">
|
||||
<button
|
||||
class="bubble"
|
||||
:class="getBubbleTypeClass"
|
||||
:style="{ background: color }"
|
||||
@click="toggleWidget"
|
||||
>
|
||||
<img
|
||||
v-if="!isWidgetVisible"
|
||||
src="~dashboard/assets/images/bubble-logo.svg"
|
||||
alt=""
|
||||
/>
|
||||
<div>
|
||||
{{ getWidgetBubbleLauncherTitle }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.screen-selector {
|
||||
display: flex;
|
||||
|
||||
@@ -1,51 +1,3 @@
|
||||
<template>
|
||||
<div class="widget-body-container">
|
||||
<div v-if="config.isDefaultScreen" class="availability-content">
|
||||
<div class="availability-info">
|
||||
<div class="team-status">
|
||||
{{ getStatusText }}
|
||||
</div>
|
||||
<div class="reply-wait-message">
|
||||
{{ config.replyTime }}
|
||||
</div>
|
||||
</div>
|
||||
<thumbnail username="J" size="40px" />
|
||||
</div>
|
||||
<div v-else class="conversation-content">
|
||||
<div class="conversation-wrap">
|
||||
<div class="message-wrap">
|
||||
<div class="user-message-wrap">
|
||||
<div class="user-message">
|
||||
<div class="message-wrap">
|
||||
<div
|
||||
class="chat-bubble user"
|
||||
:style="{ background: config.color }"
|
||||
>
|
||||
<p>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agent-message-wrap">
|
||||
<div class="agent-message">
|
||||
<div class="avatar-wrap" />
|
||||
<div class="message-wrap">
|
||||
<div class="chat-bubble agent">
|
||||
<div class="message-content">
|
||||
<p>
|
||||
{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
|
||||
export default {
|
||||
@@ -85,6 +37,54 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="widget-body-container">
|
||||
<div v-if="config.isDefaultScreen" class="availability-content">
|
||||
<div class="availability-info">
|
||||
<div class="team-status">
|
||||
{{ getStatusText }}
|
||||
</div>
|
||||
<div class="reply-wait-message">
|
||||
{{ config.replyTime }}
|
||||
</div>
|
||||
</div>
|
||||
<Thumbnail username="J" size="40px" />
|
||||
</div>
|
||||
<div v-else class="conversation-content">
|
||||
<div class="conversation-wrap">
|
||||
<div class="message-wrap">
|
||||
<div class="user-message-wrap">
|
||||
<div class="user-message">
|
||||
<div class="message-wrap">
|
||||
<div
|
||||
class="chat-bubble user"
|
||||
:style="{ background: config.color }"
|
||||
>
|
||||
<p>{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.USER_MESSAGE') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agent-message-wrap">
|
||||
<div class="agent-message">
|
||||
<div class="avatar-wrap" />
|
||||
<div class="message-wrap">
|
||||
<div class="chat-bubble agent">
|
||||
<div class="message-content">
|
||||
<p>
|
||||
{{ $t('INBOX_MGMT.WIDGET_BUILDER.BODY.AGENT_MESSAGE') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.widget-body-container {
|
||||
.availability-content {
|
||||
|
||||
@@ -1,31 +1,3 @@
|
||||
<template>
|
||||
<div class="footer-wrap">
|
||||
<custom-button
|
||||
v-if="config.isDefaultScreen"
|
||||
class="start-conversation"
|
||||
:style="{ background: config.color }"
|
||||
>
|
||||
{{
|
||||
$t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
|
||||
}}
|
||||
</custom-button>
|
||||
<div v-else class="chat-message-input is-focused">
|
||||
<resizable-text-area
|
||||
id="chat-input"
|
||||
:rows="1"
|
||||
:placeholder="
|
||||
$t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
|
||||
"
|
||||
class="user-message-input is-focused"
|
||||
/>
|
||||
<div class="button-wrap">
|
||||
<fluent-icon icon="emoji" />
|
||||
<fluent-icon class="icon-send" icon="send" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CustomButton from 'dashboard/components/buttons/Button.vue';
|
||||
import ResizableTextArea from 'shared/components/ResizableTextArea.vue';
|
||||
@@ -44,6 +16,34 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="footer-wrap">
|
||||
<CustomButton
|
||||
v-if="config.isDefaultScreen"
|
||||
class="start-conversation"
|
||||
:style="{ background: config.color }"
|
||||
>
|
||||
{{
|
||||
$t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.START_CONVERSATION_BUTTON_TEXT')
|
||||
}}
|
||||
</CustomButton>
|
||||
<div v-else class="chat-message-input is-focused">
|
||||
<ResizableTextArea
|
||||
id="chat-input"
|
||||
:rows="1"
|
||||
:placeholder="
|
||||
$t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
|
||||
"
|
||||
class="user-message-input is-focused"
|
||||
/>
|
||||
<div class="button-wrap">
|
||||
<fluent-icon icon="emoji" />
|
||||
<fluent-icon class="icon-send" icon="send" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~dashboard/assets/scss/variables.scss';
|
||||
.footer-wrap {
|
||||
|
||||
@@ -1,3 +1,25 @@
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isDefaultScreen() {
|
||||
return (
|
||||
this.config.isDefaultScreen &&
|
||||
((this.config.welcomeHeading &&
|
||||
this.config.welcomeHeading.length !== 0) ||
|
||||
(this.config.welcomeTagLine &&
|
||||
this.config.welcomeTagline.length !== 0))
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="header-wrapper">
|
||||
<div class="header-branding">
|
||||
@@ -24,28 +46,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isDefaultScreen() {
|
||||
return (
|
||||
this.config.isDefaultScreen &&
|
||||
((this.config.welcomeHeading &&
|
||||
this.config.welcomeHeading.length !== 0) ||
|
||||
(this.config.welcomeTagLine &&
|
||||
this.config.welcomeTagline.length !== 0))
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-wrapper {
|
||||
background-color: var(--white);
|
||||
|
||||
Reference in New Issue
Block a user