Make components compatible to nextcloud-vue 8

src/Forms.vue

@@ -33,7 +33,7 @@
  </NcAppNavigationNew>
  <template #list>
  <!-- Form-Owner-->
- <NcAppNavigationCaption v-if="!noOwnedForms" :title="t('forms', 'Your Forms')" />
+ <NcAppNavigationCaption v-if="!noOwnedForms" :name="t('forms', 'Your Forms')" />
  <AppNavigationForm v-for="form in forms"
  :key="form.id"
  :form="form"
@@ -44,7 +44,7 @@
  @delete="onDeleteForm" />
 
  <!-- Shared Forms-->
- <NcAppNavigationCaption v-if="!noSharedForms" :title="t('forms', 'Shared with you')" />
+ <NcAppNavigationCaption v-if="!noSharedForms" :name="t('forms', 'Shared with you')" />
  <AppNavigationForm v-for="form in sharedForms"
  :key="form.id"
  :form="form"
@@ -57,14 +57,16 @@
  <!-- No forms & loading emptycontents -->
  <NcAppContent v-if="loading || !hasForms || !routeHash || !routeAllowed">
  <NcEmptyContent v-if="loading"
- :title="t('forms', 'Loading forms …')">
+ class="forms-emptycontent"
+ :name="t('forms', 'Loading forms …')">
  <template #icon>
  <NcLoadingIcon :size="64" />
  </template>
  </NcEmptyContent>
 
  <NcEmptyContent v-else-if="!hasForms"
- :title="t('forms', 'No forms created yet')">
+ class="forms-emptycontent"
+ :name="t('forms', 'No forms created yet')">
  <template #icon>
  <FormsIcon :size="64" />
  </template>
@@ -76,7 +78,8 @@
  </NcEmptyContent>
 
  <NcEmptyContent v-else
- :title="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
+ class="forms-emptycontent"
+ :name="canCreateForms ? t('forms', 'Select a form or create a new one') : t('forms', 'Please select a form')">
  <template #icon>
  <FormsIcon :size="64" />
  </template>
@@ -378,3 +381,9 @@ export default {
  },
 }
 </script>
+
+<style scoped lang="scss">
+.forms-emptycontent {
+ height: 100%;
+}
+</style>

src/FormsEmptyContent.vue

@@ -22,7 +22,7 @@
 
 <template>
  <NcContent app-name="forms" class="forms-emptycontent">
- <NcEmptyContent :title="currentModel.title"
+ <NcEmptyContent :name="currentModel.title"
  :description="currentModel.description">
  <template #icon>
  <Icon :is="currentModel.icon" :size="64" />
@@ -82,5 +82,7 @@ export default {
 .forms-emptycontent {
  flex-basis: 100vw;
  flex-direction: column;
+ height: 100%;
+ display: flex;
 }
 </style>

src/FormsSettings.vue

@@ -22,7 +22,7 @@
 
 <template>
  <div>
- <NcSettingsSection :title="t('forms', 'Form creation')">
+ <NcSettingsSection :name="t('forms', 'Form creation')">
  <NcCheckboxRadioSwitch ref="switchRestrictCreation"
  :checked.sync="appConfig.restrictCreation"
  class="forms-settings__creation__switch"
@@ -39,7 +39,7 @@
  label="displayName"
  @input="onCreationAllowedGroupsChange" />
  </NcSettingsSection>
- <NcSettingsSection :title="t('forms', 'Form sharing')">
+ <NcSettingsSection :name="t('forms', 'Form sharing')">
  <NcCheckboxRadioSwitch ref="switchAllowPublicLink"
  :checked.sync="appConfig.allowPublicLink"
  type="switch"

src/components/AppNavigationForm.vue

@@ -22,7 +22,7 @@
 
 <template>
  <NcListItem ref="navigationItem"
- :title="formTitle"
+ :name="formTitle"
  :to="{
  name: routerTarget,
  params: { hash: form.hash }
@@ -37,7 +37,7 @@
  <IconCheck v-else-if="isExpired" :size="16" />
  <FormsIcon v-else :size="16" />
  </template>
- <template v-if="hasSubtitle" #subtitle>
+ <template v-if="hasSubtitle" #subname>
  {{ formSubtitle }}
  </template>
  <template v-if="!loading && !readOnly" #actions>

src/components/SidebarTabs/SharingShareDiv.vue

@@ -31,7 +31,7 @@
  <span>{{ displayNameAppendix }}</span>
  </div>
  <NcActions class="share-div__actions">
- <NcActionCaption :title="t('forms', 'Permissions')" />
+ <NcActionCaption :name="t('forms', 'Permissions')" />
  <NcActionCheckbox :checked="canAccessResults" @update:checked="updatePermissionResults">
  {{ t('forms', 'View responses') }}
  </NcActionCheckbox>

src/components/TopBar.vue

@@ -198,7 +198,7 @@ export default {
  align-items: center;
  align-self: flex-end;
  justify-content: flex-end;
- padding: calc(var(--default-grid-baseline, 4px) * 2);
+ padding: var(--app-navigation-padding);
 
  &__view-select {
  display: flex;

src/views/Create.vue

@@ -24,7 +24,8 @@
 
 <template>
  <NcAppContent v-if="isLoadingForm">
- <NcEmptyContent :title="t('forms', 'Loading {title} …', { title: form.title })">
+ <NcEmptyContent class="emtpycontent"
+ :name="t('forms', 'Loading {title} …', { title: form.title })">
  <template #icon>
  <NcLoadingIcon :size="64" />
  </template>
@@ -105,7 +106,7 @@
  <div class="question-menu">
  <NcActions ref="questionMenu"
  :open.sync="questionMenuOpened"
- :menu-title="t('forms', 'Add a question')"
+ :menu-name="t('forms', 'Add a question')"
  :aria-label="t('forms', 'Add a question')"
  :primary="true">
  <template #icon>
@@ -425,6 +426,11 @@ export default {
 <style lang="scss" scoped>
 @import '../scssmixins/markdownOutput';
 
+.emptycontent {
+ display: flex;
+ height: 100%;
+}
+
 .app-content {
  display: flex;
  align-items: center;