@nextcloud/vue 3.10.2 → 4.1.1

package/src/assets/variables.scss

@@ -1,57 +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/>.
- *
- */
-
-// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
-// recommended is 48px
-// 44px is what we choose and have very good visual-to-usability ratio
-$clickable-area: 44px;
-
-// background icon size
-// also used for the scss icon font
-$icon-size: 16px;
-
-// icon padding for a $clickable-area width and a $icon-size icon
-// ( 44px - 16px ) / 2
-$icon-margin: ($clickable-area - $icon-size) / 2;
-
-// transparency background for icons
-$icon-focus-bg: rgba(127, 127, 127, .25);
-
-// popovermenu arrow width from the triangle center
-$arrow-width: 9px;
-
-// opacities
-$opacity_disabled: .5;
-$opacity_normal: .7;
-$opacity_full: 1;
-
-// menu round background hover feedback
-// good looking on dark AND white bg
-$action-background-hover: rgba(127, 127, 127, .25);
-
-// various structure data used in the 
-// `AppNavigation` component
-$header-height: 50px;
-$navigation-width: 300px;
-
-// mobile breakpoint
-$breakpoint-mobile: 1024px;

package/src/components/ActionButton/ActionButton.vue

@@ -1,160 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
-  - @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 component is made to be used inside of the [Actions](#Actions) component slots.
-
-```vue
-	<Actions>
-		<ActionButton icon="icon-delete" @click="alert('Delete')">Delete</ActionButton>
-		<ActionButton icon="icon-delete" :close-after-click="true" @click="alert('Delete and close menu')">Delete and close</ActionButton>
-		<ActionButton icon="icon-delete" :disabled="true" @click="alert('Disabled')">Disabled button</ActionButton>
-	</Actions>
-```
-
-If you're using a long text you can specify a title
-
-```vue
-	<Actions>
-		<ActionButton icon="icon-add" @click="alert('Add')">Add new</ActionButton>
-		<ActionButton icon="icon-delete" title="Long button" @click="alert('Delete')">This button is associated with a very long text.\nAnd with new lines too.</ActionButton>
-	</Actions>
-```
-
-You can also use a custom icon, for example from the vue-material-design-icons library:
-
-```vue
-<template>
-	<Actions>
-		<ActionButton>
-			<HandLeft
-				slot="icon"
-				:size="16"
-				decorative
-				title="" />
-			Raise left hand
-		</ActionButton>
-		<ActionButton>
-			<HandRight
-				slot="icon"
-				:size="16"
-				decorative
-				title="" />
-			Raise right hand
-		</ActionButton>
-	</Actions>
-</template>
-<script>
-import HandLeft from 'vue-material-design-icons/HandLeft'
-import HandRight from 'vue-material-design-icons/HandRight'
-
-export default {
-	components: {
-		HandLeft,
-		HandRight,
-	},
-}
-</script>
-```
-</docs>
-
-<template>
-	<li class="action" :class="{ 'action--disabled': disabled }">
-		<button
-			class="action-button"
-			:class="{ focusable: isFocusable }"
-			:aria-label="ariaLabel"
-			type="button"
-			@click="onClick">
-			<span :class="[isIconUrl ? 'action-button__icon--url' : icon]"
-				:style="{ backgroundImage: isIconUrl ? `url(${icon})` : null }"
-				class="action-button__icon">
-				<!-- @slot Manually provide icon -->
-				<slot name="icon" />
-			</span>
-
-			<!-- long text with title -->
-			<p v-if="title">
-				<strong class="action-button__title">
-					{{ title }}
-				</strong>
-				<br>
-				<!-- white space is shown on longtext, so we can't
-					put {{ text }} on a new line for code readability -->
-				<span class="action-button__longtext" v-text="text" />
-			</p>
-
-			<!-- long text only -->
-			<!-- white space is shown on longtext, so we can't
-				put {{ text }} on a new line for code readability -->
-			<p v-else-if="isLongText"
-				class="action-button__longtext"
-				v-text="text" />
-
-			<!-- default text display -->
-			<span v-else class="action-button__text">{{ text }}</span>
-
-			<!-- fake slot to gather inner text -->
-			<slot v-if="false" />
-		</button>
-	</li>
-</template>
-
-<script>
-import ActionTextMixin from '../../mixins/actionText'
-
-/**
- * Button component to be used in Actions
-*/
-export default {
-	name: 'ActionButton',
-
-	mixins: [ActionTextMixin],
-
-	props: {
-		/**
-		 * disabled state of the action button
-		 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {
-		/**
-		 * determines if the action is focusable
-		 * @returns {boolean} is the action focusable ?
-		 */
-		isFocusable() {
-			return !this.disabled
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/action';
-@include action-active;
-@include action--disabled;
-@include action-item('button');
-</style>

package/src/components/ActionButton/index.js

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

package/src/components/ActionCheckbox/ActionCheckbox.vue

@@ -1,220 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
-  -
-  - @author John Molakvoæ <skjnldsv@protonmail.com>
-  - @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 component is made to be used inside of the [Actions](#Actions) component slots.
-
-```vue
-	<Actions>
-		<ActionCheckbox @change="alert('(un)checked !')">First choice</ActionCheckbox>
-		<ActionCheckbox value="second" @change="alert('(un)checked !')">Second choice</ActionCheckbox>
-		<ActionCheckbox :checked="true" @change="alert('(un)checked !')">Third choice (checked)</ActionCheckbox>
-		<ActionCheckbox :disabled="true" @change="alert('(un)checked !')">Second choice (disabled)</ActionCheckbox>
-	</Actions>
-```
-</docs>
-
-<template>
-	<li class="action" :class="{ 'action--disabled': disabled }">
-		<span class="action-checkbox">
-			<input :id="id"
-				ref="checkbox"
-				:disabled="disabled"
-				:checked="checked"
-				:value="value"
-				:class="{ focusable: isFocusable }"
-				type="checkbox"
-				class="checkbox action-checkbox__checkbox"
-				@keydown.enter.exact.prevent="checkInput"
-				@change="onChange">
-			<label ref="label" :for="id" class="action-checkbox__label">{{ text }}</label>
-
-			<!-- fake slot to gather inner text -->
-			<slot v-if="false" />
-		</span>
-	</li>
-</template>
-
-<script>
-import ActionGlobalMixin from '../../mixins/actionGlobal'
-import GenRandomId from '../../utils/GenRandomId'
-
-export default {
-	name: 'ActionCheckbox',
-
-	mixins: [ActionGlobalMixin],
-
-	props: {
-		/**
-		 * id attribute of the checkbox element
-		 */
-		id: {
-			type: String,
-			default: () => 'action-' + GenRandomId(),
-			validator: id => id.trim() !== '',
-		},
-
-		/**
-		 * checked state of the the checkbox element
-		 */
-		checked: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * value of the checkbox input
-		 */
-		value: {
-			type: [String, Number],
-			default: '',
-		},
-
-		/**
-		 * disabled state of the checkbox element
-		 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	computed: {
-		/**
-		 * determines if the action is focusable
-		 * @returns {boolean} is the action focusable ?
-		 */
-		isFocusable() {
-			return !this.disabled
-		},
-	},
-
-	methods: {
-		checkInput(event) {
-			// by clicking we also trigger the change event
-			this.$refs.label.click()
-		},
-		onChange(event) {
-			/**
-			 * Emitted when the checkbox state is changed
-			 * @type {boolean}
-			 */
-			this.$emit('update:checked', this.$refs.checkbox.checked)
-
-			/**
-			 * Emitted when the checkbox state is changed
-			 * @type {Event}
-			 */
-			this.$emit('change', event)
-
-			if (this.$refs.checkbox.checked) {
-				/**
-				 * Emitted when the checkbox is checked
-				 * @type {Event}
-				 */
-				this.$emit('check')
-			} else {
-				/**
-				 * Emitted when the checkbox is unchecked
-				 * @type {Event}
-				 */
-				this.$emit('uncheck')
-			}
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/action';
-@include action-active;
-@include action--disabled;
-
-.action-checkbox {
-	display: flex;
-	align-items: flex-start;
-
-	width: 100%;
-	height: auto;
-	margin: 0;
-	padding: 0;
-
-	cursor: pointer;
-	white-space: nowrap;
-
-	color: var(--color-main-text);
-	border: 0;
-	border-radius: 0; // otherwise Safari will cut the border-radius area
-	background-color: transparent;
-	box-shadow: none;
-
-	font-weight: normal;
-	line-height: $clickable-area;
-
-	/* checkbox/radio fixes */
-	&__checkbox {
-		position: absolute;
-		top: auto;
-		left: -10000px;
-
-		overflow: hidden;
-
-		width: 1px;
-		height: 1px;
-		&:focus + .action-checkbox__label {
-			opacity: $opacity_full;
-		}
-	}
-
-	&__label {
-		display: flex;
-		align-items: center; // align checkbox to text
-
-		width: 100%;
-		padding: 0 !important;
-		padding-right: $icon-margin !important;
-
-		opacity: $opacity_normal;
-		// checkbox-width is 12px, border is 2
-		// (44 - 14 - 2) / 2 = 14
-		&::before {
-			margin: 0 14px 0 !important;
-		}
-	}
-
-	&--disabled {
-		&,
-		.action-checkbox__label {
-			cursor: pointer;
-		}
-	}
-
-	&:not(.action-checkbox--disabled):hover,
-	&:not(.action-checkbox--disabled):focus {
-		.action-checkbox__label {
-			opacity: $opacity_full;
-		}
-	}
-}
-
-</style>