@nextcloud/vue 3.10.2 → 4.1.1

package/src/components/AppNavigationSettings/AppNavigationSettings.vue

@@ -1,105 +0,0 @@
-<!--
- - @copyright Copyright (c) 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
- -
- - @author Christoph Wurst <christoph@winzerhof-wurst.at>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
-
-<template>
-	<div id="app-settings"
-		v-click-outside="clickOutsideConfig"
-		:class="{ open }">
-		<div id="app-settings-header">
-			<button
-				class="settings-button"
-				type="button"
-				@click="toggleMenu">
-				{{ title }}
-			</button>
-		</div>
-		<transition name="slide-up">
-			<div v-show="open" id="app-settings-content">
-				<slot />
-			</div>
-		</transition>
-	</div>
-</template>
-
-<script>
-import { directive as ClickOutside } from 'v-click-outside'
-import { t } from '../../l10n'
-import { excludeClickOutsideClasses } from '../../mixins'
-
-export default {
-	directives: {
-		ClickOutside,
-	},
-	mixins: [
-		excludeClickOutsideClasses,
-	],
-	props: {
-		title: {
-			type: String,
-			required: false,
-			default: t('Settings'),
-		},
-	},
-	data() {
-		return {
-			open: false,
-			clickOutsideConfig: {
-				handler: this.closeMenu,
-				middleware: this.clickOutsideMiddleware,
-			},
-		}
-	},
-	methods: {
-		toggleMenu() {
-			this.open = !this.open
-		},
-		closeMenu() {
-			this.open = false
-		},
-	},
-}
-</script>
-<style lang="scss" scoped>
-#app-settings-content {
-	display: block;
-	padding: 10px;
-	background-color: var(--color-main-background);
-	/* restrict height of settings and make scrollable */
-	max-height: 300px;
-	overflow-y: auto;
-	box-sizing: border-box;
-}
-
-.slide-up-leave-active,
-.slide-up-enter-active {
-	transition-duration: var(--animation-slow);
-	transition-property: max-height, padding;
-	overflow-y: hidden !important;
-}
-
-.slide-up-enter,
-.slide-up-leave-to {
-	max-height: 0 !important;
-	padding: 0 10px !important;
-}
-
-</style>

package/src/components/AppNavigationSettings/index.js

@@ -1,23 +0,0 @@
-/*
- * @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
- *
- * @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import AppNavigationSettings from './AppNavigationSettings'
-
-export default AppNavigationSettings

package/src/components/AppNavigationSpacer/AppNavigationSpacer.vue

@@ -1,39 +0,0 @@
-<!--
- - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
- -
- - @author Christoph Wurst <christoph@winzerhof-wurst.at>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
-<template>
-	<li class="app-navigation-spacer" />
-</template>
-
-<script>
-export default {
-	name: 'AppNavigationSpacer',
-}
-</script>
-
-<style scoped>
-	.app-navigation-spacer {
-		flex-shrink: 0;
-		order: 1;
-		height: 22px;
-	}
-
-</style>

package/src/components/AppNavigationSpacer/index.js

@@ -1,23 +0,0 @@
-/**
- * @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
- *
- * @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import AppNavigationSpacer from './AppNavigationSpacer'
-
-export default AppNavigationSpacer

package/src/components/AppNavigationToggle/AppNavigationToggle.vue

@@ -1,78 +0,0 @@
-<!--
- - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
- -
- - @author Christoph Wurst <christoph@winzerhof-wurst.at>
- - @author John Molakvoæ <skjnldsv@protonmail.com>
- - @author Marco Ambrosini <marcoambrosini@pm.me>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
-<template>
-	<a class="app-navigation-toggle"
-		href="#"
-		:aria-expanded="open ? 'true' : 'false'"
-		aria-controls="app-navigation-vue"
-		@click.prevent="toggleNavigation"
-		@keydown.space.exact.prevent="toggleNavigation" />
-</template>
-
-<script>
-export default {
-
-	name: 'AppNavigationToggle',
-
-	props: {
-		open: {
-			type: Boolean,
-			required: true,
-		},
-	},
-
-	methods: {
-		toggleNavigation() {
-			this.$emit('update:open', !this.open)
-		},
-	},
-}
-</script>
-
-<style scoped lang="scss">
-@import '../../fonts/scss/iconfont-vue';
-
-.app-navigation-toggle {
-	position: absolute;
-	top: 0;
-	right: 0;
-	margin-right: - $clickable-area;
-	width: $clickable-area;
-	height: $clickable-area;
-	padding: $icon-margin;
-
-	cursor: pointer;
-	opacity: 0.6;
-
-	font-size: $icon-size;
-	line-height: 17px;
-	@include iconfont('menu');
-
-	&:hover,
-	&:focus {
-		opacity: $opacity_full;
-	}
-}
-
-</style>

package/src/components/AppNavigationToggle/index.js

@@ -1,24 +0,0 @@
-/**
- * @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
- *
- * @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
- *
- * @license GNU AGPL version 3 or any later version
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import AppNavigationToggle from './AppNavigationToggle'
-
-export default AppNavigationToggle
-export { AppNavigationToggle as AppNavigationSpacer }

package/src/components/AppSettingsDialog/AppSettingsDialog.vue

@@ -1,331 +0,0 @@
-<!--
- - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@pm.me>
- -
- - @author Marco Ambrosini <marcoambrosini@pm.me>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
- -
- -->
-<docs>
-Just nest the `AppSettingSections` component into `AppSettingsDialog`,
-providing the section's title prop. You can put your settings within each
-`AppSettingsSection` component.
-
-```vue
-<template>
-	<div>
-		<button @click="settingsOpen = true">Show Settings</button>
-		<AppSettingsDialog :open.sync="settingsOpen" >
-			<AppSettingsSection title="Example title 1">
-				Some example content
-			</AppSettingsSection>
-			<AppSettingsSection title="Example title 2">
-				Some more content
-			</AppSettingsSection>
-		</AppSettingsDialog>
-	</div>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			settingsOpen: false,
-		}
-	},
-}
-</script>
-```
-</docs>
-
-<script>
-import Modal from '../Modal'
-import isMobile from '../../mixins/isMobile'
-import debounce from 'debounce'
-
-export default {
-
-	name: 'AppSettingsDialog',
-
-	components: {
-		Modal,
-	},
-
-	mixins: [isMobile],
-
-	props: {
-		/**
-		 * Determines the open / closed state of the modal
-		 */
-		open: {
-			type: Boolean,
-			required: true,
-		},
-		/**
-		 * Shows the navigation on desktop if true
-		 */
-		showNavigation: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * Selector for the popover container
-		 */
-		container: {
-			type: String,
-			default: 'body',
-		},
-	},
-
-	data() {
-		return {
-			selectedSection: '',
-			linkClicked: false,
-			addedScrollListener: false,
-			scroller: null,
-		}
-	},
-
-	computed: {
-
-		hasNavigation() {
-			if (this.isMobile || !this.showNavigation) {
-				return false
-			} else {
-				return true
-			}
-		},
-
-		settingsNavigationAriaLabel() {
-			return t('Settings navigation')
-		},
-	},
-
-	mounted() {
-		// Select first settings section
-		this.selectedSection = this.$slots.default[0].componentOptions.propsData.title
-	},
-
-	updated() {
-		// Check that the scroller element has been mounted
-		if (!this.$refs.settingsScroller) {
-			return
-		}
-		// Get the scroller element
-		this.scroller = this.$refs.settingsScroller
-		if (!this.addedScrollListener) {
-			this.scroller.addEventListener('scroll', this.handleScroll)
-			this.addedScrollListener = true
-		}
-
-	},
-
-	methods: {
-
-		/**
-		 * Builds the settings navigation menu
-		 * @param {object} slots The default slots object passed from the render function.
-		 * @returns {array} the navigation items
-		 */
-		getSettingsNavigation(slots) {
-			// Array of navigationitems strings
-			const navigationItems = slots.filter(vNode => vNode.componentOptions).map(vNode => vNode.componentOptions.propsData?.title)
-			// Check for the uniqueness of section titles
-			navigationItems.forEach((element, index) => {
-				const newArray = [...navigationItems]
-				newArray.splice(index, 1)
-				if (newArray.indexOf(element) !== -1) {
-					throw new Error(`Duplicate section title found: ${element}. Settings navigation sections must have unique section titles.`)
-				}
-			})
-			return navigationItems
-		},
-
-		/**
-		 * Scrolls the content to the selected settings section.absolute
-		 * @param {string} item the name of the section
-		 */
-		handleSettingsNavigationClick(item) {
-			this.linkClicked = true
-			document.getElementById('settings-section_' + item.replace(/\s+/g, '')).scrollIntoView({
-				behavior: 'smooth',
-				inline: 'nearest',
-			})
-			this.selectedSection = item
-			setTimeout(() => {
-				this.linkClicked = false
-			}, 1000)
-		},
-
-		handleCloseModal() {
-			this.$emit('update:open', false)
-			// Remove scroll listener each time the modal is closed
-			this.scroller.removeEventListener('scroll', this.handleScroll)
-			this.addedScrollListener = false
-			this.scroller.scrollTop = 0
-		},
-
-		handleScroll() {
-			if (!this.linkClicked) {
-				this.unfocusNavigationItem()
-			}
-		},
-
-		// Remove selected section once the user starts scrolling
-		unfocusNavigationItem: debounce(function() {
-			this.selectedSection = ''
-			if (document.activeElement.className.includes('navigation-list__link')) {
-				document.activeElement.blur()
-			}
-		}, 300),
-
-		handleLinkKeydown(keyDownEvent, item) {
-			if (keyDownEvent.code === 'Enter') {
-				this.handleSettingsNavigationClick(item)
-			}
-		},
-	},
-
-	render(createElement) {
-		/**
-		 * Build the navigation
-		 * @returns {object} the navigation
-		 */
-		const createAppSettingsNavigation = () => {
-			if (this.hasNavigation) {
-				return [createElement('div', {
-					attrs: {
-						class: 'app-settings__navigation',
-						role: 'tablist',
-						'aria-label': this.settingsNavigationAriaLabel,
-					},
-				}, [createElement('ul', {
-					attrs: {
-						class: 'navigation-list',
-						role: 'tablist',
-					},
-				}, this.getSettingsNavigation(this.$slots.default).map(item => {
-					return createListElemtent(item)
-				}))])]
-			} else {
-				return []
-			}
-		}
-
-		/**
-		 * Build each list element in the navigation
-		 * @param {object} item the navigation item
-		 * @returns {object} the list element
-		 */
-		const createListElemtent = (item) => createElement('li', {}, [createElement('a', {
-			class: {
-				'navigation-list__link': true,
-				'navigation-list__link--active': item === this.selectedSection,
-			},
-
-			attrs: {
-				role: 'tab',
-				'aria-selected': item === this.selectedSection,
-				tabindex: '0',
-			},
-
-			on: {
-				click: () => this.handleSettingsNavigationClick(item),
-				keydown: () => this.handleLinkKeydown(event, item),
-			},
-		}, item)])
-
-		// Return value of the render function
-		if (this.open) {
-			return createElement('Modal', {
-				attrs: {
-					container: this.container,
-				},
-				on: {
-					close: () => { this.handleCloseModal() },
-				},
-			}, [
-				createElement('div', {
-					attrs: {
-						class: 'app-settings',
-					},
-				}, [...createAppSettingsNavigation(),
-					createElement('div', {
-						attrs: {
-							class: 'app-settings__content',
-						},
-						ref: 'settingsScroller',
-					}, this.$slots.default)]),
-			])
-		} else {
-			return undefined
-		}
-	},
-}
-
-</script>
-
-<style lang="scss" scoped>
-
-::v-deep .modal-wrapper .modal-container {
-	display: flex;
-}
-
-.app-settings {
-	display: flex;
-	width: 100%;
-	&__navigation {
-		min-width: 200px;
-		margin-right: 20px;
-	}
-	&__content {
-		max-width: 100vw;
-		overflow-y: auto;
-		overflow-x: hidden;
-		padding: 24px;
-	}
-}
-
-.navigation-list {
-	height: 100%;
-	overflow-y: auto;
-	&__link {
-		display: block;
-		font-size: 16px;
-		height: $clickable-area;
-		margin: 4px;
-		line-height: $clickable-area;
-		border-radius: var(--border-radius-pill);
-		font-weight: bold;
-		padding: 0 20px;
-		cursor: pointer;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		background-color: transparent;
-		border: none;
-		&:hover,
-		&:focus {
-			background-color: var(--color-background-hover);
-		}
-		&--active {
-			background-color: var(--color-primary-light) !important;
-		}
-	}
-}
-
-</style>