Add "expanding" chevron to highlight that there's more parameters

This commit is contained in:
Matthias 2023-05-31 20:42:32 +02:00
parent fa7ea5e797
commit 97e3290a31

View File

@ -7,13 +7,27 @@
<div
role="button"
class="d-flex flex-grow-1 align-items-start flex-column"
@click="visible = !visible"
@click="toggleVisible"
>
<span class="fw-bold fd-italic">{{ pairlist.name }}</span>
<span class="fw-lighter">{{ pairlist.description }}</span>
</div>
</div>
<b-button size="sm" @click="emit('remove', index)">
<i-mdi-chevron-down
v-if="!visible"
:class="hasParameters && !visible ? 'visible' : 'invisible'"
role="button"
class="fs-4"
@click="toggleVisible"
/>
<i-mdi-chevron-up
v-if="visible"
:class="hasParameters && visible ? 'visible' : 'invisible'"
role="button"
class="fs-4"
@click="toggleVisible"
/>
<b-button size="sm" class="ms-1" @click="emit('remove', index)">
<i-mdi-close />
</b-button>
</div>
@ -37,6 +51,7 @@
import { Pairlist } from '@/types';
import { ref } from 'vue';
import PairlistConfigParameter from './PairlistConfigParameter.vue';
import { computed } from 'vue';
defineProps<{
index: number;
@ -47,6 +62,14 @@ const emit = defineEmits(['remove']);
const visible = ref(false);
const pairlist = defineModel<Pairlist>({ required: true });
const hasParameters = computed(() => Object.keys(pairlist.value.params).length > 0);
function toggleVisible() {
if (hasParameters.value) {
visible.value = !visible.value;
}
}
</script>
<style lang="scss" scoped></style>