bramw_baserow/web-frontend/modules/builder/components/page/header/PageActions.vue

<template>
  <ul class="header__filter">
    <li
      v-for="actionType in pageActionTypes"
      :key="actionType.getType()"
      class="header__filter-item header__filter-item--right"
    >
      <a
        :ref="`button_${actionType.type}`"
        class="header__filter-link"
        @click="
          actionType.onClick({
            component: $refs[`component_${actionType.type}`][0],
            button: $refs[`button_${actionType.type}`][0],
            builder: builder,
            page: page,
          })
        "
      >
        <i
          v-if="actionType.icon"
          class="header__filter-icon fas"
          :class="`fa-${actionType.icon}`"
        ></i>
        <span class="header__filter-name">{{ actionType.label }}</span>
      </a>
      <component
        :is="actionType.component"
        :ref="`component_${actionType.type}`"
        :builder="builder"
        :page="page"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'PageActions',
  inject: ['builder'],
  props: {
    page: {
      type: Object,
      required: true,
    },
  },
  computed: {
    pageActionTypes() {
      return Object.values(this.$registry.getOrderedList('pageAction'))
    },
  },
}
</script>