@nextcloud/vue 3.10.2 → 4.1.1

package/src/components/ActionLink/ActionLink.vue

@@ -1,132 +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.
-
-```
-<Actions>
-	<ActionLink icon="icon-external" href="https://nextcloud.com">
-		Nextcloud website
-	</ActionLink>
-</Actions>
-```
-</docs>
-
-<template>
-	<li class="action">
-		<a
-			:download="download"
-			:href="href"
-			:aria-label="ariaLabel"
-			:target="target"
-			class="action-link focusable"
-			rel="noreferrer noopener"
-			@click="onClick">
-
-			<!-- @slot Manually provide icon -->
-			<slot name="icon">
-				<span :class="[isIconUrl ? 'action-link__icon--url' : icon]"
-					:style="{ backgroundImage: isIconUrl ? `url(${icon})` : null }"
-					class="action-link__icon" />
-			</slot>
-
-			<!-- long text with title -->
-			<p v-if="title">
-				<strong class="action-link__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-link__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-link__longtext"
-				v-text="text" />
-
-			<!-- default text display -->
-			<span v-else class="action-link__text">{{ text }}</span>
-
-			<!-- fake slot to gather inner text -->
-			<slot v-if="false" />
-		</a>
-	</li>
-</template>
-
-<script>
-import ActionTextMixin from '../../mixins/actionText'
-
-export default {
-	name: 'ActionLink',
-
-	mixins: [ActionTextMixin],
-
-	props: {
-		/**
-		 * destionation to link to
-		 */
-		href: {
-			type: String,
-			default: '#',
-			required: true,
-			validator: value => {
-				// href is either an anchor or a valid url starting with a scheme or a relative path
-				try {
-					return new URL(value)
-				} catch (error) {
-					return value.startsWith('#') || value.startsWith('/')
-				}
-			},
-		},
-		/**
-		 * download the link instead of opening
-		 */
-		download: {
-			type: String,
-			default: null,
-		},
-		/**
-		 * target to open the link
-		 */
-		target: {
-			type: String,
-			default: '_self',
-			validator: value => {
-				return ['_blank', '_self', '_parent', '_top'].indexOf(value) > -1
-			},
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/action';
-@include action-active;
-@include action-item('link');
-
-</style>

package/src/components/ActionLink/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 ActionLink from './ActionLink'
-
-export default ActionLink

package/src/components/ActionRadio/ActionRadio.vue

@@ -1,219 +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.
-Usually, you will provide a name prop to bind the radio together.
-So that only one of each name set can be selected at the same time.
-
-```vue
-	<Actions>
-		<ActionRadio @change="alert('(un)checked !')" name="uniqueId">First choice</ActionRadio>
-		<ActionRadio value="second" name="uniqueId" @change="alert('(un)checked !')">Second choice</ActionRadio>
-		<ActionRadio :checked="true" name="uniqueId" @change="alert('(un)checked !')">Third choice (checked)</ActionRadio>
-		<ActionRadio :disabled="true" name="uniqueId" @change="alert('(un)checked !')">Second choice (disabled)</ActionRadio>
-	</Actions>
-```
-</docs>
-
-<template>
-	<li class="action" :class="{ 'action--disabled': disabled }">
-		<span class="action-radio">
-			<input :id="id"
-				ref="radio"
-				:disabled="disabled"
-				:checked="checked"
-				:name="name"
-				:value="value"
-				:class="{ focusable: isFocusable }"
-				type="radio"
-				class="radio action-radio__radio"
-				@keydown.enter.exact.prevent="toggleInput"
-				@change="onChange">
-			<label ref="label" :for="id" class="action-radio__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: 'ActionRadio',
-
-	mixins: [ActionGlobalMixin],
-
-	props: {
-		/**
-		 * id attribute of the radio element
-		 */
-		id: {
-			type: String,
-			default: () => 'action-' + GenRandomId(),
-			validator: id => id.trim() !== '',
-		},
-
-		/**
-		 * checked state of the the radio element
-		 */
-		checked: {
-			type: Boolean,
-			default: false,
-		},
-
-		/**
-		 * Define if this radio is part of a set.
-		 * Checking the radio will disable all the
-		 * others with the same name.
-		 */
-		name: {
-			type: String,
-			required: true,
-		},
-
-		/**
-		 * value of the radio input
-		 */
-		value: {
-			type: [String, Number],
-			default: '',
-		},
-
-		/**
-		 * disabled state of the radio element
-		 */
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-
-	computed: {
-		/**
-		 * determines if the action is focusable
-		 * @returns {boolean} is the action focusable ?
-		 */
-		isFocusable() {
-			return !this.disabled
-		},
-	},
-
-	methods: {
-		toggleInput(event) {
-			// by clicking we also trigger the change event
-			this.$refs.label.click()
-		},
-		onChange(event) {
-			/**
-			 * Emitted when the radio state is changed
-			 * @type {boolean}
-			 */
-			this.$emit('update:checked', this.$refs.radio.checked)
-
-			/**
-			 * Emitted when the radio state is changed
-			 * @type {Event}
-			 */
-			this.$emit('change', event)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/action';
-@include action-active;
-@include action--disabled;
-
-.action-radio {
-	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 */
-	&__radio {
-		position: absolute;
-		top: auto;
-		left: -10000px;
-
-		overflow: hidden;
-
-		width: 1px;
-		height: 1px;
-		&:focus + .action-radio__label {
-			opacity: $opacity_full;
-		}
-	}
-
-	&__label {
-		display: flex;
-		align-items: center; // align radio to text
-
-		width: 100%;
-		padding: 0 !important;
-		padding-right: $icon-margin !important;
-
-		opacity: $opacity_normal;
-		// radio-width is 12px, border is 2
-		// (44 - 14 - 2) / 2 = 14
-		&::before {
-			margin: 0 14px 0 !important;
-		}
-	}
-
-	&--disabled {
-		&,
-		.action-radio__label {
-			cursor: pointer;
-		}
-	}
-
-	&:not(.action-radio--disabled):hover,
-	&:not(.action-radio--disabled):focus {
-		.action-radio__label {
-			opacity: $opacity_full;
-		}
-	}
-}
-
-</style>

package/src/components/ActionRadio/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 ActionRadio from './ActionRadio'
-
-export default ActionRadio

package/src/components/ActionRouter/ActionRouter.vue

@@ -1,100 +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/>.
-  -
-  -->
-
-<template>
-	<li class="action">
-		<router-link :to="to"
-			:exact="exact"
-			class="action-router focusable"
-			:aria-label="ariaLabel"
-			rel="noreferrer noopener"
-			@click.native="onClick">
-			<!-- @slot Manually provide icon -->
-			<slot name="icon">
-				<span :class="[isIconUrl ? 'action-router__icon--url' : icon]"
-					:style="{ backgroundImage: isIconUrl ? `url(${icon})` : null }"
-					class="action-router__icon" />
-			</slot>
-
-			<!-- long text with title -->
-			<p v-if="title">
-				<strong class="action-router__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-router__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-router__longtext"
-				v-text="text" />
-
-			<!-- default text display -->
-			<span v-else class="action-router__text">{{ text }}</span>
-
-			<!-- fake slot to gather inner text -->
-			<slot v-if="false" />
-		</router-link>
-	</li>
-</template>
-
-<script>
-import ActionTextMixin from '../../mixins/actionText'
-
-export default {
-	name: 'ActionRouter',
-
-	mixins: [ActionTextMixin],
-
-	props: {
-		/**
-		 * router-link to prop [https://router.vuejs.org/api/#to](https://router.vuejs.org/api/#to)
-		 */
-		to: {
-			type: [String, Object],
-			default: '',
-			required: true,
-		},
-		/**
-		 * router-link exact prop [https://router.vuejs.org/api/#exact](https://router.vuejs.org/api/#exact)
-		 */
-		exact: {
-			type: Boolean,
-			default: false,
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../assets/action';
-@include action-active;
-@include action-item('router');
-@include action--disabled;
-
-</style>