<template>
  <span class="macro-dropdown navigatioin-section" v-if="macroList.length">
    <a
      type="text"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
      v-bind="$attrs"
    >
      <i :class="icon"></i>
    </a>
    <label>
      <input type="checkbox" v-model="checked" v-bind="$attrs" />
      <ul class="macro-lists">
        <li
          v-for="(item, index) in macroList"
          :key="`micro_${index}`"
          @click.prevent="onMacroCall(item.name)"
        >
          {{ item.label }}
        </li>
      </ul>
    </label>
  </span>
</template>

<script>
import { props } from "./props";
import { methods } from "./methods";
export default {
  name: "macro-navigation-section",
  props,
  methods,
  data() {
    return {
      checked: false,
    };
  },
};
</script>

<style scoped lang="scss" src="./style.scss" />