Merge pull request #1753 from nextcloud/fix/actions-single-icon-slot

Render the first action icon slot if single action

src/components/Actions/Actions.vue

@@ -85,14 +85,43 @@ https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-action
 To be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.
 It can be used with one or multiple actions.
 ```
-<Actions>
- <MicrophoneOff
- slot="icon"
- decorative
- title="" />
- <ActionButton icon="icon-delete">Delete</ActionButton>
- <ActionButton icon="icon-reply">Reply</ActionButton>
-</Actions>
+<template>
+ <div style="display: flex;align-items: center;">
+ <button @click="toggled = !toggled">Toggle multiple action</button>
+ <Actions>
+ <DotsHorizontalCircleOutline
+ slot="icon"
+ :size="16"
+ decorative />
+ <ActionButton>
+ <MicrophoneOff
+ slot="icon"
+ :size="16"
+ decorative />
+ Mute
+ </ActionButton>
+ <ActionButton v-if="toggled" icon="icon-delete">Delete</ActionButton>
+ </Actions>
+ <Actions>
+ </Actions>
+ </div>
+</template>
+<script>
+import DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline'
+import MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'
+
+export default {
+ components: {
+ DotsHorizontalCircleOutline,
+ MicrophoneOff,
+ },
+ data() {
+ return {
+ toggled: false
+ }
+ }
+}
+</script>
 ```
 
 ### Custom icon slot in child elements
@@ -116,8 +145,10 @@ It can be used with one or multiple actions.
  rel="noreferrer noopener"
  :disabled="disabled"
  @[firstActionEventBinding]="execFirstAction">
+ <!-- Render the icon slot content of the first action -->
+ <VNodes :vnodes="firstActionIconSlot" />
+
  <!-- fake slot to gather main action -->
- <slot name="icon" />
  <span :aria-hidden="true" hidden>
  <!-- @slot All action elements passed into the default slot will be used -->
  <slot />
@@ -222,6 +253,12 @@ export default {
 
  components: {
  Popover,
+
+ // Component to render the first action icon slot content (vnodes)
+ VNodes: {
+ functional: true,
+ render: (h, context) => context.props.vnodes,
+ },
  },
 
  props: {
@@ -393,14 +430,15 @@ export default {
 
  // return the event to bind if the firstActionVNode have an action
  firstActionEvent() {
- return this.firstActionVNode
- && this.firstActionVNode.componentOptions
- && this.firstActionVNode.componentOptions.listeners
- && this.firstActionVNode.componentOptions.listeners.click
+ return this.firstActionVNode?.componentOptions?.listeners?.click
  },
  firstActionEventBinding() {
  return this.firstActionEvent ? 'click' : null
  },
+ // return the first action icon slot vnodes array
+ firstActionIconSlot() {
+ return this.firstAction?.$slots?.icon
+ },
  firstActionClass() {
  const staticClass = this.firstActionVNode && this.firstActionVNode.data.staticClass
  const dynClass = this.firstActionVNode && this.firstActionVNode.data.class
@@ -654,6 +692,13 @@ export default {
  font-weight: bold;
  line-height: $icon-size;
 
+ // image slot
+ /deep/ span {
+ width: $icon-size;
+ height: $icon-size;
+ line-height: $icon-size;
+ }
+
  &:before {
  content: '';
  }

styleguide.config.js

@@ -8,7 +8,7 @@ const newConfig = Object.assign({}, webpackConfig, {
  // Ignore eslint
  rules: webpackConfig.module.rules.filter(
  rule => rule.use !== 'eslint-loader'
- )
+ ),
  },
 })
 
@@ -32,8 +32,8 @@ module.exports = {
  changeOrigin: true,
  ignorePath: true,
  secure: false,
- }
- }
+ },
+ },
  },
  }),