🩹 enhance actions focus trap

[vinicius73]

Related to #3021

• add scoped default slot
• expose clearFocusTrap
• add example in Actions

---

<template>
  <div>
    <input ref="input" />
    <Actions>
      <template v-slot:default="{ clearFocusTrap }">
        <ActionButton @click="focusInput(clearFocusTrap)" :close-after-click="true">
          <template #icon>
            <Delete :size="20" />
          </template>
          Focus input
        </ActionButton>
        <ActionButton @click="actionDelete">
          <template #icon>
            <Delete :size="20" />
          </template>
          Delete
        </ActionButton>
      </template>
    </Actions>
  </div>
</template>

<script>
import Delete from 'vue-material-design-icons/Delete'
export default {
  components: {
    Delete,
  },
  methods: {
    actionDelete() {
      alert('Delete')
    },
    async focusInput(clearFocusTrap) {
      await clearFocusTrap({ returnFocus: false })
      await this.$nextTick()
      this.$refs.input.focus()
    },
  },
}
</script>

[raimund-schluessler]

Not sure why, but the docs don't build/work.

[raimund-schluessler]

Not sure why, but the docs don't build/work.

Locally, the styleguide looks good (and the example works). Maybe just a hiccup?

[raimund-schluessler]

@vinicius73 I hope you don't mind, I pushed a commit with my suggestions. If you disagree with them, just discard my commit. The docs still don't show up, though.

[vinicius73]

@vinicius73 I hope you don't mind, I pushed a commit with my suggestions. If you disagree with them, just discard my commit. The docs still don't show up, though.

I disagree just about getActions, but as I said, I am preparing other PR. :)

[raimund-schluessler]

@vinicius73 I hope you don't mind, I pushed a commit with my suggestions. If you disagree with them, just discard my commit. The docs still don't show up, though.

I disagree just about getActions, but as I said, I am preparing other PR. :)

Actions was just rewritten, I would like to know what you think needs to change. Let's see your PR😉

[raimund-schluessler]

Underlying issue was solved with #3030.