|
|
|
|
@ -11,28 +11,30 @@
|
|
|
|
|
compact
|
|
|
|
|
:href="href"
|
|
|
|
|
:name="name"
|
|
|
|
|
target="_self">
|
|
|
|
|
target="_self"
|
|
|
|
|
@click="onClick">
|
|
|
|
|
<template #icon>
|
|
|
|
|
<img class="account-menu-entry__icon"
|
|
|
|
|
<NcLoadingIcon v-if="loading" :size="20" class="account-menu-entry__loading" />
|
|
|
|
|
<slot v-else-if="$scopedSlots.icon" name="icon" />
|
|
|
|
|
<img v-else
|
|
|
|
|
class="account-menu-entry__icon"
|
|
|
|
|
:class="{ 'account-menu-entry__icon--active': active }"
|
|
|
|
|
:src="iconSource"
|
|
|
|
|
alt="">
|
|
|
|
|
</template>
|
|
|
|
|
<template v-if="loading" #indicator>
|
|
|
|
|
<NcLoadingIcon />
|
|
|
|
|
</template>
|
|
|
|
|
</NcListItem>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import { loadState } from '@nextcloud/initial-state'
|
|
|
|
|
import { defineComponent } from 'vue'
|
|
|
|
|
|
|
|
|
|
import NcListItem from '@nextcloud/vue/components/NcListItem'
|
|
|
|
|
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
|
|
|
|
|
|
|
|
|
|
const versionHash = loadState('core', 'versionHash', '')
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
name: 'AccountMenuEntry',
|
|
|
|
|
|
|
|
|
|
components: {
|
|
|
|
|
@ -55,11 +57,11 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
active: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
required: true,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
icon: {
|
|
|
|
|
type: String,
|
|
|
|
|
required: true,
|
|
|
|
|
default: '',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
@ -76,11 +78,12 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
|
handleClick() {
|
|
|
|
|
onClick(e) {
|
|
|
|
|
this.loading = true
|
|
|
|
|
this.$emit('click', e)
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@ -96,6 +99,12 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&__loading {
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
margin: calc((var(--default-clickable-area) - 20px) / 2); // 20px icon size
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.list-item-content__main) {
|
|
|
|
|
width: fit-content;
|
|
|
|
|
}
|
|
|
|
|
|