Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="aa-steplist" :class="{ 'is-horizontal': direction === 'horizontal' }">
|
||||
<div class="aa-steplist-item" v-for="(it, i) in steps" :key="i"
|
||||
:class="['is-' + it.status, { 'is-clickable': clickable }]" @click="clickable && emit('step-click', i)">
|
||||
<span class="aa-steplist-node">{{ nodeText(it, i) }}</span>
|
||||
<span class="aa-steplist-line"></span>
|
||||
<div class="aa-steplist-body">
|
||||
<div class="aa-steplist-title">{{ it.title }}</div>
|
||||
<div class="aa-steplist-desc" v-if="it.desc">{{ it.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
steps: { type: Array, default: () => [] },
|
||||
direction: { type: String, default: 'vertical' },
|
||||
clickable: { type: Boolean, default: false }
|
||||
});
|
||||
const emit = defineEmits(['step-click']);
|
||||
|
||||
function nodeText(it, i) {
|
||||
if (it.status === 'done') return '✓';
|
||||
if (it.status === 'error') return '✕';
|
||||
return String(i + 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="./StepList.css"></style>
|
||||
Reference in New Issue
Block a user