@nextcloud/vue 3.10.2 → 4.1.1

package/src/components/MultiselectTags/api.js

@@ -1,115 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
- *
- * @author Julius Härtl <jus@bitgrid.net>
- *
- * @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 axios from '@nextcloud/axios'
-import { generateRemoteUrl } from '@nextcloud/router'
-
-const xmlToJson = (xml) => {
-	let obj = {}
-
-	if (xml.nodeType === 1) {
-		if (xml.attributes.length > 0) {
-			obj['@attributes'] = {}
-			for (let j = 0; j < xml.attributes.length; j++) {
-				const attribute = xml.attributes.item(j)
-				obj['@attributes'][attribute.nodeName] = attribute.nodeValue
-			}
-		}
-	} else if (xml.nodeType === 3) {
-		obj = xml.nodeValue
-	}
-
-	if (xml.hasChildNodes()) {
-		for (let i = 0; i < xml.childNodes.length; i++) {
-			const item = xml.childNodes.item(i)
-			const nodeName = item.nodeName
-			if (typeof (obj[nodeName]) === 'undefined') {
-				obj[nodeName] = xmlToJson(item)
-			} else {
-				if (typeof obj[nodeName].push === 'undefined') {
-					const old = obj[nodeName]
-					obj[nodeName] = []
-					obj[nodeName].push(old)
-				}
-				obj[nodeName].push(xmlToJson(item))
-			}
-		}
-	}
-	return obj
-}
-
-const parseXml = (xml) => {
-	let dom = null
-	try {
-		dom = (new DOMParser()).parseFromString(xml, 'text/xml')
-	} catch (e) {
-		console.error('Failed to parse xml document', e)
-	}
-	return dom
-}
-
-const xmlToTagList = (xml) => {
-	const json = xmlToJson(parseXml(xml))
-	const list = json['d:multistatus']['d:response']
-	const result = []
-	for (const index in list) {
-		const tag = list[index]['d:propstat']
-
-		if (tag['d:status']['#text'] !== 'HTTP/1.1 200 OK') {
-			continue
-		}
-		result.push({
-			id: parseInt(tag['d:prop']['oc:id']['#text']),
-			displayName: tag['d:prop']['oc:display-name']['#text'],
-			canAssign: tag['d:prop']['oc:can-assign']['#text'] === 'true',
-			userAssignable: tag['d:prop']['oc:user-assignable']['#text'] === 'true',
-			userVisible: tag['d:prop']['oc:user-visible']['#text'] === 'true',
-		})
-	}
-	return result
-}
-
-const searchTags = async function() {
-	if (window.NextcloudVueDocs) {
-		return Promise.resolve(xmlToTagList(window.NextcloudVueDocs.tags))
-	}
-
-	const result = await axios({
-		method: 'PROPFIND',
-		url: generateRemoteUrl('dav') + '/systemtags/',
-		data: `<?xml version="1.0"?>
-					<d:propfind  xmlns:d="DAV:" xmlns:oc="http://owncloud.org/ns">
-					  <d:prop>
-						<oc:id />
-						<oc:display-name />
-						<oc:user-visible />
-						<oc:user-assignable />
-						<oc:can-assign />
-					  </d:prop>
-					</d:propfind>`,
-	})
-	return xmlToTagList(result.data)
-}
-
-export {
-	searchTags,
-}

package/src/components/MultiselectTags/index.js

@@ -1,23 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @author John Molakvoæ <skjnldsv@protonmail.com>
- *
- * @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 MultiselectTags from './MultiselectTags'
-
-export default MultiselectTags

package/src/components/Popover/Popover.vue

@@ -1,208 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 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>
-
-### General description
-
-This component is just a wrapper for the v-component plugin by Akryum,
-please refer to this documentation for customization:
-https://github.com/Akryum/v-tooltip
-
-This components has two slots:
-* 'trigger' which can be any html element and it will trigger the popover
-this slot is optional since you can toggle the popover also by updating the
-open prop on this component;
-
-* a default slot that is for the content of the popover.
-
-### Examples
-
-With a `<button>` as a trigger:
-```vue
-<template>
-	<Popover>
-		<button slot="trigger"> I am the trigger </button>
-		<template>
-		<h2>this is some content</h2>
-		</template>
-	</Popover>
-</template>
-```
-</docs>
-
-<template>
-	<VPopover
-		ref="popover"
-		v-bind="$attrs"
-		popover-base-class="popover"
-		popover-wrapper-class="popover__wrapper"
-		popover-arrow-class="popover__arrow"
-		popover-inner-class="popover__inner"
-		v-on="$listeners">
-		<!-- This will be the popover target (for the events and position) -->
-		<slot name="trigger" />
-		<!-- This will be the content of the popover -->
-		<template slot="popover">
-			<slot />
-		</template>
-	</VPopover>
-</template>
-
-<script>
-import { VPopover } from 'v-tooltip'
-
-export default {
-	name: 'Popover',
-	components: {
-		VPopover,
-	},
-
-	mounted() {
-		this.$watch(
-			() => {
-				// required because v-tooltip doesn't provide events
-				// and @show is too early
-				// see https://github.com/Akryum/v-tooltip/issues/661
-				return this.$refs.popover.isOpen
-			},
-			(val) => {
-				if (val) {
-					/**
-					 * Triggered after the tooltip was visually displayed.
-					 *
-					 * This is different from the 'show' and 'apply-show' which
-					 * run earlier than this where there is no guarantee that the
-					 * tooltip is already visible and in the DOM.
-					 */
-					this.$emit('after-show')
-				} else {
-					/**
-					 * Triggered after the tooltip was visually hidden.
-					 */
-					this.$emit('after-hide')
-				}
-			}
-		)
-	},
-}
-</script>
-
-<style lang="scss">
-$arrow-width: 10px;
-
-.popover {
-	z-index: 100000;
-	display: block !important;
-
-	filter: drop-shadow(0 1px 10px var(--color-box-shadow));
-
-	&__inner {
-		padding: 0;
-		color: var(--color-main-text);
-		border-radius: var(--border-radius);
-		background: var(--color-main-background);
-	}
-
-	&__arrow {
-		position: absolute;
-		z-index: 1;
-		width: 0;
-		height: 0;
-		margin: $arrow-width;
-		border-style: solid;
-		border-color: var(--color-main-background);
-	}
-
-	&[x-placement^='top'] {
-		margin-bottom: $arrow-width;
-
-		.popover__arrow {
-			bottom: -$arrow-width;
-			left: calc(50% - $arrow-width);
-			margin-top: 0;
-			margin-bottom: 0;
-			border-width: $arrow-width $arrow-width 0 $arrow-width;
-			border-right-color: transparent !important;
-			border-bottom-color: transparent !important;
-			border-left-color: transparent !important;
-		}
-	}
-
-	&[x-placement^='bottom'] {
-		margin-top: $arrow-width;
-
-		.popover__arrow {
-			top: -$arrow-width;
-			left: calc(50% - $arrow-width);
-			margin-top: 0;
-			margin-bottom: 0;
-			border-width: 0 $arrow-width $arrow-width $arrow-width;
-			border-top-color: transparent !important;
-			border-right-color: transparent !important;
-			border-left-color: transparent !important;
-		}
-	}
-
-	&[x-placement^='right'] {
-		margin-left: $arrow-width;
-
-		.popover__arrow {
-			top: calc(50% - $arrow-width);
-			left: -$arrow-width;
-			margin-right: 0;
-			margin-left: 0;
-			border-width: $arrow-width $arrow-width $arrow-width 0;
-			border-top-color: transparent !important;
-			border-bottom-color: transparent !important;
-			border-left-color: transparent !important;
-		}
-	}
-
-	&[x-placement^='left'] {
-		margin-right: $arrow-width;
-
-		.popover__arrow {
-			top: calc(50% - $arrow-width);
-			right: -$arrow-width;
-			margin-right: 0;
-			margin-left: 0;
-			border-width: $arrow-width 0 $arrow-width $arrow-width;
-			border-top-color: transparent !important;
-			border-right-color: transparent !important;
-			border-bottom-color: transparent !important;
-		}
-	}
-
-	&[aria-hidden='true'] {
-		visibility: hidden;
-		transition: opacity var(--animation-quick), visibility var(--animation-quick);
-		opacity: 0;
-	}
-
-	&[aria-hidden='false'] {
-		visibility: visible;
-		transition: opacity var(--animation-quick);
-		opacity: 1;
-	}
-}
-
-</style>

package/src/components/Popover/index.js

@@ -1,25 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 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/>.
- *
- */
-
-import Popover from './Popover'
-
-export default Popover

package/src/components/PopoverMenu/PopoverMenu.vue

@@ -1,62 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @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>
-	This component is deprecated. Please use the [Actions](#/Components?id=actions-1) component instead.
-</docs>
-
-<template>
-	<ul class="popover__menu">
-		<PopoverMenuItem v-for="(item, key) in menu" :key="key" :item="item" />
-	</ul>
-</template>
-
-<script>
-import PopoverMenuItem from './PopoverMenuItem'
-
-export default {
-	name: 'PopoverMenu',
-	components: {
-		PopoverMenuItem,
-	},
-	props: {
-		menu: {
-			type: Array,
-			default: () => {
-				return [{
-					href: 'https://nextcloud.com',
-					icon: 'icon-links',
-					text: 'Nextcloud',
-				}]
-			},
-			required: true,
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-ul {
-	display: flex;
-	flex-direction: column;
-}
-</style>

package/src/components/PopoverMenu/PopoverMenuItem.vue

@@ -1,382 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @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="popover__menuitem">
-		<!-- If item.href is set, a link will be directly used -->
-		<a v-if="item.href"
-			:href="(item.href) ? item.href : '#' "
-			:target="(item.target) ? item.target : '' "
-			:download="item.download"
-			class="focusable"
-			rel="noreferrer noopener"
-			@click="action">
-			<span v-if="!iconIsUrl" :class="item.icon" />
-			<img v-else :src="item.icon">
-			<p v-if="item.text && item.longtext">
-				<strong class="menuitem-text">
-					{{ item.text }}
-				</strong><br>
-				<span class="menuitem-text-detail">
-					{{ item.longtext }}
-				</span>
-			</p>
-			<span v-else-if="item.text">
-				{{ item.text }}
-			</span>
-			<p v-else-if="item.longtext">
-				{{ item.longtext }}
-			</p>
-		</a>
-
-		<!-- If item.input is set instead, an put will be used -->
-		<span v-else-if="item.input" class="menuitem" :class="{active: item.active}">
-			<!-- does not show if input is checkbox -->
-			<span v-if="item.input !== 'checkbox'" :class="item.icon" />
-
-			<!-- only shows if input is text -->
-			<form v-if="item.input === 'text'"
-				:class="item.input"
-				@submit.prevent="item.action">
-				<input :type="item.input"
-					:value="item.value"
-					:placeholder="item.text"
-					required>
-				<input type="submit" value="" class="icon-confirm">
-			</form>
-
-			<!-- checkbox -->
-			<template v-else>
-				<!-- eslint-disable-next-line -->
-				<input :id="key" v-model="item.model"
-					:type="item.input"
-					:class="item.input"
-					@change="item.action">
-				<label :for="key" @click.stop.prevent="item.action">
-					{{ item.text }}
-				</label>
-			</template>
-		</span>
-
-		<!-- If item.action is set instead, a button will be used -->
-		<button v-else-if="item.action"
-			class="menuitem focusable"
-			:class="{active: item.active}"
-			:disabled="item.disabled"
-			type="button"
-			@click.stop.prevent="item.action">
-			<span :class="item.icon" />
-			<p v-if="item.text && item.longtext">
-				<strong class="menuitem-text">
-					{{ item.text }}
-				</strong><br>
-				<span class="menuitem-text-detail">
-					{{ item.longtext }}
-				</span>
-			</p>
-			<span v-else-if="item.text">
-				{{ item.text }}
-			</span>
-			<p v-else-if="item.longtext">
-				{{ item.longtext }}
-			</p>
-		</button>
-
-		<!-- If item.longtext is set AND the item does not have an action -->
-		<span v-else class="menuitem" :class="{active: item.active}">
-			<span :class="item.icon" />
-			<p v-if="item.text && item.longtext">
-				<strong class="menuitem-text">
-					{{ item.text }}
-				</strong><br>
-				<span class="menuitem-text-detail">
-					{{ item.longtext }}
-				</span>
-			</p>
-			<span v-else-if="item.text">
-				{{ item.text }}
-			</span>
-			<p v-else-if="item.longtext">
-				{{ item.longtext }}
-			</p>
-		</span>
-	</li>
-</template>
-
-<script>
-export default {
-	name: 'PopoverMenuItem',
-	props: {
-		item: {
-			type: Object,
-			required: true,
-			default: () => {
-				return {
-					key: 'nextcloud-link',
-					href: 'https://nextcloud.com',
-					icon: 'icon-links',
-					text: 'Nextcloud',
-				}
-			},
-			// check the input types
-			// TODO: add more validation of types
-			validator: item => {
-				// TODO: support radio
-				if (item.input) {
-					return ['text', 'checkbox'].indexOf(item.input) !== -1
-				}
-				return true
-			},
-		},
-	},
-	computed: {
-		// random key for inputs binding if not provided
-		key() {
-			return this.item.key
-				? this.item.key
-				: Math.round(Math.random() * 16 * 1000000).toString(16)
-		},
-		iconIsUrl() {
-			try {
-				// eslint-disable-next-line no-new
-				new URL(this.item.icon)
-				return true
-			} catch (_) {
-				return false
-			}
-		},
-	},
-	methods: {
-		// allow us to use both link and an action on `a`
-		// we still need to make sure item.action exists
-		action(event) {
-			if (this.item.action) {
-				this.item.action(event)
-			}
-		},
-	},
-}
-</script>
-
-<style scoped>
-	button.menuitem {
-		text-align: left;
-	}
-
-	button.menuitem * {
-		cursor: pointer;
-	}
-
-	button.menuitem:disabled {
-		opacity: 0.5 !important;
-		cursor: default;
-	}
-
-	button.menuitem:disabled * {
-		cursor: default;
-	}
-
-	.menuitem.active {
-		box-shadow: inset 2px 0 var(--color-primary);
-		border-radius: 0;
-	}
-</style>
-
-<style lang="scss" scoped>
-li {
-	display: flex;
-	flex: 0 0 auto;
-
-	&.hidden {
-		display: none;
-	}
-
-	> button,
-	> a,
-	> .menuitem {
-		cursor: pointer;
-		line-height: $clickable-area;
-		border: 0;
-		border-radius: 0; // otherwise Safari will cut the border-radius area
-		background-color: transparent;
-		display: flex;
-		align-items: flex-start;
-		height: auto;
-		margin: 0;
-		padding: 0;
-		font-weight: normal;
-		box-shadow: none;
-		width: 100%;
-		color: var(--color-main-text);
-		white-space: nowrap;
-		opacity: $opacity_normal;
-
-		// TODO split into individual components for readability
-		span[class^='icon-'],
-		span[class*=' icon-'],
-		&[class^='icon-'],
-		&[class*=' icon-'] {
-			min-width: 0; /* Overwrite icons*/
-			min-height: 0;
-			background-position: #{$icon-margin} center;
-			background-size: $icon-size;
-		}
-
-		span[class^='icon-'],
-		span[class*=' icon-'] {
-			/* Keep padding to define the width to
-				assure correct position of a possible text */
-			padding: #{$clickable-area / 2} 0 #{$clickable-area / 2} $clickable-area;
-		}
-
-		// If no icons set, force left margin to align
-		&:not([class^='icon-']):not([class*='icon-']) {
-			> span,
-			> input,
-			> form {
-				&:not([class^='icon-']):not([class*='icon-']):first-child {
-					margin-left: $clickable-area;
-				}
-			}
-		}
-
-		&[class^='icon-'],
-		&[class*=' icon-'] {
-			padding: 0 $icon-margin 0 $clickable-area;
-		}
-
-		&:not(:disabled):hover,
-		&:not(:disabled):focus,
-		&:not(:disabled).active {
-			opacity: $opacity_full !important;
-		}
-
-		/* prevent .action class to break the design */
-		&.action {
-			padding: inherit !important;
-		}
-
-		> span {
-			cursor: pointer;
-			white-space: nowrap;
-		}
-
-		// long text area
-		> p {
-			width: 150px;
-			line-height: 1.6em;
-			padding: 8px 0;
-			white-space: normal;
-
-			// in case there are no spaces like long email addresses
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
-
-		// TODO: do we really supports it?
-		> select {
-			margin: 0;
-			margin-left: 6px;
-		}
-
-		/* Add padding if contains icon+text */
-		&:not(:empty) {
-			padding-right: $icon-margin !important;
-		}
-
-		/* DEPRECATED! old img in popover fallback
-			* TODO: to remove */
-		> img {
-			width: $icon-size;
-			padding: $icon-margin;
-		}
-
-		/* checkbox/radio fixes */
-		> input.radio + label,
-		> input.checkbox + label {
-			padding: 0 !important;
-			width: 100%;
-		}
-		> input.checkbox + label::before {
-			margin: -2px 13px 0;
-		}
-		> input.radio + label::before {
-			margin: -2px 12px 0;
-		}
-		> input:not([type=radio]):not([type=checkbox]):not([type=image]) {
-			width: 150px;
-		}
-
-		// Forms & text inputs
-		form {
-			display: flex;
-			flex: 1 1 auto;
-			/* put a small space between text and form
-				if there is an element before */
-			&:not(:first-child)  {
-				margin-left: 5px;
-			}
-		}
-		/* no margin if hidden span before */
-		> span.hidden + form,
-		> span[style*='display:none'] + form {
-			margin-left: 0;
-		}
-		/* Inputs inside popover supports text, submit & reset */
-		input {
-			min-width: $clickable-area;
-			max-height: #{$clickable-area - 4px}; /* twice the element margin-y */
-			margin: 2px 0;
-			flex: 1 1 auto;
-			// space between inline inputs
-			&:not(:first-child) {
-				margin-left: 5px;
-			}
-		}
-	}
-
-	// TODO: do that in js, should be cleaner
-	/* css hack, only first not hidden */
-	&:not(.hidden):not([style*='display:none']) {
-		&:first-of-type {
-			> button, > a, > .menuitem {
-				> form, > input {
-					margin-top: $icon-margin - 2px; // minus the input margin
-				}
-			}
-		}
-		&:last-of-type {
-			> button, > a, > .menuitem {
-				> form, > input {
-					margin-bottom: $icon-margin - 2px; // minus the input margin
-				}
-			}
-		}
-	}
-	> button {
-		padding: 0;
-		span {
-			opacity: $opacity_full;
-		}
-	}
-}
-</style>