<template>
  <span class="macro-dropdown" v-if="macroList.length">
    <button v-bind="$attrs">{{ label }}</button>
    <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-form-section",
  props,
  methods,
  data() {
    return {
      checked: false,
    };
  },
};
</script>


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