@nextcloud/vue 3.10.2 → 4.1.1

package/src/components/Multiselect/index.js

@@ -1,28 +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 ScopeComponent from '../../utils/ScopeComponent'
-import Multiselect from './Multiselect'
-import './index.scss'
-
-ScopeComponent(Multiselect)
-
-export default Multiselect

package/src/components/Multiselect/index.scss

@@ -1,290 +0,0 @@
-// scoping is not working inside the Multiselect.vue component
-// as the nested properties are not inside it
-// Therefore we need to use an external scoping
-.multiselect[data-v-#{$scope_version}] {
-	margin: 0;
-	padding: 0 !important;
-	display: inline-block;
-	/* override this rule with your width styling if you need */
-	min-width: 160px;
-	position: relative;
-	background-color: var(--color-main-background);
-
-	/* Force single multiselect value to be shown when not active */
-	&:not(.multiselect--active) .multiselect__single {
-		width: 100%;
-		z-index: 2 !important;
-	}
-
-	// active state, force the input to be shown, we don't want
-	// the placeholder or the currently selected options
-	&.multiselect--active {
-		/* Opened: force display the input */
-		input.multiselect__input {
-			opacity: $opacity_full !important;
-			cursor: text !important;
-			// remove border radius on bottom opening
-			border-radius: var(--border-radius) var(--border-radius) 0 0;
-			display: block !important;
-		}
-
-		/* multiselect__limit hidden if active */
-		.multiselect__limit {
-			display: none;
-		}
-	}
-
-	// Remove radius on top opening
-	&.multiselect--active.multiselect--above {
-		input.multiselect__input {
-			border-radius: 0 0 var(--border-radius) var(--border-radius);
-		}
-	}
-
-	// disabled state background
-	&.multiselect--disabled,
-	&.multiselect--disabled .multiselect__single {
-		background-color: var(--color-background-dark) !important;
-	}
-
-	// loading state
-	&.icon-loading-small::after {
-		left: 100%;
-		margin-left: -24px;
-	}
-
-	// multiple selected options display
-	.multiselect__tags {
-		/* space between tags and limit tag */
-		$space-between: 5px;
-		display: flex;
-		flex-wrap: nowrap;
-		overflow: hidden;
-		border: 1px solid var(--color-border-dark);
-		cursor: pointer;
-		position: relative;
-		border-radius: 3px;
-		min-height: 34px;
-		height: 100%;
-
-		/* tag wrapper */
-		.multiselect__tags-wrap {
-			align-items: center;
-			display: inline-flex;
-			overflow: hidden;
-			max-width: 100%;
-			position: relative;
-			padding: 3px $space-between;
-			flex: 1 1;
-			flex-wrap: nowrap;
-			/* no tags or simple select? Show input directly
-			input is used to display single value */
-			&:empty ~ input.multiselect__input {
-				opacity: $opacity_full !important;
-				display: block !important;
-				/* hide default empty text like .multiselect__placeholder,
-				and show input instead. It looks better without a transition between
-				a span and the input that have different styling */
-				+ span:not(.multiselect__single) {
-					display: none;
-				}
-			}
-			/* selected tag */
-			.multiselect__tag {
-				line-height: 20px;
-				padding: 1px 5px;
-				background-image: none;
-				color: var(--color-main-text);
-				border: 1px solid var(--color-border-dark);
-				display: inline-flex;
-				align-items: center;
-				border-radius: 3px;
-				/* require to override the default width
-				and force the tag to shring properly */
-				min-width: 0;
-				max-width: fit-content;
-				max-width: -moz-fit-content;
-				margin-bottom: 3px;
-				/* css hack, detect if more than two tags
-				if so, flex-basis is set to half */
-				&:only-child {
-					flex: 0 1 auto;
-				}
-				&:not(:last-child) {
-					margin-right: $space-between;
-				}
-				/* ellipsis the groups to be sure
-				we display at least two of them */
-				> span {
-					white-space: nowrap;
-					text-overflow: ellipsis;
-					overflow: hidden;
-				}
-			}
-		}
-
-		/* Single select default value
-		or default placeholder if search disabled*/
-		.multiselect__single,
-		.multiselect__placeholder {
-			padding: 7px 6px; // like the input
-			flex: 0 0 100%;
-			z-index: 1; /* above input */
-			background-color: var(--color-main-background);
-			line-height: 18px; // 32px - 2*6px (padding) - 2*1px (border)
-			color: var(--color-text-lighter); // like the input
-			// Align content and make the flow smoother
-			display: flex;
-			align-items: center;
-
-			// Anything inside will trigger the select opening
-			&, * {
-				cursor: pointer;
-			}
-		}
-		/* displayed text if tag limit reached */
-		.multiselect__strong,
-		.multiselect__limit {
-			line-height: 20px;
-			color: var(--color-text-lighter);
-			display: inline-flex;
-			align-items: center;
-			opacity: $opacity_normal;
-			margin-right: $space-between;
-			/* above the input */
-			z-index: 5;
-		}
-		/* default multiselect input for search and placeholder */
-		input.multiselect__input {
-			width: 100% !important;
-			position: relative !important;
-			margin: 0;
-			opacity: 0;
-			/* let's leave it on top of tags but hide it */
-			height: 100% !important;
-			border: none;
-			/* override hide to force show the placeholder */
-			/* only when not active */
-			cursor: pointer;
-			/* override inline styling of the lib */
-			padding: 7px 6px !important;
-			display: none;
-		}
-	}
-
-	/* results wrapper */
-	.multiselect__content-wrapper {
-		position: absolute;
-		width: 100%;
-		margin-top: -1px;
-		border: 1px solid var(--color-border-dark);
-		background: var(--color-main-background);
-		z-index: 50;
-		max-height: 250px;
-		overflow-y: auto;
-		border-radius: 0 0 var(--border-radius) var(--border-radius);
-		.multiselect__content {
-			width: 100%;
-			padding: 0;
-		}
-		li {
-			position: relative;
-			display: flex;
-			align-items: center;
-			background-color: transparent;
-			&,
-			span {
-				cursor: pointer;
-			}
-			> span {
-				padding: 8px;
-				white-space: nowrap;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				margin: 0;
-				height: auto;
-				min-height: 1em;
-				-webkit-touch-callout: none;
-				-webkit-user-select: none;
-				-moz-user-select: none;
-				-ms-user-select: none;
-				user-select: none;
-				display: inline-flex;
-				align-items: center;
-				background-color: transparent;
-				color: var(--color-text-lighter);
-				width: 100%;
-				/* selected checkmark icon */
-				&::before {
-					content: ' ';
-					background-repeat: no-repeat;
-					background-position: center;
-					min-width: 16px;
-					min-height: 16px;
-					display: block;
-					opacity: $opacity_disabled;
-					margin-right: 5px;
-					visibility: hidden;
-				}
-				&.multiselect__option--disabled {
-					background-color: var(--color-background-dark);
-					opacity: $opacity_disabled;
-				}
-				&.multiselect__option--highlight {
-					color: var(--color-main-text);
-					background-color: var(--color-background-dark);
-				}
-				&:not(.multiselect__option--disabled):hover::before {
-					opacity: .3;
-				}
-				&.multiselect__option--selected,
-				&:not(.multiselect__option--disabled):hover {
-					&::before {
-						visibility: visible;
-					}
-				}
-			}
-		}
-	}
-	/* ABOVE display */
-	&.multiselect--above .multiselect__content-wrapper {
-		bottom: 100%;
-		margin-bottom: -1px;
-	}
-
-	/* Icon before option select */
-	&.multiselect--multiple {
-		// push the input after the tag list
-		.multiselect__tags {
-			flex-wrap: wrap;
-		}
-
-		.multiselect__content-wrapper li > span {
-			&::before {
-				background-image: var(--icon-checkmark-000);
-			}
-
-			/* add the prop tag-placeholder="create" to add the +
-			icon on top of an unknown-and-ready-to-be-created entry */
-			&[data-select='create'] {
-				&::before {
-					background-image: var(--icon-add-000);
-					visibility: visible;
-				}
-			}
-		}
-	}
-
-	/* No need for an icon here */
-	&.multiselect--single .multiselect__content-wrapper li > span::before {
-		display: none;
-	}
-
-	/* Mouse feedback */
-	&:hover,
-	input.multiselect__input {
-		.multiselect__placeholder {
-			color: var(--color-main-text);
-		}
-	}
-}

package/src/components/MultiselectTags/MultiselectTags.vue

@@ -1,179 +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/>.
-  -
-  -->
-
-<docs>
-## Single tag selector
-
-```vue
-<template>
-	<div class="wrapper">
-		<MultiselectTags v-model="value" :multiple="false" />
-		{{ value }}
-	</div>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			value: 1
-		}
-	}
-}
-</script>
-```
-
-## Multiple tag selector
-```vue
-<template>
-	<div class="wrapper">
-		<MultiselectTags v-model="value" :multiple="true" />
-		{{ value }}
-	</div>
-</template>
-
-<script>
-export default {
-	data() {
-		return {
-			value: [1, 2]
-		}
-	}
-}
-</script>
-```
-</docs>
-
-<template>
-	<Multiselect :value="inputValue"
-		:options="tags"
-		:options-limit="5"
-		:placeholder="label"
-		track-by="id"
-		:custom-label="tagLabel"
-		:multiple="multiple"
-		:close-on-select="multiple"
-		:tag-width="60"
-		:disabled="disabled"
-		@input="update">
-		<span slot="noResult">{{ t('No results') }}</span>
-		<template #option="scope">
-			{{ tagLabel(scope.option) }}
-		</template>
-	</multiselect>
-</template>
-
-<script>
-import l10n from '../../mixins/l10n'
-import Multiselect from '../Multiselect'
-import { searchTags } from './api'
-import { t } from '../../l10n'
-
-export default {
-	name: 'MultiselectTags',
-	components: {
-		Multiselect,
-	},
-	mixins: [l10n],
-	props: {
-		label: {
-			type: String,
-			default: t('Select a tag'),
-		},
-		value: {
-			type: [Number, Array],
-			required: true,
-		},
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		multiple: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	data() {
-		return {
-			tags: [],
-		}
-	},
-	computed: {
-		inputValue() {
-			return this.getValueObject()
-		},
-	},
-	async beforeCreate() {
-		try {
-			const result = await searchTags()
-			this.tags = result
-		} catch (error) {
-			console.error('Loading systemtags failed', error)
-		}
-	},
-	methods: {
-		getValueObject() {
-			if (this.tags.length === 0) {
-				return []
-			}
-			if (this.multiple) {
-				return this.value
-					.filter(tag => tag !== '')
-					.map(id => this.tags.find(tag2 => tag2.id === id))
-			} else {
-				return this.tags.find(tag => tag.id === this.value)
-			}
-		},
-		update(value) {
-			if (this.multiple) {
-				/**
-				 * Emitted on input events of the multiselect field
-				 * @type {number|number[]}
-				 */
-				this.$emit('input', value.map((element) => element.id))
-			} else {
-				if (value === null) {
-					this.$emit('input', null)
-				} else {
-					this.$emit('input', value.id)
-				}
-			}
-		},
-		/**
-		 * @param {Object} tag destructuring object
-		 * @param {string} tag.displayName the tag display name
-		 * @param {bool} tag.userVisible is the tag visible
-		 * @param {bool} tag.userAssignable is the tag restricted
-		 * @returns {string}
-		 */
-		tagLabel({ displayName, userVisible, userAssignable }) {
-			if (userVisible === false) {
-				return t('{tag} (invisible)', { tag: displayName })
-			}
-			if (userAssignable === false) {
-				return t('{tag} (restricted)', { tag: displayName })
-			}
-			return displayName
-		},
-	},
-}
-</script>