Allow Modal to specify inline actions

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>
nextcloud-libraries · Aug 18, 2022 · 3b549a6 · 3b549a6
1 parent 4e66611
commit 3b549a6
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 140 deletions.
diff --git a/src/components/Actions/Actions.vue b/src/components/Actions/Actions.vue
@@ -554,6 +554,7 @@ export default {
 
 		/**
 		 * Display x items inline out of the dropdown menu
+		 * Will be ignored if `forceMenu` is set
 		 */
 		inline: {
 			type: Number,

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
@@ -22,158 +22,159 @@
 
 <docs>
 
-	```vue
-	<template>
-		<div>
-			<ButtonVue @click="showModal">Show Modal</ButtonVue>
-			<modal
-				v-if="modal"
-				@close="closeModal"
-				size="small"
-				title="Title"
-				:outTransition="true"
-				:hasNext="true"
-				:hasPrevious="true">
-				<div class="modal__content">Hello world</div>
-			</modal>
-		</div>
-	</template>
-	<style scoped>
-	.modal__content {
-		margin: 50px;
-		text-align: center;
-	}
+```vue
+<template>
+	<div>
+		<ButtonVue @click="showModal">Show Modal</ButtonVue>
+		<modal
+			v-if="modal"
+			@close="closeModal"
+			size="small"
+			title="Title"
+			:outTransition="true"
+			:hasNext="true"
+			:hasPrevious="true">
+			<div class="modal__content">Hello world</div>
+		</modal>
+	</div>
+</template>
+<style scoped>
+.modal__content {
+	margin: 50px;
+	text-align: center;
+}
 
-	</style>
-	<script>
-	export default {
-		data() {
-			return {
-				modal: false
-			}
+</style>
+<script>
+export default {
+	data() {
+		return {
+			modal: false
+		}
+	},
+	methods: {
+		showModal() {
+			this.modal = true
 		},
-		methods: {
-			showModal() {
-				this.modal = true
-			},
-			closeModal() {
-				this.modal = false
-			}
+		closeModal() {
+			this.modal = false
 		}
 	}
-	</script>
-	```
-
-	### Modal with more properties
-
-	```vue
-	<template>
-		<div>
-			<ButtonVue @click="showModal">Show Modal with fields</ButtonVue>
-			<modal
-				v-if="modal"
-				@close="closeModal"
-				size="large"
-				title="Title inside modal">
-				<div class="modal__content">
-					<h2>Please enter your name</h2>
-					<TextField label="First Name" :value.sync="firstName" />
-					<TextField label="Last Name" :value.sync="lastName" />
-					<ButtonVue
-						:disabled="!this.firstName || !this.lastName"
-						@click="closeModal"
-						type="primary">
-						Submit
-					</ButtonVue>
-				</div>
-			</modal>
-		</div>
-	</template>
-	<style scoped>
-	.modal__content {
-		margin: 50px;
-		text-align: center;
-	}
+}
+</script>
+```
 
-	.input-field {
-		margin: 12px 0px;
-	}
+### Modal with more properties
 
-	</style>
-	<script>
-	import ButtonVue from '../ButtonVue/index.js'
-	import TextField from '../TextField/index.js'
-	export default {
-		components: {
-			ButtonVue,
-			TextField,
-		},
-		data() {
-			return {
-				modal: false,
-				firstName: '',
-				lastName: '',
-			}
+```vue
+<template>
+	<div>
+		<ButtonVue @click="showModal">Show Modal with fields</ButtonVue>
+		<modal
+			v-if="modal"
+			@close="closeModal"
+			title="Title inside modal">
+			<div class="modal__content">
+				<h2>Please enter your name</h2>
+				<TextField label="First Name" :value.sync="firstName" />
+				<TextField label="Last Name" :value.sync="lastName" />
+				<ButtonVue
+					:disabled="!this.firstName || !this.lastName"
+					@click="closeModal"
+					type="primary">
+					Submit
+				</ButtonVue>
+			</div>
+		</modal>
+	</div>
+</template>
+<script>
+import ButtonVue from '../ButtonVue/index.js'
+import TextField from '../TextField/index.js'
+
+export default {
+	components: {
+		ButtonVue,
+		TextField,
+	},
+	data() {
+		return {
+			modal: false,
+			firstName: '',
+			lastName: '',
+		}
+	},
+	methods: {
+		showModal() {
+			this.firstName = ''
+			this.lastName = ''
+			this.modal = true
 		},
-		methods: {
-			showModal() {
-				this.firstName = ''
-				this.lastName = ''
-				this.modal = true
-			},
-			closeModal() {
-				this.modal = false
-			}
+		closeModal() {
+			this.modal = false
 		}
 	}
-	</script>
-	```
-
-	### Usage of popover in modal
-
-	* Set container property to .modal-mask to inject popover context of the modal:
-
-	```vue
-	<template>
-		<div>
-			<ButtonVue @click="showModal">Show Modal</ButtonVue>
-			<modal v-if="modal" @close="closeModal" size="small">
-				<EmojiPicker container=".modal-mask" @select="select">
-					<ButtonVue>Select emoji {{ emoji }}</ButtonVue>
-				</EmojiPicker>
-			</modal>
-		</div>
-	</template>
-	<style scoped>
-		.modal__content {
-			margin: 50px;
-			text-align: center;
+}
+</script>
+<style scoped>
+.modal__content {
+	margin: 50px;
+	text-align: center;
+}
+
+.input-field {
+	margin: 12px 0px;
+}
+
+</style>
+
+```
+
+### Usage of popover in modal
+
+* Set container property to .modal-mask to inject popover context of the modal:
+
+```vue
+<template>
+	<div>
+		<ButtonVue @click="showModal">Show Modal</ButtonVue>
+		<modal v-if="modal" @close="closeModal" size="small">
+			<EmojiPicker container=".modal-mask" @select="select">
+				<ButtonVue>Select emoji {{ emoji }}</ButtonVue>
+			</EmojiPicker>
+		</modal>
+	</div>
+</template>
+<style scoped>
+	.modal__content {
+		margin: 50px;
+		text-align: center;
+	}
+</style>
+<script>
+export default {
+	data() {
+		return {
+			emoji: '😛',
+			modal: false
 		}
-	</style>
-	<script>
-	export default {
-		data() {
-			return {
-				emoji: '😛',
-				modal: false
-			}
+	},
+	methods: {
+		showModal() {
+			this.modal = true
 		},
-		methods: {
-			showModal() {
-				this.modal = true
-			},
-			closeModal() {
-				this.modal = false
-			},
-			select(emoji) {
-				this.emoji = emoji
-			},
+		closeModal() {
+			this.modal = false
 		},
-	}
-	</script>
-	```
-
+		select(emoji) {
+			this.emoji = emoji
+		},
+	},
+}
+</script>
+```
 </docs>
+
 <template>
 	<transition name="fade">
 		<div ref="mask"
@@ -226,7 +227,7 @@
 						</button>
 
 						<!-- Actions menu -->
-						<Actions class="header-actions">
+						<Actions class="header-actions" :inline="inlineActions">
 							<!-- @slot List of actions to show -->
 							<slot name="actions" />
 						</Actions>
@@ -453,6 +454,16 @@ export default {
 			type: Array,
 			default: () => [],
 		},
+
+		/**
+		 * Display x items inline
+		 *
+		 * @see Actions component usage
+		 */
+		inlineActions: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	emits: [