@nextcloud/vue 3.10.2 → 4.1.1

package/src/components/RichContenteditable/index.js

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

package/src/components/SettingsInputText/SettingsInputText.vue

@@ -1,207 +0,0 @@
-<!--
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  - @author Greta Doci <gretadoci@gmail.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>
-	<form ref="form"
-		:disabled="disabled"
-		@submit.prevent.stop="onSubmit">
-		<div class="input-wrapper">
-			<label :for="id" class="action-input__label">{{ label }}</label>
-			<input :id="id"
-				type="text"
-				:value="value"
-				:disabled="disabled"
-				@input="onInput"
-				@change="onChange">
-			<input :id="idSubmit"
-				:value="submitTranslated"
-				type="submit"
-				class="action-input__submit">
-			<label v-show="!disabled" :for="idSubmit" class="action-input__label" />
-			<p v-if="hint" class="hint">
-				{{ hint }}
-			</p>
-		</div>
-	</form>
-</template>
-
-<script>
-import { t } from '../../l10n'
-import GenRandomId from '../../utils/GenRandomId'
-
-export default {
-	name: 'SettingsInputText',
-	props: {
-		/**
-		 * label of the select group element
-		 */
-		label: {
-			type: String,
-			required: true,
-		},
-
-		/**
-		* hint of the select group input
-		*/
-		hint: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		* value of the select group input
-		 */
-		value: {
-			type: String,
-			default: '',
-		},
-
-		/**
-		 * disabled state of the settings select group input
-		 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * id attribute of the select group element
-		 */
-		id: {
-			type: String,
-			default: () => 'settings-input-text-' + GenRandomId(),
-			validator: id => id.trim() !== '',
-		},
-	},
-
-	data() {
-		return {
-			submitTranslated: t('Submit'),
-		}
-	},
-
-	computed: {
-		/**
-		 * @returns {string}
-		 */
-		idSubmit() {
-			return this.id + '-submit'
-		},
-	},
-	methods: {
-		onInput(event) {
-			this.$emit('input', event)
-			/**
-			 * Emitted when the inputs value changes
-			 * @type {string}
-			 */
-			this.$emit('update:value', event.target.value)
-		},
-		onSubmit(event) {
-			if (!this.disabled) {
-				/**
-				 * Emitted on submit of the input field
-				 * @type {Event}
-				 */
-				this.$emit('submit', event)
-			}
-		},
-		onChange(event) {
-			/**
-			 * Emitted on change of the input field
-			 * @type {Event}
-			 */
-			this.$emit('change', event)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-
-	$input-margin: 4px;
-
-	.input-wrapper {
-		display: flex;
-		align-items: flex-start;
-		flex-wrap: wrap;
-		width: 100%;
-		max-width: 400px;
-		&__form {
-			display: flex;
-			align-items: center;
-			flex: 1 1 auto;
-
-			margin: $input-margin 0;
-			padding-right: $icon-margin;
-		}
-
-		&__submit {
-			position: absolute;
-			left: -10000px;
-			top: auto;
-			width: 1px;
-			height: 1px;
-			overflow: hidden;
-		}
-
-		&__label {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			width: #{$clickable-area - $input-margin * 2};
-			height: #{$clickable-area - $input-margin * 2};
-
-			cursor: pointer;
-
-			opacity: $opacity_full;
-			color: var(--color-text-lighter);
-			border: 1px solid var(--color-border-dark);
-			border-left-color: transparent;
-			border-radius: 0 var(--border-radius) var(--border-radius) 0;
-			/* Avoid background under border */
-			background-color: var(--color-main-background);
-			background-clip: padding-box;
-
-			font-size: $icon-size;
-		}
-
-		&__input[type=text] {
-			flex-grow: 1;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-			cursor: text;
-		}
-
-		// if disabled, change cursor
-		&:disabled {
-			cursor: default;
-		}
-
-		.hint {
-			color: var(--color-text-lighter);
-		}
-	}
-
-</style>

package/src/components/SettingsInputText/index.js

@@ -1,24 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 Greta Doci <gretadoci@gmail.com>
- *
- * @author Greta Doci <gretadoci@gmail.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 SettingsInputText from './SettingsInputText'
-
-export default SettingsInputText

package/src/components/SettingsSection/SettingsSection.vue

@@ -1,151 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  - @author Greta Doci <gretadoci@gmail.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>
-### General description
-
-This component is to be used in the settings section of nextcloud.
-
-### Examples
-
-```vue
-<template>
-	<SettingsSection
-		title="Two-Factor Authentication"
-		description="Two-factor authentication can be enforced for all users and specific groups."
-		doc-url="https://docs.nextcloud.com/server/19/go.php?to=admin-2fa">
-		Your settings here
-	</SettingsSection>
-</template>
-```
-</docs>
-
-<template>
-	<div class="settings-section">
-		<h2 class="settings-section__title">
-			{{ title }}
-			<a v-if="hasDocUrl"
-				:href="docUrl"
-				class="settings-section__info"
-				role=""
-				:title="docTitleTranslated" />
-		</h2>
-		<p v-if="hasDescription"
-			class="settings-section__desc">
-			{{ description }}
-		</p>
-		<slot />
-	</div>
-</template>
-
-<script>
-import { t } from '../../l10n'
-
-export default {
-	name: 'SettingsSection',
-	components: {
-
-	},
-
-	props: {
-		title: {
-			type: String,
-			required: true,
-		},
-		description: {
-			type: String,
-			default: '',
-		},
-		docUrl: {
-			type: String,
-			default: '',
-		},
-	},
-
-	data() {
-		return {
-			docTitleTranslated: t('External documentation for {title}', {
-				title: this.title,
-			}),
-		}
-	},
-
-	computed: {
-		hasDescription() {
-			return this.description.length > 0
-		},
-		hasDocUrl() {
-			return this.docUrl.length > 0
-		},
-	},
-}
-
-</script>
-
-<style lang="scss" scoped>
-@import '../../fonts/scss/iconfont-vue';
-
-.settings-section {
-	display: block;
-	margin-bottom: auto;
-	padding: 30px;
-
-	&:not(:last-child) {
-		border-bottom: 1px solid var(--color-border);
-	}
-
-	&__title {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 20px;
-		font-weight: bold;
-	}
-
-	&__info {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: $clickable-area;
-		height: $clickable-area;
-		// make sure to properly align the icon with the text
-		margin: -$icon-margin;
-		margin-left: 0;
-		opacity: $opacity_normal;
-		font-size: $icon-size;
-
-		@include iconfont('info');
-
-		&:hover, &:focus, &:active {
-			opacity: $opacity_full;
-		}
-	}
-
-	&__desc {
-		margin-top: -0.2em;
-		margin-bottom: 1em;
-		opacity: $opacity_normal;
-	}
-}
-
-</style>

package/src/components/SettingsSection/index.js

@@ -1,24 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 Greta Doci <gretadoci@gmail.com>
- *
- * @author Greta Doci <gretadoci@gmail.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 SettingsSection from './SettingsSection'
-
-export default SettingsSection

package/src/components/SettingsSelectGroup/SettingsSelectGroup.vue

@@ -1,149 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net>
-  -
-  - @author Julius Härtl <jus@bitgrid.net>
-  - @author Greta Doci <gretadoci@gmail.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>
-	<Multiselect :value="inputValue"
-		:options="groupsArray"
-		:options-limit="5"
-		:placeholder="label"
-		track-by="id"
-		label="displayname"
-		class="multiselect-vue"
-		:multiple="true"
-		:close-on-select="false"
-		:tag-width="60"
-		:disabled="disabled"
-		@input="update"
-		@search-change="findGroup">
-		<span slot="noResult">{{ t( 'No results') }}</span>
-	</Multiselect>
-</template>
-
-<script>
-import axios from '@nextcloud/axios'
-import Multiselect from '../../components/Multiselect/Multiselect'
-import GenRandomId from '../../utils/GenRandomId'
-import { generateOcsUrl } from '@nextcloud/router'
-import { showError } from '@nextcloud/dialogs'
-import l10n from '../../mixins/l10n'
-export default {
-	name: 'SettingsSelectGroup',
-	components: {
-		Multiselect,
-	},
-	mixins: [l10n],
-	props: {
-		/**
-			 * label of the select group element
-			 */
-		label: {
-			type: String,
-			required: true,
-		},
-
-		/**
-			 * hint of the select group input
-			 */
-		hint: {
-			type: String,
-			default: '',
-		},
-
-		/**
-			 * id attribute of the select group element
-			 */
-		id: {
-			type: String,
-			default: () => 'action-' + GenRandomId(),
-			validator: id => id.trim() !== '',
-		},
-
-		/**
-			 * value of the select group input
-			 */
-		value: {
-			type: Array,
-			default: () => [],
-		},
-
-		/**
-			 * disabled state of the settings select group input
-			 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	data() {
-		return {
-			groups: {},
-			randId: GenRandomId(),
-		}
-	},
-	computed: {
-		inputValue() {
-			return this.getValueObject()
-		},
-		getValueObject() {
-			return this.value.filter((group) => group !== '' && typeof group !== 'undefined').map(
-				(id) => {
-					if (typeof this.groups[id] === 'undefined') {
-						return {
-							id,
-							displayname: id,
-						}
-					}
-					return this.groups[id]
-				}
-			)
-		},
-		groupsArray() {
-			return Object.values(this.groups)
-		},
-	},
-	methods: {
-		update() {
-			this.$emit('input', this.inputValue.map((element) => element.id))
-		},
-		async findGroup(query) {
-			try {
-				query = typeof query === 'string' ? encodeURI(query) : ''
-				const response = await axios.get(generateOcsUrl(`cloud/groups/details?search=${query}&limit=10`, 2))
-
-				if (Object.keys(response.data.ocs.data.groups).length > 0) {
-					response.data.ocs.data.groups.forEach((element) => {
-						if (typeof this.groups[element.id] === 'undefined') {
-							this.$set(this.groups, element.id, element)
-						}
-					})
-					return true
-				}
-			} catch (error) {
-				this.$emit('error', error)
-				showError(t('Unable to search the group'))
-			}
-			return false
-		},
-	},
-}
-</script>