<commit_before><template>
  <ul class="apos-admin-bar__items">
    <li class="apos-admin-bar__item" v-if="pageTree">
      <AposButton
        type="subtle" label="Page Tree"
        class="apos-admin-bar__btn"
        :modifiers="['no-motion']"
        @click="emitEvent('@apostrophecms/page:manager')"
      />
    </li>
    <li
      v-for="item in menuItems" :key="item.name"
      class="apos-admin-bar__item"
    >
      <AposContextMenu
        v-if="item.items" class="apos-admin-bar__sub"
        :menu="item.items" :button="{
          label: item.label,
          modifiers: ['no-motion'],
          class: 'apos-admin-bar__btn',
          type: 'subtle'
        }"
        @item-clicked="emitEvent"
      />
      <Component
        v-else
        :is="item.options && item.options.component || 'AposButton'"
        type="subtle"
        @click="emitEvent(item.action)"
        :label="item.label"
        :modifiers="['no-motion']"
        class="apos-admin-bar__btn"
      />
    </li>
    <li class="apos-admin-bar__item" v-if="createMenu.length > 0">
      <AposContextMenu
        class="apos-admin-bar__create"
        :menu="createMenu"
        :button="{
          label: 'New item',
          iconOnly: true,
          icon: 'plus-icon',
          type: 'primary',
          modifiers: ['round', 'no-motion']
        }"
        @item-clicked="emitEvent"
      />
    </li>
    <li
      v-if="trayItems.length > 0"
      class="apos-admin-bar__item apos-admin-bar__tray-items"
    >
      <template v-for="item in trayItems">
        <Component
          v-if="item.options.component"
          :is="item.options.component"
          :key="item.name"
        />
        <AposButton
          v-else :key="item.name"
          type="subtle" :modifiers="['small', 'no-motion']"
          :tooltip="trayItemTooltip(item)" class="apos-admin-bar__context-button"
          :icon="item.options.icon" :icon-only="true"
          :label="item.label"
          :state="trayItemState[item.name] ? [ 'active' ] : []"
          @click="emitEvent(item.action)"
        />
      </template>
    </li>
  </ul>
</template>

<script>
import { klona } from 'klona';

export default {
  name: 'TheAposAdminBarMenu',
  props: {
    items: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  data() {
    return {
      createMenu: [],
      menuItems: [],
      trayItems: [],
      trayItemState: {}
    };
  },
  computed: {
    moduleOptions() {
      return window.apos.adminBar;
    },
    pageTree() {
      return this.moduleOptions.pageTree;
    }
  },
  async mounted() {
    const itemsSet = klona(this.items);
    this.menuItems = itemsSet.filter(item => !(item.options && item.options.contextUtility))
      .map(item => {
        if (item.items) {
          item.items.forEach(subitem => {
            // The context menu needs an `action` property to emit.
            subitem.action = subitem.action || subitem.name;
          });
        }
        return item;
      });
    this.trayItems = itemsSet.filter(item => item.options && item.options.contextUtility);

    Object.values(apos.modules).forEach(module => {
      if (module.quickCreate) {
        this.createMenu.push({
          label: module.label || module.name,
          name: module.name,
          action: `${module.name}:editor`
        });<commit_msg>add bus listener back for og style tray buttons<commit_after><template>
  <ul class="apos-admin-bar__items">
    <li class="apos-admin-bar__item" v-if="pageTree">
      <AposButton
        type="subtle" label="Page Tree"
        class="apos-admin-bar__btn"
        :modifiers="['no-motion']"
        @click="emitEvent('@apostrophecms/page:manager')"
      />
    </li>
    <li
      v-for="item in menuItems" :key="item.name"
      class="apos-admin-bar__item"
    >
      <AposContextMenu
        v-if="item.items" class="apos-admin-bar__sub"
        :menu="item.items" :button="{
          label: item.label,
          modifiers: ['no-motion'],
          class: 'apos-admin-bar__btn',
          type: 'subtle'
        }"
        @item-clicked="emitEvent"
      />
      <Component
        v-else
        :is="item.options && item.options.component || 'AposButton'"
        type="subtle"
        @click="emitEvent(item.action)"
        :label="item.label"
        :modifiers="['no-motion']"
        class="apos-admin-bar__btn"
      />
    </li>
    <li class="apos-admin-bar__item" v-if="createMenu.length > 0">
      <AposContextMenu
        class="apos-admin-bar__create"
        :menu="createMenu"
        :button="{
          label: 'New item',
          iconOnly: true,
          icon: 'plus-icon',
          type: 'primary',
          modifiers: ['round', 'no-motion']
        }"
        @item-clicked="emitEvent"
      />
    </li>
    <li
      v-if="trayItems.length > 0"
      class="apos-admin-bar__item apos-admin-bar__tray-items"
    >
      <template v-for="item in trayItems">
        <Component
          v-if="item.options.component"
          :is="item.options.component"
          :key="item.name"
        />
        <AposButton
          v-else :key="item.name"
          type="subtle" :modifiers="['small', 'no-motion']"
          :tooltip="trayItemTooltip(item)" class="apos-admin-bar__context-button"
          :icon="item.options.icon" :icon-only="true"
          :label="item.label"
          :state="trayItemState[item.name] ? [ 'active' ] : []"
          @click="emitEvent(item.action)"
        />
      </template>
    </li>
  </ul>
</template>

<script>
import { klona } from 'klona';

export default {
  name: 'TheAposAdminBarMenu',
  props: {
    items: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  data() {
    return {
      createMenu: [],
      menuItems: [],
      trayItems: [],
      trayItemState: {}
    };
  },
  computed: {
    moduleOptions() {
      return window.apos.adminBar;
    },
    pageTree() {
      return this.moduleOptions.pageTree;
    }
  },
  async mounted() {
    apos.bus.$on('admin-menu-click', this.onAdminMenuClick);

    const itemsSet = klona(this.items);
    this.menuItems = itemsSet.filter(item => !(item.options && item.options.contextUtility))
      .map(item => {
        if (item.items) {
          item.items.forEach(subitem => {
            // The context menu needs an `action` property to emit.
            subitem.action = subitem.action || subitem.name;
          });
        }
        return item;
      });
    this.trayItems = itemsSet.filter(item => item.options && item.options.contextUtility);

    Object.values(apos.modules).forEach(module => {
      if (module.quickCreate) {
        this.createMenu.push({
          label: module.label || module.name,
          name: module.name,
          action: `${module.name}:editor`
        });
{'fraction_non_alphanumeric': 0.16043249561659848, 'fraction_numerical': 0.0005844535359438924, 'mean_word_length': 2.022075055187638, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 59, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5014497', 'n_tokens_mistral': 2200, 'n_tokens_neox': 2212, 'n_words': 348}