diff options
18 files changed, 129 insertions, 68 deletions
diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue index b45db6a8..4849a864 100644 --- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue +++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderDatePicker.vue @@ -22,36 +22,38 @@ <template> <div class="datepicker-button-section"> - <button v-shortkey="previousShortKeyConf" + <ButtonVue v-shortkey="previousShortKeyConf" :aria-label="previousLabel" class="datepicker-button-section__previous button" :title="previousLabel" - type="button" @click="navigateToPreviousTimeRange" @shortkey="navigateToPreviousTimeRange"> - <ChevronLeftIcon :size="22" /> - </button> - <button class="datepicker-button-section__datepicker-label button datepicker-label" + <template #icon> + <ChevronLeftIcon :size="22" /> + </template> + </ButtonVue> + <ButtonVue class="datepicker-button-section__datepicker-label button datepicker-label" @click.stop.prevent="toggleDatepicker" @mousedown.stop.prevent="doNothing" @mouseup.stop.prevent="doNothing"> {{ selectedDate | formatDateRage(view, locale) }} - </button> + </ButtonVue> <DatePicker ref="datepicker" class="datepicker-button-section__datepicker" :date="selectedDate" :is-all-day="true" :open.sync="isDatepickerOpen" @change="navigateToDate" /> - <button v-shortkey="nextShortKeyConf" + <ButtonVue v-shortkey="nextShortKeyConf" :aria-label="nextLabel" class="datepicker-button-section__next button" :title="nextLabel" - type="button" @click="navigateToNextTimeRange" @shortkey="navigateToNextTimeRange"> - <ChevronRightIcon :size="22" /> - </button> + <template #icon> + <ChevronRightIcon :size="22" /> + </template> + </ButtonVue> </div> </template> @@ -66,6 +68,7 @@ import formatDateRage from '../../../filters/dateRangeFormat.js' import DatePicker from '../../Shared/DatePicker.vue' import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue' import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue' +import { NcButton as ButtonVue } from '@nextcloud/vue' export default { name: 'AppNavigationHeaderDatePicker', @@ -73,6 +76,7 @@ export default { DatePicker, ChevronLeftIcon, ChevronRightIcon, + ButtonVue, }, filters: { formatDateRage, diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue index 6747b599..87f351c1 100644 --- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue +++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderNewEvent.vue @@ -21,21 +21,26 @@ --> <template> - <button v-shortkey="['c']" + <ButtonVue v-shortkey="['c']" class="button primary new-event" @click="newEvent" @shortkey="newEvent"> - <Plus :size="20" /> + <template #icon> + <Plus :size="20" /> + </template> {{ $t('calendar', 'New event') }} - </button> + </ButtonVue> </template> <script> import Plus from 'vue-material-design-icons/Plus.vue' +import { NcButton as ButtonVue } from '@nextcloud/vue' + export default { name: 'AppNavigationHeaderNewEvent', components: { Plus, + ButtonVue, }, methods: { /** diff --git a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue index b38cff85..3d765b17 100644 --- a/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue +++ b/src/components/AppNavigation/AppNavigationHeader/AppNavigationHeaderTodayButton.vue @@ -21,18 +21,22 @@ --> <template> - <button v-shortkey="['t']" + <ButtonVue v-shortkey="['t']" class="button today" @shortkey="today" @click="today"> {{ $t('calendar', 'Today') }} - </button> + </ButtonVue> </template> <script> +import { NcButton as ButtonVue } from '@nextcloud/vue' export default { name: 'AppNavigationHeaderTodayButton', + components: { + ButtonVue, + }, methods: { today() { const name = this.$route.name diff --git a/src/components/AppNavigation/CalendarList/Trashbin.vue b/src/components/AppNavigation/CalendarList/Trashbin.vue index fbebf06f..e59f312d 100644 --- a/src/components/AppNavigation/CalendarList/Trashbin.vue +++ b/src/components/AppNavigation/CalendarList/Trashbin.vue @@ -76,9 +76,9 @@ <Moment class="timestamp" :timestamp="item.deletedAt" /> </td> <td class="item-actions"> - <button @click="restore(item)"> + <ButtonVue @click="restore(item)"> {{ t('calendar','Restore') }} - </button> + </ButtonVue> <Actions :force-menu="true"> <ActionButton @click="onDeletePermanently(item)"> @@ -95,9 +95,9 @@ <p v-if="retentionDuration"> {{ n('calendar', 'Items in the trash bin are deleted after {numDays} day', 'Items in the trash bin are deleted after {numDays} days', retentionDuration, { numDays: retentionDuration }) }} </p> - <button @click="onEmptyTrashBin()"> + <ButtonVue @click="onEmptyTrashBin()"> {{ t('calendar','Empty trash bin') }} - </button> + </ButtonVue> </div> </template> </div> @@ -110,6 +110,7 @@ import AppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js' import Actions from '@nextcloud/vue/dist/Components/NcActions.js' import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import { NcButton as ButtonVue } from '@nextcloud/vue' import Modal from '@nextcloud/vue/dist/Components/NcModal.js' import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js' import moment from '@nextcloud/moment' @@ -125,6 +126,7 @@ export default { name: 'Trashbin', components: { AppNavigationItem, + ButtonVue, EmptyContent, Modal, Moment, diff --git a/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue b/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue index f3442364..d97e2a17 100644 --- a/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue +++ b/src/components/AppNavigation/EmbedHeader/EmbedHeaderTodayButton.vue @@ -22,20 +22,24 @@ <template> <div class="today-button-section"> - <button :aria-label="title" + <ButtonVue :aria-label="title" class="button" :title="title" @click="today()"> {{ $t('calendar', 'Today') }} - </button> + </ButtonVue> </div> </template> <script> import moment from '@nextcloud/moment' +import { NcButton as ButtonVue } from '@nextcloud/vue' export default { name: 'EmbedHeaderTodayButton', + components: { + ButtonVue, + }, computed: { title() { return moment().format('ll') diff --git a/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue b/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue index fc34282f..fd35b6e2 100644 --- a/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue +++ b/src/components/AppNavigation/EmbedHeader/EmbedHeaderViewButtons.vue @@ -22,24 +22,29 @@ <template> <div class="view-button-section"> - <button :class="{primary: isAgendaDayViewSelected}" class="button" @click="view('timeGridDay')"> + <ButtonVue :class="{primary: isAgendaDayViewSelected}" class="button" @click="view('timeGridDay')"> {{ $t('calendar', 'Day') }} - </button> - <button :class="{primary: isAgendaWeekViewSelected}" class="button" @click="view('timeGridWeek')"> + </ButtonVue> + <ButtonVue :class="{primary: isAgendaWeekViewSelected}" class="button" @click="view('timeGridWeek')"> {{ $t('calendar', 'Week') }} - </button> - <button :class="{primary: isMonthViewSelected}" class="button" @click="view('dayGridMonth')"> + </ButtonVue> + <ButtonVue :class="{primary: isMonthViewSelected}" class="button" @click="view('dayGridMonth')"> {{ $t('calendar', 'Month') }} - </button> - <button :class="{primary: isMonthListViewSelected}" class="button" @click="view('listMonth')"> + </ButtonVue> + <ButtonVue :class="{primary: isMonthListViewSelected}" class="button" @click="view('listMonth')"> {{ $t('calendar', 'List') }} - </button> + </ButtonVue> </div> </template> <script> +import { NcButton as ButtonVue } from '@nextcloud/vue' + export default { name: 'EmbedHeaderViewButtons', + components: { + ButtonVue, + }, computed: { isAgendaDayViewSelected() { return this.selectedView === 'timeGridDay' diff --git a/src/components/AppNavigation/Settings/ImportScreen.vue b/src/components/AppNavigation/Settings/ImportScreen.vue index f79b8cfa..eaa9ee63 100644 --- a/src/components/AppNavigation/Settings/ImportScreen.vue +++ b/src/components/AppNavigation/Settings/ImportScreen.vue @@ -43,23 +43,25 @@ </transition-group> <div class="import-modal__actions"> - <button @click="cancelImport"> + <ButtonVue @click="cancelImport"> {{ $t('calendar', 'Cancel' ) }} - </button> - <button class="primary" @click="importCalendar"> + </ButtonVue> + <ButtonVue class="primary" @click="importCalendar"> {{ $n('calendar', 'Import calendar', 'Import calendars', files.length) }} - </button> + </ButtonVue> </div> </Modal> </template> <script> +import { NcButton as ButtonVue } from '@nextcloud/vue' import ImportScreenRow from './ImportScreenRow.vue' import Modal from '@nextcloud/vue/dist/Components/NcModal.js' export default { name: 'ImportScreen', components: { + ButtonVue, ImportScreenRow, Modal, }, diff --git a/src/components/AppointmentConfigModal.vue b/src/components/AppointmentConfigModal.vue index abe7dd26..e22ff1f2 100644 --- a/src/components/AppointmentConfigModal.vue +++ b/src/components/AppointmentConfigModal.vue @@ -127,11 +127,11 @@ </div> </fieldset> </div> - <button class="primary appointment-config-modal__submit-button" + <ButtonVue class="primary appointment-config-modal__submit-button" :disabled="!editing.name || editing.length === 0" @click="save"> {{ saveButtonText }} - </button> + </ButtonVue> </template> </div> </Modal> @@ -152,6 +152,7 @@ import CheckedDurationSelect from './AppointmentConfigModal/CheckedDurationSelec import VisibilitySelect from './AppointmentConfigModal/VisibilitySelect.vue' import logger from '../utils/logger.js' import Confirmation from './AppointmentConfigModal/Confirmation.vue' +import { NcButton as ButtonVue } from '@nextcloud/vue' export default { name: 'AppointmentConfigModal', @@ -167,6 +168,7 @@ export default { DurationSelect, VisibilitySelect, Confirmation, + ButtonVue, }, props: { config: { diff --git a/src/components/AppointmentConfigModal/Confirmation.vue b/src/components/AppointmentConfigModal/Confirmation.vue index 4271bea7..8f1a02fe 100644 --- a/src/components/AppointmentConfigModal/Confirmation.vue +++ b/src/components/AppointmentConfigModal/Confirmation.vue @@ -34,15 +34,16 @@ target="_blank"> {{ t('calendar', 'Preview') }} </a> - <button v-if="showCopyLinkButton" + <ButtonVue v-if="showCopyLinkButton" @click="copyLink"> {{ t('calendar', 'Copy link') }} - </button> + </ButtonVue> </div> </div> </template> <script> +import { NcButton as ButtonVue } from '@nextcloud/vue' import EmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js' import CheckIcon from 'vue-material-design-icons/Check.vue' import AppointmentConfig from '../../models/appointmentConfig.js' @@ -50,6 +51,7 @@ import AppointmentConfig from '../../models/appointmentConfig.js' export default { name: 'Confirmation', components: { + ButtonVue, EmptyContent, CheckIcon, }, diff --git a/src/components/Appointments/AppointmentDetails.vue b/src/components/Appointments/AppointmentDetails.vue index 49ad5184..f80ecc88 100644 --- a/src/components/Appointments/AppointmentDetails.vue +++ b/src/components/Appointments/AppointmentDetails.vue @@ -55,10 +55,10 @@ {{ $t('calendar', 'Could not book the appointment. Please try again later or contact the organizer.') }} </div> <div class="buttons"> - <button class="button primary" + <ButtonVue class="button primary" @click="save"> {{ $t('calendar', 'Book the appointment') }} - </button> + </ButtonVue> </div> </div> </div> @@ -66,6 +66,7 @@ </template> <script> import Avatar from '@nextcloud/vue/dist/Components/NcAvatar.js' +import { NcButton as ButtonVue } from '@nextcloud/vue' import Modal from '@nextcloud/vue/dist/Components/NcModal.js' import autosize from '../../directives/autosize.js' @@ -75,6 +76,7 @@ export default { name: 'AppointmentDetails', components: { Avatar, + ButtonVue, Modal, }, directives: { diff --git a/src/components/Appointments/AppointmentSlot.vue b/src/components/Appointments/AppointmentSlot.vue index 08220be6..1d94a7ce 100644 --- a/src/components/Appointments/AppointmentSlot.vue +++ b/src/components/Appointments/AppointmentSlot.vue @@ -20,16 +20,20 @@ --> <template> - <button class="appointment-slot" @click="$emit('click', $event)"> + <ButtonVue class="appointment-slot" @click="$emit('click', $event)"> {{ startTime }} - {{ endTime }} - </button> + </ButtonVue> </template> <script> +import { NcButton as ButtonVue } from '@nextcloud/vue' import { timeStampToLocaleTime } from '../../utils/localeTime.js' export default { name: 'AppointmentSlot', + components: { + ButtonVue, + }, props: { start: { required: true, @@ -61,3 +65,9 @@ export default { }, } </script> + +<style lang="scss" scoped> +.appointment-slot { + margin: 5px 0; +} +</style> diff --git a/src/components/Editor/InvitationResponseButtons.vue b/src/components/Editor/InvitationResponseButtons.vue index 4989d997..c1fb5c31 100644 --- a/src/components/Editor/InvitationResponseButtons.vue +++ b/src/components/Editor/InvitationResponseButtons.vue @@ -23,25 +23,25 @@ <template> <div class="invitation-response-buttons" :class="{ 'invitation-response-buttons--narrow': narrow }"> - <button v-if="!isAccepted" + <ButtonVue v-if="!isAccepted" class="invitation-response-buttons__button primary" :disabled="loading" @click="accept"> {{ t('calendar', 'Accept') }} - </button> - <button v-if="!isDeclined" + </ButtonVue> + <ButtonVue v-if="!isDeclined" class="invitation-response-buttons__button error" :disabled="loading" @click="decline"> {{ t('calendar', 'Decline') }} - </button> + </ButtonVue> <template v-if="!isTentative"> - <button v-if="!narrow" + <ButtonVue v-if="!narrow" class="invitation-response-buttons__button" :disabled="loading" @click="tentative"> {{ t('calendar', 'Tentative') }} - </button> + </ButtonVue> <Actions v-else> <ActionButton :disabled="loading" @click="tentative"> @@ -58,6 +58,7 @@ <script> import Actions from '@nextcloud/vue/dist/Components/NcActions.js' import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' +import { NcButton as ButtonVue } from '@nextcloud/vue' import CalendarQuestionIcon from 'vue-material-design-icons/CalendarQuestion.vue' import { showError, showSuccess } from '@nextcloud/dialogs' import logger from '../../utils/logger.js' @@ -67,6 +68,7 @@ export default { components: { Actions, ActionButton, + ButtonVue, CalendarQuestionIcon, }, props: { diff --git a/src/components/Editor/Invitees/InviteesList.vue b/src/components/Editor/Invitees/InviteesList.vue index e35e4311..365b9358 100644 --- a/src/components/Editor/Invitees/InviteesList.vue +++ b/src/components/Editor/Invitees/InviteesList.vue @@ -42,15 +42,15 @@ <OrganizerNoEmailError v-if="!isReadOnly && isListEmpty && !hasUserEmailAddress" /> <div class="invitees-list-button-group"> - <button v-if="isCreateTalkRoomButtonVisible" + <ButtonVue v-if="isCreateTalkRoomButtonVisible" :disabled="isCreateTalkRoomButtonDisabled" @click="createTalkRoom"> {{ $t('calendar', 'Create Talk room for this event') }} - </button> + </ButtonVue> - <button v-if="!isReadOnly" :disabled="isListEmpty" @click="openFreeBusy"> + <ButtonVue v-if="!isReadOnly" :disabled="isListEmpty" @click="openFreeBusy"> {{ $t('calendar', 'Show busy times') }} - </button> + </ButtonVue> <FreeBusy v-if="showFreeBusyModel" :attendees="calendarObjectInstance.attendees" :organizer="calendarObjectInstance.organizer" @@ -62,6 +62,7 @@ </template> <script> +import { NcButton as ButtonVue } from '@nextcloud/vue' import { mapState } from 'vuex' import InviteesListSearch from './InviteesListSearch.vue' import InviteesListItem from './InviteesListItem.vue' @@ -79,6 +80,7 @@ import { organizerDisplayName, removeMailtoPrefix } from '../../../utils/attende export default { name: 'InviteesList', components: { + ButtonVue, FreeBusy, OrganizerNoEmailError, NoAttendeesView, diff --git a/src/components/Editor/Properties/PropertyColor.vue b/src/components/Editor/Properties/PropertyColor.vue index 6e39c1a1..72a74a03 100644 --- a/src/components/Editor/Properties/PropertyColor.vue +++ b/src/components/Editor/Properties/PropertyColor.vue @@ -41,7 +41,7 @@ <ColorPicker :value="selectedColor" :open.sync="isColorPickerOpen" @input="changeColor"> - <button class="property-color__color-preview" + <ButtonVue class="property-color__color-preview" :style="{'background-color': selectedColor }" /> </ColorPicker> <Actions v-if="showColorRevertButton"> @@ -59,6 +59,7 @@ <script> import PropertyMixin from '../../../mixins/PropertyMixin.js' import Actions from '@nextcloud/vue/dist/Components/NcActions.js' +import { NcButton as ButtonVue } from '@nextcloud/vue' import ActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' import ColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js' import debounce from 'debounce' @@ -70,6 +71,7 @@ export default { components: { Actions, ActionButton, + ButtonVue, ColorPicker, Undo, }, diff --git a/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue b/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue index 4d91ebf5..7765bfc9 100644 --- a/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue +++ b/src/components/Editor/Repeat/RepeatFreqMonthlyOptions.vue @@ -30,14 +30,14 @@ {{ $t('calendar', 'By day of the month') }} </ActionRadio> <div class="repeat-option-set-section__grid"> - <button v-for="option in byMonthDayOptions" + <ButtonVue v-for="option in byMonthDayOptions" :key="option.value" class="repeat-option-set-section-grid-item" :class="{ primary: option.selected }" :disabled="!byMonthDayEnabled" @click="toggleByMonthDay(option.value)"> {{ option.label }} - </button> + </ButtonVue> </div> </div> <div class="repeat-option-set-section repeat-option-set-section--on-the-select"> @@ -58,6 +58,7 @@ </template> <script> +import { NcButton as ButtonVue } from '@nextcloud/vue' import RepeatFirstLastSelect from './RepeatFirstLastSelect.vue' import RepeatOnTheSelect from './RepeatOnTheSelect.vue' import ActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js' @@ -65,6 +66,7 @@ import ActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js' export default { name: 'RepeatFreqMonthlyOptions', components: { + ButtonVue, RepeatOnTheSelect, RepeatFirstLastSelect, ActionRadio, diff --git a/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue b/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue index 022a3982..567244b3 100644 --- a/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue +++ b/src/components/Editor/Repeat/RepeatFreqWeeklyOptions.vue @@ -26,22 +26,26 @@ {{ $t('calendar', 'on') }} </span> <div class="repeat-option-set-section__grid"> - <button v-for="option in options" + <ButtonVue v-for="option in options" :key="option.value" class="repeat-option-set-section-grid-item" :class="{ primary: option.selected }" @click="toggleByDay(option.value)"> {{ option.label }} - </button> + </ButtonVue> </div> </div> </template> <script> +import { NcButton as ButtonVue } from '@nextcloud/vue' import { getDayNamesMin } from '@nextcloud/l10n' export default { name: 'RepeatFreqWeeklyOptions', + components: { + ButtonVue, + }, props: { byDay: { type: Array, diff --git a/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue b/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue index 60b8bcd6..5fa4357e 100644 --- a/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue +++ b/src/components/Editor/Repeat/RepeatFreqYearlyOptions.vue @@ -24,13 +24,13 @@ <div class="repeat-option-set repeat-option-set--yearly"> <div class="repeat-option-set-section"> <div class="repeat-option-set-section__grid"> - <button v-for="option in options" + <ButtonVue v-for="option in options" :key="option.value" class="repeat-option-set-section-grid-item" :class="{ primary: option.selected }" @click="toggleByMonth(option.value)"> {{ option.label }} - </button> + </ButtonVue> </div> </div> <div class="repeat-option-set-section repeat-option-set-section--on-the-select"> @@ -51,6 +51,7 @@ <script> import ActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox.js' +import { NcButton as ButtonVue } from '@nextcloud/vue' import RepeatFirstLastSelect from './RepeatFirstLastSelect.vue' import RepeatOnTheSelect from './RepeatOnTheSelect.vue' @@ -60,6 +61,7 @@ export default { name: 'RepeatFreqYearlyOptions', components: { ActionCheckbox, + ButtonVue, RepeatFirstLastSelect, RepeatOnTheSelect, }, diff --git a/src/components/Editor/SaveButtons.vue b/src/components/Editor/SaveButtons.vue index 43f6b817..1119f9bd 100644 --- a/src/components/Editor/SaveButtons.vue +++ b/src/components/Editor/SaveButtons.vue @@ -22,36 +22,41 @@ <template> <div> - <button v-if="showMoreButton" + <ButtonVue v-if="showMoreButton" @click="showMore"> {{ $t('calendar', 'More') }} - </button> - <button v-if="showSaveButton" + </ButtonVue> + <ButtonVue v-if="showSaveButton" class="primary" @click="saveThisOnly"> {{ $t('calendar', 'Save') }} - </button> - <button v-if="showUpdateButton" + </ButtonVue> + <ButtonVue v-if="showUpdateButton" class="primary" @click="saveThisOnly"> {{ $t('calendar', 'Update') }} - </button> - <button v-if="showUpdateOnlyThisButton" + </ButtonVue> + <ButtonVue v-if="showUpdateOnlyThisButton" class="primary" @click="saveThisOnly"> {{ $t('calendar', 'Update this occurrence') }} - </button> - <button v-if="showUpdateThisAndFutureButton" + </ButtonVue> + <ButtonVue v-if="showUpdateThisAndFutureButton" :class="{ primary: forceThisAndAllFuture}" @click="saveThisAndAllFuture"> {{ $t('calendar', 'Update this and all future') }} - </button> + </ButtonVue> </div> </template> <script> +import { NcButton as ButtonVue } from '@nextcloud/vue' + export default { name: 'SaveButtons', + components: { + ButtonVue, + }, props: { canCreateRecurrenceException: { type: Boolean, |