@nextcloud/vue 3.10.2 → 4.1.1

package/src/components/PopoverMenu/index.js

@@ -1,24 +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/>.
- *
- */
-import PopoverMenu from './PopoverMenu'
-
-export default PopoverMenu

package/src/components/ProgressBar/ProgressBar.vue

@@ -1,135 +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>
-This is a simple progress bar component.
-## Usage:
-
-### Small
-<ProgressBar :value="60" />
-
-### Medium
-<ProgressBar :value="60" size="medium" />
-
-### error
-<ProgressBar :value="60" :error="true" />
-
-</docs>
-
-<template>
-	<progress class="progress-bar vue"
-		:class="{ 'progress-bar--error': error }"
-		:style="progressBarStyle"
-		:value="value"
-		max="100" />
-</template>
-
-<script>
-export default {
-
-	name: 'ProgressBar',
-
-	props: {
-		/**
-		 * An integer between 1 and 100
-		 */
-		value: {
-			type: Number,
-			default: 0,
-			validator(value) {
-				return value >= 0
-					&& value <= 100
-			},
-		},
-		/**
-		 * Determines the height of the progressbar.
-		 * Possible values:
-		 * - 'small' (default)
-		 * - 'medium'
-		 */
-		size: {
-			type: String,
-			default: 'small',
-			validator(value) {
-				return ['small', 'medium'].indexOf(value) !== -1
-			},
-		},
-		/**
-		 * Applies an error color to the progressbar if true.
-		 */
-		error: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {
-
-		progressBarStyle() {
-			let height = 0
-			let borderRadius = 0
-			if (this.size === 'small') {
-				height = '4px'
-				borderRadius = '2px'
-			} else if (this.size === 'medium') {
-				height = '6px'
-				borderRadius = '3px'
-			}
-			return {
-				height,
-				'border-radius': borderRadius,
-			}
-		},
-	},
-}
-
-</script>
-
-<style lang="scss" scoped>
-
-.progress-bar {
-	display: block;
-	width: 100%;
-	background: var(--color-background-dark);
-	border: 0;
-	padding: 0;
-	border-radius: var(--border-radius);
-	&::-webkit-progress-bar {
-		height: calc(var(--border-radius) * 2);
-	}
-	&::-webkit-progress-value {
-		background: linear-gradient(40deg, var(--color-primary-element) 0%, var(--color-primary-element-light) 100%);
-		border-radius: var(--border-radius);
-	}
-	&::-moz-progress-bar {
-		background: linear-gradient(40deg, var(--color-primary-element) 0%, var(--color-primary-element-light) 100%);
-	}
-	&--error {
-		// Override previous values
-		&::-moz-progress-bar {
-			background: var(--color-error) !important;
-		}
-		&::-webkit-progress-value {
-			background: var(--color-error) !important;
-		}
-	}
-}
-
-</style>

package/src/components/ProgressBar/index.js

@@ -1,25 +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/>.
- *
- */
-
-import ProgressBar from './ProgressBar'
-
-export default ProgressBar

package/src/components/RichContenteditable/AutoCompleteResult.vue

@@ -1,191 +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/>.
--->
-
-<template>
-	<div class="autocomplete-result">
-		<!-- Avatar or icon -->
-		<div :class="[icon, `autocomplete-result__icon--${avatarUrl ? 'with-avatar' : ''}`]"
-			:style="avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null "
-			class="autocomplete-result__icon">
-			<div v-if="haveStatus"
-				:class="[`autocomplete-result__status--${status && status.icon ? 'icon' : status.status}`]"
-				class="autocomplete-result__status">
-				{{ status && status.icon || '' }}
-			</div>
-		</div>
-
-		<!-- Title and subtitle -->
-		<span class="autocomplete-result__content">
-			<span class="autocomplete-result__title">
-				{{ label }}
-			</span>
-			<span v-if="subline" class="autocomplete-result__subline">
-				{{ subline }}
-			</span>
-		</span>
-	</div>
-</template>
-
-<script>
-import { generateUrl } from '@nextcloud/router'
-
-export default {
-	name: 'AutoCompleteResult',
-
-	props: {
-		label: {
-			type: String,
-			required: true,
-		},
-		subline: {
-			type: String,
-			default: null,
-		},
-		id: {
-			type: String,
-			default: null,
-		},
-		icon: {
-			type: String,
-			required: true,
-		},
-		source: {
-			type: String,
-			required: true,
-		},
-		status: {
-			type: [Object, Array],
-			default: () => ({}),
-		},
-	},
-	computed: {
-		avatarUrl() {
-			return this.id && this.source === 'users'
-				? this.getAvatarUrl(this.id, 44)
-				: null
-		},
-		haveStatus() {
-			return this.status?.icon || this.status?.status
-		},
-	},
-
-	methods: {
-		getAvatarUrl(user, size) {
-			return generateUrl('/avatar/{user}/{size}', {
-				user,
-				size,
-			})
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../fonts/scss/iconfont-vue';
-$autocomplete-padding: 10px;
-
-.autocomplete-result {
-	display: flex;
-	height: $clickable-area;
-	padding: $autocomplete-padding;
-
-	.highlight & {
-		color: var(--color-main-text);
-		background: var(--color-primary-light);
-		&, * {
-			cursor: pointer;
-		}
-	}
-
-	&__icon {
-		position: relative;
-		flex: 0 0 $clickable-area;
-		width: $clickable-area;
-		min-width: $clickable-area;
-		height: $clickable-area;
-		border-radius: $clickable-area;
-		background-color: var(--color-background-darker);
-		background-repeat: no-repeat;
-		background-position: center;
-		background-size: $clickable-area - 2 * $autocomplete-padding;
-		&--with-avatar {
-			color: inherit;
-			background-size: cover;
-		}
-	}
-
-	&__status {
-		position: absolute;
-		right: -4px;
-		bottom: -4px;
-		box-sizing: border-box;
-		width: 18px;
-		height: 18px;
-		border: 2px solid var(--color-main-background);
-		border-radius: 50%;
-		background-color: var(--color-main-background);
-		font-size: var(--default-font-size);
-		line-height: 15px;
-		&--online {
-			color: #49b382;
-
-			@include iconfont('user-status-online');
-		}
-		&--dnd {
-			color: #ed484c;
-			background-color: #fff;
-
-			@include iconfont('user-status-dnd');
-		}
-		&--away {
-			color: #f4a331;
-
-			@include iconfont('user-status-away');
-		}
-		&--offline,
-		&--icon {
-			border: none;
-			background-color: transparent;
-		}
-	}
-
-	&__content {
-		display: flex;
-		flex: 1 1 100%;
-		flex-direction: column;
-		justify-content: center;
-		min-width: 0;
-		padding-left: $autocomplete-padding;
-	}
-
-	&__title,
-	&__subline {
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	&__subline {
-		color: var(--color-text-lighter);
-	}
-}
-
-</style>

package/src/components/RichContenteditable/MentionBubble.vue

@@ -1,165 +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/>.
--->
-
-<template>
-	<span :class="{'mention-bubble--primary': primary}"
-		class="mention-bubble"
-		contenteditable="false">
-		<span class="mention-bubble__wrapper">
-			<span class="mention-bubble__content">
-				<!-- Avatar or icon -->
-				<span :class="[icon, `mention-bubble__icon--${avatarUrl ? 'with-avatar' : ''}`]"
-					:style="avatarUrl ? { backgroundImage: `url(${avatarUrl})` } : null"
-					class="mention-bubble__icon" />
-
-				<!-- Title -->
-				<span role="heading" class="mention-bubble__title" :title="label" />
-			</span>
-
-			<!-- Selectable text for copy/paste -->
-			<span role="none" class="mention-bubble__select">{{ mentionText }}</span>
-		</span>
-	</span>
-</template>
-
-<script>
-import { generateUrl } from '@nextcloud/router'
-
-export default {
-	name: 'MentionBubble',
-
-	props: {
-		id: {
-			type: String,
-			required: true,
-		},
-		label: {
-			type: String,
-			required: true,
-		},
-		icon: {
-			type: String,
-			required: true,
-		},
-		source: {
-			type: String,
-			required: true,
-		},
-		primary: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {
-		avatarUrl() {
-			return this.id && this.source === 'users'
-				? this.getAvatarUrl(this.id, 44)
-				: null
-		},
-		mentionText() {
-			return this.id.indexOf(' ') === -1
-				? `@${this.id}`
-				: `@"${this.id}"`
-		},
-	},
-
-	methods: {
-		getAvatarUrl(user, size) {
-			return generateUrl('/avatar/{user}/{size}', {
-				user,
-				size,
-			})
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-$bubble-height: 20px;
-$bubble-max-width: 150px;
-$bubble-padding: 2px;
-$bubble-avatar-size: $bubble-height - 2 * $bubble-padding;
-
-.mention-bubble {
-	&--primary &__content {
-		color: var(--color-primary-text);
-		background-color: var(--color-primary-element);
-	}
-
-	&__wrapper {
-		max-width: $bubble-max-width;
-		// Align with text
-		height: $bubble-height - $bubble-padding;
-		vertical-align: text-bottom;
-		display: inline-flex;
-		align-items: center;
-	}
-
-	&__content {
-		display: inline-flex;
-		overflow: hidden;
-		align-items: center;
-		max-width: 100%;
-		height: $bubble-height ;
-		-webkit-user-select: none;
-		user-select: none;
-		padding-right: $bubble-padding * 3;
-		padding-left: $bubble-padding;
-		border-radius: $bubble-height / 2;
-		background-color: var(--color-background-dark);
-	}
-
-	&__icon {
-		position: relative;
-		width: $bubble-avatar-size;
-		height: $bubble-avatar-size;
-		border-radius: $bubble-avatar-size / 2;
-		background-color: var(--color-background-darker);
-		background-repeat: no-repeat;
-		background-position: center;
-		background-size: $bubble-avatar-size - 2 * $bubble-padding;
-
-		&--with-avatar {
-			color: inherit;
-			background-size: cover;
-		}
-	}
-
-	&__title {
-		overflow: hidden;
-		margin-left: $bubble-padding;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		// Put label in ::before so it is not selectable
-		&::before {
-			content: attr(title);
-		}
-	}
-
-	// Hide the mention id so it is selectable
-	&__select {
-		position: absolute;
-		z-index: -1;
-		left: -1000px;
-	}
-}
-
-</style>