0
1
Fork 0
hedera-web-mindshore/src/components/ui/CardList.vue

48 lines
1.1 KiB
Vue

<script setup>
const props = defineProps({
clickable: { type: Boolean, default: true },
rounded: { type: Boolean, default: true }
});
const emit = defineEmits(['click']);
const handleClick = () => {
if (props.clickable) {
emit('click');
}
};
</script>
<template>
<QItem
v-bind="$attrs"
v-ripple="clickable"
:clickable="clickable"
class="full-width row items-center justify-between card no-border-radius bg-white"
:class="{ 'cursor-pointer': clickable, 'no-radius': !rounded }"
@click="handleClick()"
>
<QItemSection class="no-padding">
<div class="row no-wrap">
<slot name="prepend" />
<div class="column full-width">
<slot name="content" />
</div>
</div>
</QItemSection>
<QItemSection
class="no-padding"
side
>
<slot name="actions" />
</QItemSection>
</QItem>
</template>
<style lang="scss" scoped>
.card {
border-bottom: 1px solid $gray-light;
padding: 20px;
}
</style>