Bump vue component versionwork/update-vue-component

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

5 files changed, 109 insertions, 106 deletions

diff --git a/src/client.js b/src/client.js
index 3666fd8f..a34f5d36 100644
--- a/src/client.js
+++ b/src/client.js
@@ -20,8 +20,8 @@
  *
  */
 
-import ACL_PROPERTIES from './model/Properties'
-import Rule from './model/Rule'
+import ACL_PROPERTIES from './model/Properties.js'
+import Rule from './model/Rule.js'
 
 let client
 
diff --git a/src/components/AclStateButton.vue b/src/components/AclStateButton.vue
index 5b54cd07..29919e82 100644
--- a/src/components/AclStateButton.vue
+++ b/src/components/AclStateButton.vue
@@ -21,38 +21,48 @@
   -->
 <template>
 	<div v-if="readOnly">
-		<button v-if="!isAllowed" v-tooltip="t('groupfolders', 'Denied')" class="icon-deny" />
-		<button v-else v-tooltip="t('groupfolders', 'Allowed')" class="icon-checkmark" />
+		<NcButton v-if="!isAllowed" v-tooltip="t('groupfolders', 'Denied')">
+			<Cancel :size="16" />
+		</NcButton>
+		<NcButton v-else v-tooltip="t('groupfolders', 'Allowed')">
+			<Check :size="16" />
+		</NcButton>
 	</div>
-	<div v-else v-click-outside="popoverClose" style="position: relative;">
-		<button v-if="state === STATES.INHERIT_DENY"
-			v-tooltip="t('groupfolders', 'Denied (Inherited permission)')"
-			:disabled="disabled"
-			class="icon-deny inherited"
-			@click="open = true" />
-		<button v-else-if="state === STATES.INHERIT_ALLOW"
-			v-tooltip="t('groupfolders', 'Allowed (Inherited permission)')"
-			:disabled="disabled"
-			class="icon-checkmark inherited"
-			@click="open = true" />
-		<button v-else-if="state === STATES.SELF_DENY"
-			v-tooltip="t('groupfolders', 'Denied')"
-			:disabled="disabled"
-			:class="'icon-deny' + (inherited ? ' inherited' : '')"
-			@click="open = true" />
-		<button v-else-if="state === STATES.SELF_ALLOW"
-			v-tooltip="t('groupfolders', 'Allowed')"
-			:disabled="disabled"
-			:class="'icon-checkmark' + (inherited ? ' inherited' : '')"
-			@click="open = true" />
-		<div class="popovermenu" :class="{open: open}">
-			<PopoverMenu :menu="menu" />
-		</div>
+	<div v-else>
+		<NcActions :aria-label="label" :v-tooltip="label">
+			<template #icon>
+				<component :is="icon" :size="16" />
+			</template>
+			<NcActionRadio name="state"
+				:checked="state === STATES.INHERIT_ALLOW || state === STATES.INHERIT_DENY"
+				:disabled="disabled"
+				@change="$emit('update', STATES.INHERIT_ALLOW)">
+				{{ t('groupfolders', 'Inherit permission') }}
+			</NcActionRadio>
+			<NcActionRadio name="state"
+				:check="state === STATES.SELF_DENY"
+				:disabled="disabled"
+				@change="$emit('update', STATES.SELF_DENY)">
+				{{ t('groupfolders', 'Deny') }}
+			</NcActionRadio>
+			<NcActionRadio name="state"
+				:check="state === STATES.SELF_ALLOW"
+				:disabled="disabled"
+				@change="$emit('update', STATES.SELF_ALLOW)">
+				{{ t('groupfolders', 'Allow') }}
+			</NcActionRadio>
+		</NcActions>
 	</div>
 </template>
 
 <script>
-import { PopoverMenu, Tooltip } from '@nextcloud/vue'
+import Check from 'vue-material-design-icons/Check.vue'
+import Cancel from 'vue-material-design-icons/Cancel.vue'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
+import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
+import NcActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 const STATES = {
 	INHERIT_DENY: 0,
@@ -66,7 +76,14 @@ export default {
 	directives: {
 		tooltip: Tooltip,
 	},
-	components: { PopoverMenu },
+	components: {
+		NcPopoverMenu,
+		NcButton,
+		NcActions,
+		NcActionRadio,
+		Check,
+		Cancel,
+	},
 	props: {
 		inherited: {
 			type: Boolean,
@@ -88,71 +105,39 @@ export default {
 	data() {
 		return {
 			STATES,
-			open: false,
-			menu: [
-				{
-					icon: 'icon-history',
-					text: t('groupfolders', 'Inherit permission'),
-					active: this.state === STATES.INHERIT_ALLOW || this.state === STATES.INHERIT_DENY,
-					action: () => {
-						this.$emit('update', STATES.INHERIT_ALLOW)
-						this.popoverClose()
-					},
-				},
-				{
-					icon: 'icon-close',
-					text: t('groupfolders', 'Deny'),
-					active: this.state === STATES.SELF_DENY,
-					action: () => {
-						this.$emit('update', STATES.SELF_DENY)
-						this.popoverClose()
-					},
-				},
-				{
-					icon: 'icon-history',
-					text: t('groupfolders', 'Allow'),
-					active: this.state === STATES.SELF_ALLOW,
-					action: () => {
-						this.$emit('update', STATES.SELF_ALLOW)
-						this.popoverClose()
-					},
-				},
-			],
 		}
 	},
 	computed: {
 		isAllowed() {
 			return this.state & 1
 		},
-	},
-	methods: {
-		popoverClose() {
-			this.open = false
+		icon() {
+			switch (this.state) {
+			case STATES.INHERIT_ALLOW:
+			case STATES.SELF_ALLOW:
+				return Check
+			default:
+				return Cancel
+			}
+		},
+		label() {
+			switch (this.state) {
+			case STATES.INHERIT_DENY:
+				return t('groupfolders', 'Denied (Inherited permission)')
+			case STATES.INHERIT_ALLOW:
+				return t('groupfolders', 'Allowed (Inherited permission)')
+			case STATES.SELF_DENY:
+				return t('groupfolders', 'Denied')
+			case STATES.SELF_ALLOW:
+				return t('groupfolders', 'Allowed')
+			}
+			return ''
 		},
 	},
 }
 </script>
 
 <style scoped>
-	.popovermenu {
-		top: 38px;
-		right: -5px;
-	}
-
-	button {
-		height: 24px;
-		border-color: transparent;
-	}
-
-	button:hover {
-		height: 24px;
-		border-color: var(--color-primary, #0082c9);
-	}
-
-	.icon-deny {
-		background-image: url('../../img/deny.svg');
-	}
-
 	.inherited {
 		opacity: 0.5;
 	}
diff --git a/src/components/SharingSidebarView.vue b/src/components/SharingSidebarView.vue
index a967a5a0..9ae07ff9 100644
--- a/src/components/SharingSidebarView.vue
+++ b/src/components/SharingSidebarView.vue
@@ -52,7 +52,7 @@
 			<tbody v-if="!isAdmin">
 				<tr>
 					<td>
-						<Avatar user="admin" :size="24" />
+						<NcAvatar user="admin" :size="24" />
 					</td>
 					<td class="username">
 						{{ t('groupfolders', 'You') }}
@@ -77,7 +77,7 @@
 			<tbody v-else>
 				<tr v-for="item in list" :key="item.mappingType + '-' + item.mappingId">
 					<td>
-						<Avatar :user="item.mappingId" :is-no-user="item.mappingType !== 'user'" :size="24" />
+						<NcAvatar :user="item.mappingId" :is-no-user="item.mappingType !== 'user'" :size="24" />
 					</td>
 					<td v-tooltip="getFullDisplayName(item.mappingDisplayName, item.mappingType)" class="username">
 						{{ getFullDisplayName(item.mappingDisplayName, item.mappingType) }}
@@ -113,19 +113,27 @@
 							@update="changePermission(item, OC.PERMISSION_SHARE, $event)" />
 					</td>
 					<td class="state-column">
-						<a v-if="item.inherited === false"
-							v-tooltip="t('groupfolders', 'Remove access rule')"
-							class="icon-close"
-							@click="removeAcl(item)" />
+						<NcButton v-if="item.inherited === false"
+							type="tertiary"
+							:v-tooltip="t('groupfolders', 'Remove access rule')"
+							:aria-label="t('groupfolders', 'Remove access rule')"
+							@click="removeAcl(item)">
+							<template #icon>
+								<Close :size="16" />
+							</template>
+						</NcButton>
 					</td>
 				</tr>
 			</tbody>
 		</table>
-		<button v-if="isAdmin && !loading && !showAclCreate" @click="toggleAclCreate">
-			<span class="icon-add" /> {{
-				t('groupfolders', 'Add advanced permission rule') }}
-		</button>
-		<Multiselect v-if="isAdmin && !loading"
+		<NcButton v-if="isAdmin && !loading && !showAclCreate"
+			@click="toggleAclCreate">
+			<template #icon>
+				<Plus :size="16" />
+			</template>
+			{{ t('groupfolders', 'Add advanced permission rule') }}
+		</NcButton>
+		<NcMultiselect v-if="isAdmin && !loading"
 			v-show="showAclCreate"
 			ref="select"
 			v-model="value"
@@ -138,14 +146,14 @@
 			@select="createAcl"
 			@search-change="searchMappings">
 			<template slot="singleLabel" slot-scope="props">
-				<Avatar :user="props.option.id" :is-no-user="props.option.type !== 'user'" />
+				<NcAvatar :user="props.option.id" :is-no-user="props.option.type !== 'user'" />
 				{{ getFullDisplayName(props.option.displayname, props.option.type) }}
 			</template>
 			<template slot="option" slot-scope="props">
-				<Avatar :user="props.option.id" :is-no-user="props.option.type !== 'user'" />
+				<NcAvatar :user="props.option.id" :is-no-user="props.option.type !== 'user'" />
 				{{ getFullDisplayName(props.option.displayname, props.option.type) }}
 			</template>
-		</Multiselect>
+		</NcMultiselect>
 	</div>
 </template>
 
@@ -153,11 +161,16 @@
 import Vue from 'vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
-import { Avatar, Multiselect, Tooltip } from '@nextcloud/vue'
-import AclStateButton from './AclStateButton'
-import Rule from './../model/Rule'
-import BinaryTools from './../BinaryTools'
-import client from './../client'
+import AclStateButton from './AclStateButton.vue'
+import Rule from './../model/Rule.js'
+import BinaryTools from './../BinaryTools.js'
+import client from './../client.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
+import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import Close from 'vue-material-design-icons/Close.vue'
 
 let searchRequestCancelSource = null
 
@@ -167,7 +180,12 @@ export default {
 		tooltip: Tooltip,
 	},
 	components: {
-		Avatar, Multiselect, AclStateButton,
+		NcAvatar,
+		NcMultiselect,
+		NcButton,
+		AclStateButton,
+		Plus,
+		Close,
 	},
 	props: {
 		fileInfo: {
diff --git a/src/files.js b/src/files.js
index 905a8397..368a3a39 100644
--- a/src/files.js
+++ b/src/files.js
@@ -20,7 +20,7 @@
  *
  */
 import { generateUrl, imagePath } from '@nextcloud/router'
-import './client'
+import './client.js'
 
 // eslint-disable-next-line
 __webpack_nonce__ = btoa(OC.requestToken)
@@ -37,7 +37,7 @@ window.addEventListener('DOMContentLoaded', () => {
 	if (!OCA?.Sharing?.ShareTabSections) {
 		return
 	}
-	import(/* webpackChunkName: "sharing" */'./SharingSidebarApp').then((Module) => {
+	import(/* webpackChunkName: "sharing" */'./SharingSidebarApp.js').then((Module) => {
 		OCA.Sharing.ShareTabSections.registerSection((el, fileInfo) => {
 			if (fileInfo.mountType !== 'group') {
 				return
diff --git a/src/model/Rule.js b/src/model/Rule.js
index 2dfbf135..118bdc65 100644
--- a/src/model/Rule.js
+++ b/src/model/Rule.js
@@ -20,7 +20,7 @@
  *
  */
 
-import PROPERTIES from './Properties'
+import PROPERTIES from './Properties.js'
 
 export default class Rule {