82 lines
1.5 KiB
Vue
82 lines
1.5 KiB
Vue
<template>
|
|
<NcButton
|
|
aria-label="t('side_menu', 'Select apps')"
|
|
variant="primary"
|
|
@click="openModal"
|
|
>
|
|
{{ t('side_menu', 'Select apps') }} ({{ model.length }})
|
|
</NcButton>
|
|
|
|
<NcModal
|
|
v-if="modal"
|
|
@close="closeModal"
|
|
>
|
|
<div class="modal__content">
|
|
<NcCheckboxRadioSwitch
|
|
v-for="(item, key) in apps"
|
|
:key="key"
|
|
v-model="model"
|
|
name="value"
|
|
:value="item.id"
|
|
>
|
|
<img
|
|
:src="item.icon"
|
|
:alt="item.name"
|
|
/>
|
|
{{ item.name }}
|
|
</NcCheckboxRadioSwitch>
|
|
|
|
<div class="modal__footer">
|
|
<NcButton
|
|
variant="primary"
|
|
@click="closeModal"
|
|
>
|
|
{{ t('side_menu', 'Close') }}
|
|
</NcButton>
|
|
</div>
|
|
</div>
|
|
</NcModal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { NcButton, NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
|
|
import { useNavStore } from '../../../store/nav.js'
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const model = defineModel({ type: Array })
|
|
const navStore = useNavStore()
|
|
const modal = ref(false)
|
|
const apps = ref([])
|
|
|
|
const openModal = () => {
|
|
modal.value = true
|
|
}
|
|
|
|
const closeModal = () => {
|
|
modal.value = false
|
|
}
|
|
|
|
onMounted(async () => {
|
|
apps.value = await navStore.getApps()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modal__content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal__footer {
|
|
margin-top: 20px;
|
|
text-align: right;
|
|
}
|
|
|
|
.modal__footer button {
|
|
display: inline-block;
|
|
}
|
|
|
|
img {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
</style>
|