@nextcloud/vue 3.10.2 → 4.1.1

package/src/components/EmojiPicker/EmojiPicker.vue

@@ -1,302 +0,0 @@
-<!--
- - @copyright Copyright (c) 2020 Georg Ehrke <oc.list@georgehrke.com>
- -
- - @author 2020 Georg Ehrke <oc.list@georgehrke.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 allows the user to pick an emoji.
-
-	### Usage
-
-	* Listen to the select event and pass in an HTML element that will be treated as a trigger:
-
-	```vue
-	<template>
-		<div>
-			<EmojiPicker @select="select">
-				<button> Click Me </button>
-			</EmojiPicker>
-			<span>selected emoji: {{ emoji }}</span>
-		</div>
-	</template>
-	<script>
-		export default {
-			data() {
-				return {
-					emoji: '',
-				}
-			},
-			methods: {
-				select(emoji) {
-					this.emoji = emoji
-				},
-			},
-		}
-	</script>
-	```
-
-	* Showing a preview and keeping it open after a user selected an emoji
-
-	```vue
-	<template>
-		<div>
-			<EmojiPicker
-				:close-on-select="false"
-				:show-preview="true"
-				@select="select">
-				<button> Click Me </button>
-			</EmojiPicker>
-			<span>selected emoji: {{ emoji }}</span>
-		</div>
-	</template>
-	<script>
-		export default {
-			data() {
-				return {
-					emoji: '',
-				}
-			},
-			methods: {
-				select(emoji) {
-					this.emoji = emoji
-				},
-			},
-		}
-	</script>
-	```
-
-</docs>
-
-<template>
-	<Popover
-		:open.sync="open"
-		:container="container"
-		popover-class="emoji-popover"
-		popover-inner-class="popover-emoji-picker-inner">
-		<template #trigger>
-			<slot />
-		</template>
-		<StaticPicker
-			:auto-focus="true"
-			color="var(--color-primary)"
-			:data="emojiIndex"
-			:emoji="previewFallbackEmoji"
-			:i18n="i18n"
-			:native="native"
-			:emoji-size="24"
-			:per-line="8"
-			:picker-styles="{ width: '320px' }"
-			:show-preview="showPreview"
-			:title="previewFallbackTitle"
-			v-bind="$attrs"
-			@select="select" />
-	</Popover>
-</template>
-
-<script>
-import { StaticPicker, EmojiIndex } from 'emoji-mart-vue-fast'
-import data from 'emoji-mart-vue-fast/data/all.json'
-import Popover from '../Popover'
-import { t } from '../../l10n'
-
-export default {
-	name: 'EmojiPicker',
-	components: {
-		StaticPicker,
-		Popover,
-	},
-	props: {
-		/**
-		 * The emoji-set
-		 */
-		activeSet: {
-			type: String,
-			default: 'native',
-		},
-		/**
-		 * Show preview section when hovering emoji
-		 */
-		showPreview: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * The fallback emoji in the preview section
-		 */
-		previewFallbackEmoji: {
-			type: String,
-			default: 'grinning',
-		},
-		/**
-		 * The fallback text in the preview section
-		 */
-		previewFallbackTitle: {
-			type: String,
-			default: t('Pick an emoji'),
-		},
-		/**
-		 * Whether to close the emoji picker after picking one
-		 */
-		closeOnSelect: {
-			type: Boolean,
-			default: true,
-		},
-
-		/**
-		 * Selector for the popover container
-		 */
-		container: {
-			type: String,
-			default: 'body',
-		},
-	},
-	data() {
-		return {
-			emojiIndex: new EmojiIndex(data),
-			i18n: {
-				search: t('Search'),
-				notfound: t('No emoji found'),
-				categories: {
-					search: t('Search results'),
-					recent: t('Frequently used'),
-					smileys: t('Smileys & Emotion'),
-					people: t('People & Body'),
-					nature: t('Animals & Nature'),
-					foods: t('Food & Drink'),
-					activity: t('Activities'),
-					places: t('Travel & Places'),
-					objects: t('Objects'),
-					symbols: t('Symbols'),
-					flags: t('Flags'),
-					custom: t('Custom'),
-				},
-			},
-			open: false,
-		}
-	},
-	computed: {
-		native() {
-			return this.activeSet === 'native'
-		},
-	},
-	methods: {
-		select(emojiObject) {
-			/**
-			 * Emits a string containing the emoji e.g. '👩🏿‍💻'
-			 */
-			this.$emit('select', emojiObject.native)
-
-			/**
-			 * Emits a object with more data about the picked emoji
-			 */
-			this.$emit('selectData', emojiObject)
-
-			if (this.closeOnSelect) {
-				this.open = false
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss">
-@import '~emoji-mart-vue-fast/css/emoji-mart.css';
-
-.emoji-popover {
-	& .tooltip-arrow,
-	&[x-placement^='top'] {
-		margin-left: 0 !important;
-	}
-	& .tooltip-arrow,
-	&[x-placement^='bottom'] {
-		margin-top: 0 !important;
-	}
-
-	// Remove the extra padding from VTooltip
-	.popover-emoji-picker-inner {
-		padding: 0;
-	}
-}
-
-.emoji-mart {
-	background-color: var(--color-main-background) !important;
-	border: 0;
-	color: var(--color-main-text) !important;
-
-	.emoji-mart-bar,
-	.emoji-mart-anchors,
-	.emoji-mart-search,
-	.emoji-mart-search input,
-	.emoji-mart-category,
-	.emoji-mart-category-label,
-	.emoji-mart-category-label span,
-	.emoji-mart-skin-swatches {
-		background-color: transparent !important;
-		border-color: var(--color-border) !important;
-		color: inherit !important;
-	}
-
-	.emoji-mart-bar {
-		&:first-child {
-			border-top-left-radius: var(--border-radius) !important;
-			border-top-right-radius: var(--border-radius) !important;
-		}
-	}
-
-	.emoji-mart-category {
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		justify-content: start;
-
-		.emoji-mart-category-label,
-		.emoji-mart-emoji {
-			user-select: none;
-			flex-grow: 0;
-			flex-shrink: 0;
-		}
-
-		.emoji-mart-category-label {
-			flex-basis: 100%;
-		}
-
-		.emoji-mart-anchor,
-		.emoji-mart-anchor * {
-			cursor: pointer;
-		}
-
-		.emoji-mart-emoji {
-			flex-basis: 12.5%;
-			text-align: center;
-
-			span {
-				cursor: pointer !important;
-			}
-
-			&:hover::before {
-				background-color: var(--color-background-hover);
-			}
-		}
-	}
-
-}
-</style>

package/src/components/EmojiPicker/index.js

@@ -1,23 +0,0 @@
-/*
- * @copyright 2020 Georg Ehrke <oc.list@georgehrke.com>
- *
- * @author 2020 Georg Ehrke <oc.list@georgehrke.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 EmojiPicker from './EmojiPicker'
-
-export default EmojiPicker

package/src/components/EmptyContent/EmptyContent.vue

@@ -1,120 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2020 Greta Doci <gretadoci@gmail.com>
-  -
-  - @author 2020 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>
-### Basic use
-
-Use this component to display a message about an empty content.
-An icon and a title are mandatory.
-Providing an additional description is strongly advised.
-
-```
-<EmptyContent icon="icon-comment">
-	No comments
-	<template #desc>No comments in here</template>
-</EmptyContent>
-```
-```
-<template>
-	<EmptyContent>
-		Network error
-		<template #icon><Airplane /></template>
-		<template #desc>Unable to load the list</template>
-	</EmptyContent>
-</template>
-
-<script>
-import Airplane from 'vue-material-design-icons/Airplane'
-
-export default {
-	components: {
-		Airplane
-	}
-}
-</script>
-
-```
-</docs>
-
-<template>
-	<div class="empty-content" role="note">
-		<div class="empty-content__icon" :class="icon" role="img">
-			<!-- @slot Optional icon slot -->
-			<slot name="icon" />
-		</div>
-		<h2 class="empty-content__title">
-			<!-- @slot Mandatory title -->
-			<slot />
-		</h2>
-		<p v-show="$slots.desc">
-			<!-- @slot Optional description -->
-			<slot name="desc" />
-		</p>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'EmptyContent',
-	props: {
-		/**
-		 * The main icon illustration
-		 */
-		icon: {
-			type: String,
-			default: '',
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-.empty-content {
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-	margin-top: 20vh;
-
-	&__icon {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 64px;
-		height: 64px;
-		margin: 0 auto 15px;
-		opacity: .4;
-		background-repeat: no-repeat;
-		background-position: center;
-		background-size: 64px;
-
-		svg {
-			width: 64px;
-			height: 64px;
-		}
-	}
-
-	&__title {
-		margin-bottom: 10px;
-	}
-}
-
-</style>

package/src/components/EmptyContent/index.js

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