Files
chatwoot/app/javascript/widget/components/ArticleCategoryCard.vue
Shivam Mishra c51a458c25 style: apply fixes for eslint issues [cw-3590] (#10210)
These fixes are all auto generated and can be merged directly

Fixes the following issues

1. Event used on components should be hypenated
2. Attribute orders in components
3. Use `unmounted` instead of `destroyed`
4. Add explicit `emits` declarations for components, autofixed [using
this
script](https://gist.github.com/scmmishra/6f549109b96400006bb69bbde392eddf)


We ignore the top level v-if for now, we will fix it later
2024-10-03 15:02:12 +05:30

55 lines
1.3 KiB
Vue

<script>
import { mapGetters } from 'vuex';
import ArticleList from './ArticleList.vue';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
export default {
components: { FluentIcon, ArticleList },
props: {
title: {
type: String,
default: '',
},
articles: {
type: Array,
default: () => [],
},
},
emits: ['view', 'viewAll'],
computed: {
...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
},
methods: {
onArticleClick(link) {
this.$emit('view', link);
},
},
};
</script>
<template>
<div>
<h3 class="mb-0 text-sm font-medium text-slate-800 dark:text-slate-50">
{{ title }}
</h3>
<ArticleList :articles="articles" @select-article="onArticleClick" />
<button
class="inline-flex items-center justify-between px-2 py-1 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
:style="{ color: widgetColor }"
@click="$emit('viewAll')"
>
<span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
<FluentIcon icon="arrow-right" size="14" />
</button>
</div>
</template>
<style lang="scss" scoped>
.see-articles {
color: var(--brand-textButtonClear);
svg {
color: var(--brand-textButtonClear);
}
}
</style>