forked from verdnatura/hedera-web
66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
clickable: { type: Boolean, default: true },
|
|
rounded: { type: Boolean, default: false }
|
|
});
|
|
|
|
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 bg-white"
|
|
:class="[
|
|
rounded ? 'default-radius' : 'no-radius',
|
|
{ 'cursor-pointer': clickable }
|
|
]"
|
|
@click="handleClick()"
|
|
>
|
|
<div
|
|
class="no-padding content-container"
|
|
:class="$slots.actions ? 'col-9' : 'full-width'"
|
|
>
|
|
<slot name="prepend" />
|
|
<div class="content">
|
|
<slot name="content" />
|
|
</div>
|
|
</div>
|
|
<div class="no-padding flex column justify-center">
|
|
<slot name="actions" />
|
|
</div>
|
|
</QItem>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card {
|
|
border-bottom: 1px solid $gray-light;
|
|
padding: 20px;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
|
|
* {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
.content-container {
|
|
display: flex;
|
|
}
|
|
</style>
|