76 lines
2.1 KiB
Vue
76 lines
2.1 KiB
Vue
<template>
|
|
<view class="oa-task-card" :class="'tone-' + normalizedTone">
|
|
<view class="oa-task-card__body" @click="$emit('open')">
|
|
<view class="oa-task-card__top">
|
|
<view class="oa-task-card__title-row">
|
|
<view v-if="unread" class="oa-task-card__unread" aria-hidden="true" />
|
|
<text class="oa-task-card__title">{{ title }}</text>
|
|
</view>
|
|
<text
|
|
v-if="statusText"
|
|
class="oa-task-card__status"
|
|
:class="'is-' + normalizedTone"
|
|
>
|
|
{{ statusText }}
|
|
</text>
|
|
</view>
|
|
|
|
<view v-if="metaLines && metaLines.length" class="oa-task-card__meta">
|
|
<view
|
|
v-for="(line, idx) in metaLines"
|
|
:key="idx"
|
|
class="oa-task-card__meta-line"
|
|
>
|
|
<text class="oa-task-card__meta-label">{{ line.label }}</text>
|
|
<text class="oa-task-card__meta-value">{{ line.value }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="actions && actions.length" class="oa-task-card__footer">
|
|
<view
|
|
v-for="act in actions"
|
|
:key="act.key"
|
|
class="oa-task-card__btn"
|
|
:class="{
|
|
'is-primary': !!act.primary,
|
|
'is-danger': !!act.danger && !act.primary,
|
|
'is-disabled': !!act.disabled
|
|
}"
|
|
@click.stop="onActionClick(act)"
|
|
>
|
|
{{ act.label }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const TONES = ['warn', 'success', 'danger', 'info']
|
|
|
|
export default {
|
|
name: 'OaTaskCard',
|
|
props: {
|
|
title: { type: String, default: '' },
|
|
statusText: { type: String, default: '' },
|
|
statusTone: { type: String, default: 'info' },
|
|
metaLines: { type: Array, default: () => [] },
|
|
unread: { type: Boolean, default: false },
|
|
actions: { type: Array, default: () => [] }
|
|
},
|
|
emits: ['open', 'action'],
|
|
computed: {
|
|
normalizedTone() {
|
|
const t = String(this.statusTone || 'info').toLowerCase()
|
|
return TONES.includes(t) ? t : 'info'
|
|
}
|
|
},
|
|
methods: {
|
|
onActionClick(act) {
|
|
if (!act || act.disabled) return
|
|
this.$emit('action', act)
|
|
}
|
|
}
|
|
}
|
|
</script>
|