You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
205 lines
5.2 KiB
205 lines
5.2 KiB
<template>
|
|
<div
|
|
:class="itemClasses"
|
|
>
|
|
<div
|
|
class="csc-list-item-head row items-center"
|
|
@click="toggle"
|
|
>
|
|
<div
|
|
v-if="!image"
|
|
class="csc-list-item-head-icon"
|
|
>
|
|
<q-icon
|
|
:name="icon"
|
|
size="24px"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="image"
|
|
class="csc-list-item-head-image"
|
|
>
|
|
<img
|
|
:src="image"
|
|
>
|
|
</div>
|
|
<div
|
|
class="csc-list-item-head-title col"
|
|
>
|
|
<slot
|
|
name="title"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="showMoreMenu"
|
|
class="csc-list-item-head-menu"
|
|
>
|
|
<q-btn
|
|
icon="more_vert"
|
|
color="primary"
|
|
flat
|
|
dense
|
|
@click.stop="moreMenu=true"
|
|
/>
|
|
<q-menu
|
|
ref="moreMenu"
|
|
v-model="moreMenu"
|
|
>
|
|
<q-list>
|
|
<slot
|
|
name="menu"
|
|
/>
|
|
</q-list>
|
|
</q-menu>
|
|
</div>
|
|
<slot
|
|
name="actions"
|
|
class="csc-list-item-head-menu"
|
|
/>
|
|
</div>
|
|
<q-slide-transition>
|
|
<div
|
|
v-if="expanded"
|
|
class="csc-list-item-body"
|
|
>
|
|
<div
|
|
class="csc-list-item-body-content"
|
|
>
|
|
<slot
|
|
name="body"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-slide-transition>
|
|
<csc-object-spinner
|
|
v-if="loading"
|
|
:loading="loading"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CscObjectSpinner from './CscObjectSpinner'
|
|
export default {
|
|
name: 'CscListItem',
|
|
components: {
|
|
CscObjectSpinner
|
|
},
|
|
props: {
|
|
icon: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
image: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
expanded: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
odd: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showMoreMenu: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
emits: ['toggle'],
|
|
data () {
|
|
return {
|
|
moreMenu: false
|
|
}
|
|
},
|
|
computed: {
|
|
itemClasses () {
|
|
const classes = ['csc-list-item', 'transition-generic']
|
|
if (this.expanded) {
|
|
classes.push('csc-list-item-expanded')
|
|
}
|
|
if (this.odd) {
|
|
classes.push('csc-list-item-background')
|
|
}
|
|
return classes
|
|
}
|
|
},
|
|
methods: {
|
|
toggle () {
|
|
this.$emit('toggle', !this.expanded)
|
|
},
|
|
closePopoverMenu () {
|
|
this.moreMenu = false
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="sass" rel="stylesheet/sass">
|
|
|
|
.csc-list-item-title-value,
|
|
.csc-list-item-title-keyword
|
|
margin-right: $flex-gutter-xs
|
|
font-weight: bold
|
|
vertical-align: middle
|
|
.csc-list-item.csc-list-item-background
|
|
.csc-list-item-head
|
|
background-color: $item-stripe-color
|
|
.csc-list-item
|
|
position: relative
|
|
.csc-list-item-head
|
|
cursor: pointer
|
|
padding: $flex-gutter-sm
|
|
.csc-list-item-head-icon
|
|
padding: 0
|
|
padding-right: $flex-gutter-xs
|
|
padding-left: $flex-gutter-xs
|
|
.csc-list-item-head-image
|
|
width: 32px
|
|
height: 32px
|
|
position: relative
|
|
overflow: hidden
|
|
img
|
|
position: absolute
|
|
width: 100%
|
|
.csc-list-item-head-title
|
|
padding-left: $flex-gutter-sm
|
|
.csc-list-item-title
|
|
font-size: 1rem
|
|
vertical-align: middle
|
|
.csc-list-item-subtitle
|
|
margin-top: 0.2 rem
|
|
font-size: 90%
|
|
vertical-align: middle
|
|
.csc-list-item-head-menu
|
|
.q-btn
|
|
padding: 0
|
|
padding-left: $flex-gutter-xs
|
|
padding-right: $flex-gutter-xs
|
|
.q-btn-inner
|
|
i
|
|
margin: 0
|
|
.csc-list-item-body
|
|
background-color: $item-highlight-color
|
|
.csc-list-item-body-content
|
|
padding: $flex-gutter-md
|
|
.csc-list-item.csc-list-item-expanded
|
|
.csc-list-item-head
|
|
background-color: $item-highlight-color
|
|
.csc-list-item-head-icon
|
|
color: $primary
|
|
.csc-list-item-head-title
|
|
.csc-list-item-title
|
|
color: $primary
|
|
.csc-list-item-body
|
|
background-color: $item-highlight-color
|
|
.csc-list-item-body-content
|
|
padding: $flex-gutter-md
|
|
padding-top: $flex-gutter-sm
|
|
</style>
|