Update nextcloud 0.10.0

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

.eslintrc.js

@@ -74,7 +74,7 @@ module.exports = {
 		'node/no-unpublished-require': ['off'],
 		'node/no-unsupported-features/es-syntax': ['off'],
 		// kebab case components for vuejs
-		'vue/component-name-in-template-casing': ['error', 'kebab-case'],
+		'vue/component-name-in-template-casing': ['error', 'PascalCase'],
 		// space before self-closing elements
 		'vue/html-closing-bracket-spacing': 'error',
 		// no ending html tag on a new line

package-lock.json

@@ -2298,7 +2298,7 @@
     },
     "cdav-library": {
       "version": "github:nextcloud/cdav-library#8bb139608ae4610efebec7dded1627e8f9ba2731",
-      "from": "github:nextcloud/cdav-library#8bb139608ae4610efebec7dded1627e8f9ba2731",
+      "from": "github:nextcloud/cdav-library",
       "requires": {
         "@babel/polyfill": "^7.4.3"
       }
@@ -6996,9 +6996,9 @@
       }
     },
     "nextcloud-vue": {
-      "version": "0.9.7",
+      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.9.7.tgz",
+      "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.10.0.tgz",
-      "integrity": "sha512-47mr8kBQfJW1oNTgKjFdktgX6+Z0c6jryd1xq+515jLef3o1DWdMmRLF5Yab3TTUdha/aG3dL0lpVQ6Z3jf9Aw==",
+      "integrity": "sha512-Ca1eUefMluq5/3Od5hYaG566HmQDGObjGkHNYXJAvGbeMZ2hvbjbkgx9OzpeLV91NWGF4OYsUOsCe9r5WsBp2w==",
       "requires": {
         "hammerjs": "^2.0.8",
         "md5": "^2.2.1",
@@ -10810,9 +10810,9 @@
       "integrity": "sha512-yaX2its9XAJKGuQqf7LsiZHHSkxsIK8rmCOQOvEGEoF41blKRK8qr9my4qYoD6ikdLss4n8tKqYBecmaY0+WJg=="
     },
     "vue2-datepicker": {
-      "version": "2.10.3",
+      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-2.10.3.tgz",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-2.11.0.tgz",
-      "integrity": "sha512-JfElGcEne5d4rELDSQ+rQ7qqX8g0pdYRYg+KYMqE07628WSyWm2kIoVnKQwvlfMCL4jeeovYVtiDAZHlrxCfGQ==",
+      "integrity": "sha512-EW8M4PPDJG2c2cZXZCYLVregx4dhlJ+GC7rDGuGex0MlnhM8SHegL+/xFxrnUBD9NLvwrgWEEub5i7Ic/EG/+w==",
       "requires": {
         "fecha": "^2.3.3"
       }

package.json

@@ -42,7 +42,7 @@
 		"ical.js": "^1.3.0",
 		"moment": "^2.24.0",
 		"nextcloud-server": "^0.15.9",
-		"nextcloud-vue": "^0.9.7",
+		"nextcloud-vue": "^0.10.0",
 		"p-limit": "^2.2.0",
 		"p-queue": "^5.0.0",
 		"qr-image": "^3.2.0",

src/components/ContactDetails.vue

@@ -39,7 +39,7 @@
 			<!-- contact header -->
 			<header :style="{ 'backgroundColor': colorAvatar }">
 				<!-- avatar and upload photo -->
-				<contact-avatar :contact="contact" />
+				<ContactAvatar :contact="contact" />
 				<!-- QUESTION: is it better to pass contact as a prop or get it from the store inside
 				contact-avatar ?  :avatar="contact.photo"-->
 
@@ -103,7 +103,7 @@
 				<!-- using contact.key in the key and index as key to avoid conflicts between similar data and exact key -->
 				<!-- passing the debounceUpdateContact so that the contact-property component contains the function
 					and allow us to use it on the rfcProps since the scope is forwarded to the actions -->
-				<contact-property v-for="(property, index) in sortedProperties"
+				<ContactProperty v-for="(property, index) in sortedProperties"
 					:key="`${index}-${contact.key}-${property.name}`" :index="index"
 					:sorted-properties="sortedProperties" :property="property"
 					:contact="contact" :local-contact="localContact"
@@ -113,18 +113,18 @@
 					empty property because this is a required prop on regular property-select. But since
 					we are hijacking this... (this is supposed to be used with a ICAL.property, but to avoid code
 					duplication, we created a fake propModel and property with our own options here) -->
-				<property-select :prop-model="addressbookModel" :value.sync="addressbook" :is-first-property="true"
+				<PropertySelect :prop-model="addressbookModel" :value.sync="addressbook" :is-first-property="true"
 					:is-last-property="true" :property="{}" class="property--addressbooks property--last" />
 
 				<!-- Groups always visible -->
-				<property-groups :prop-model="groupsModel" :value.sync="groups" :contact="contact"
+				<PropertyGroups :prop-model="groupsModel" :value.sync="groups" :contact="contact"
 					:is-read-only="isReadOnly" class="property--groups property--last" />
 
 				<!-- Last modified-->
-				<property-rev v-if="contact.rev" :value="contact.rev" />
+				<PropertyRev v-if="contact.rev" :value="contact.rev" />
 
 				<!-- new property select -->
-				<add-new-prop v-if="!isReadOnly" :contact="contact" />
+				<AddNewProp v-if="!isReadOnly" :contact="contact" />
 			</section>
 		</template>
 	</div>

src/components/ContactDetails/ContactDetailsAddNewProp.vue

@@ -23,7 +23,7 @@
 <template>
 	<div class="grid-span-3 property property--last">
 		<!-- title -->
-		<property-title :icon="'icon-add'" :readable-name="t('contacts', 'Add new property')" />
+		<PropertyTitle :icon="'icon-add'" :readable-name="t('contacts', 'Add new property')" />
 
 		<div class="property__row">
 			<div class="property__label" />

src/components/ContactsList.vue

@@ -23,7 +23,7 @@
 <template>
 	<!-- same uid can coexists between different addressbooks
 		so we need to use the addressbook id as key as well -->
-	<recycle-scroller
+	<RecycleScroller
 		id="contacts-list"
 		ref="scroller"
 		:class="{'icon-loading': loading, showdetails: selectedContact}"
@@ -32,14 +32,14 @@
 		:item-size="itemHeight"
 		key-field="key">
 		<template v-slot="{ item, index }">
-			<contacts-list-item
+			<ContactsListItem
 				v-if="contacts[item.key]"
 				:key="item.key"
 				:contact="contacts[item.key]"
 				:index="index"
 				@deleted="selectContact" />
 		</template>
-	</recycle-scroller>
+	</RecycleScroller>
 </template>
 
 <script>

src/components/Properties/PropertyDateTime.vue

@@ -23,7 +23,7 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
 			:info="propModel.info" />
 
 		<div class="property__row">
@@ -47,7 +47,7 @@
 			<action :actions="actions" class="property__actions" />
 
 			<!-- Real input where the picker shows -->
-			<datetime-picker :value="vcardTimeLocalValue.toJSDate()" :minute-step="10" :lang="lang"
+			<DatetimePicker :value="vcardTimeLocalValue.toJSDate()" :minute-step="10" :lang="lang"
 				:clearable="false" :first-day-of-week="firstDay" :type="inputType"
 				:readonly="isReadOnly" :format="dateFormat" class="property__value"
 				confirm @confirm="updateValue" />

src/components/Properties/PropertyMultipleText.vue

@@ -23,7 +23,7 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
 			:info="propModel.info" />
 
 		<div class="property__row">

src/components/Properties/PropertySelect.vue

@@ -23,7 +23,7 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
 			:info="propModel.info" />
 
 		<div class="property__row">

src/components/Properties/PropertyText.vue

@@ -23,7 +23,7 @@
 <template>
 	<div v-if="propModel" :class="`grid-span-${gridLength}`" class="property">
 		<!-- title if first element -->
-		<property-title v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
+		<PropertyTitle v-if="isFirstProperty && propModel.icon" :icon="propModel.icon" :readable-name="propModel.readableName"
 			:info="propModel.info" />
 
 		<div class="property__row">

src/components/Settings/SettingsAddressbook.vue

@@ -42,7 +42,7 @@
 		</a>
 
 		<!-- sharing input -->
-		<share-address-book v-if="shareOpen && !addressbook.readOnly" :addressbook="addressbook" />
+		<ShareAddressBook v-if="shareOpen && !addressbook.readOnly" :addressbook="addressbook" />
 	</li>
 </template>
 

src/views/Contacts.vue

@@ -22,43 +22,43 @@
   -->
 
 <template>
-	<app-content app-name="contacts" :class="{'icon-loading': loading}">
+	<Content app-name="contacts" :class="{'icon-loading': loading}">
 		<!-- new-contact-button + navigation + settings -->
-		<app-navigation slot="navigation">
+		<AppNavigation>
 			<!-- new-contact-button -->
-			<app-navigation-new v-if="!loading" button-id="new-contact-button" :text="t('contacts','New contact')"
+			<AppNavigationNew v-if="!loading" button-id="new-contact-button" :text="t('contacts','New contact')"
 				button-class="icon-add" :disabled="!defaultAddressbook" @click="newContact" />
 
 			<!-- groups list -->
 			<ul v-if="!loading" id="groups-list">
-				<app-navigation-item v-for="item in menu" :key="item.key" :item="item" />
+				<AppNavigationItem v-for="item in menu" :key="item.key" :item="item" />
 			</ul>
 
 			<!-- settings -->
-			<app-navigation-settings v-if="!loading">
+			<AppNavigationSettings v-if="!loading">
-				<settings-section />
+				<SettingsSection />
-			</app-navigation-settings>
+			</AppNavigationSettings>
-		</app-navigation>
+		</AppNavigation>
 
-		<template slot="content">
+		<AppContent>
 			<!-- go back to list when in details mode -->
 			<div v-if="selectedContact && isMobile" id="app-details-toggle" class="icon-confirm"
 				tabindex="0" @click="showList" />
 
 			<div id="app-content-wrapper">
 				<!-- contacts list -->
-				<contacts-list :list="contactsList" :contacts="contacts" :loading="loading"
+				<ContactsList :list="contactsList" :contacts="contacts" :loading="loading"
 					:search-query="searchQuery" />
 
 				<!-- main contacts details -->
-				<contact-details :loading="loading" :contact-key="selectedContact" />
+				<ContactDetails :loading="loading" :contact-key="selectedContact" />
 			</div>
-		</template>
+		</AppContent>
-		<modal v-if="isImporting" :clear-view-delay="-1" :can-close="isImportDone"
+		<Modal v-if="isImporting" :clear-view-delay="-1" :can-close="isImportDone"
 			@close="closeImport">
-			<import-screen />
+			<ImportScreen />
-		</modal>
+		</Modal>
-	</app-content>
+	</Content>
 </template>
 
 <script>
@@ -68,6 +68,7 @@ import {
 	AppNavigationItem,
 	AppNavigationNew,
 	AppNavigationSettings,
+	Content,
 	Modal
 } from 'nextcloud-vue'
 import isMobile from 'nextcloud-vue/dist/Mixins/isMobile'
@@ -98,11 +99,12 @@ export default {
 		AppNavigationItem,
 		AppNavigationNew,
 		AppNavigationSettings,
-		SettingsSection,
-		ContactsList,
 		ContactDetails,
+		ContactsList,
+		Content,
 		ImportScreen,
-		Modal
+		Modal,
+		SettingsSection
 	},
 
 	mixins: [