<commit_before><template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div class="hello">
      <h1>Welcome to v-click-outside example</h1>
      <div class="ffefd5-box" v-click-outside="ffefd5">
        <p>Click Outside #ffefd5 box</p>
      </div>
      <div class="c13f10-box" v-click-outside="config">
        <p>Click Outside #c13f10 box</p>
      </div>
      <div class="lime-box" ref="limeEl">
        <p>Click Outside #lime box</p>
      </div>
    </div>
  </div>
</template>

<script>
import vClickOutside from '../../../src'
const { bind, unbind } = vClickOutside.directive

export default {
  name: 'home',

  data() {
    return {
      foo: false,
      config: {
        handler: this.c13f10,
        middleware: this.middleware,
        events: ['click'],
      },
    }
  },

  mounted() {
    bind(this.$refs.limeEl, { value: this.lime })
  },

  beforeDestroy() {
    unbind(this.$refs.limeEl)
  },

  methods: {
    ffefd5(ev) {
      console.log('Clicked outside ffefd5!', ev)
    },

    c13f10(ev) {
      console.log('Clicked outside c13f10!', ev)
    },
    middleware(ev) {
      console.log('Middleware!', ev)
      return true
    },
    lime(ev) {
      console.log('Clicked outside lime!', ev)
    },
  },
}
</script>

<style>
.ffefd5-box {
  background-color: #ffefd5;
  height: 50px;
  text-align: center;
}

.c13f10-box {
  background-color: #c13f10;
  height: 50px;
}

.lime-box {
  background-color: lime;
  height: 50px;
}
</style>
<commit_msg>update: added iframe to Home.vue examples<commit_after><template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div class="hello">
      <h1>Welcome to v-click-outside example</h1>
      <div class="ffefd5-box" v-click-outside="ffefd5">
        <p>Click Outside #ffefd5 box</p>
      </div>
      <div class="c13f10-box" v-click-outside="config">
        <p>Click Outside #c13f10 box</p>
      </div>
      <div class="lime-box" ref="limeEl">
        <p>Click Outside #lime box</p>
      </div>
      <iframe class="iframe" src="/about" width="100%" />
    </div>
  </div>
</template>

<script>
import vClickOutside from '../../../src'
const { bind, unbind } = vClickOutside.directive

export default {
  name: 'home',

  data() {
    return {
      foo: false,
      config: {
        handler: this.c13f10,
        middleware: this.middleware,
        events: ['click'],
      },
    }
  },

  mounted() {
    bind(this.$refs.limeEl, { value: this.lime })
  },

  beforeDestroy() {
    unbind(this.$refs.limeEl)
  },

  methods: {
    ffefd5(ev) {
      console.log('Clicked outside ffefd5!', ev)
    },

    c13f10(ev) {
      console.log('Clicked outside c13f10!', ev)
    },
    middleware(ev) {
      console.log('Middleware!', ev)
      return true
    },
    lime(ev) {
      console.log('Clicked outside lime!', ev)
    },
  },
}
</script>

<style>
.ffefd5-box {
  background-color: #ffefd5;
  height: 50px;
  text-align: center;
}

.c13f10-box {
  background-color: #c13f10;
  height: 50px;
}

.lime-box {
  background-color: lime;
  height: 50px;
}

.iframe {
  border: 1px solid lightgrey;
  margin-top: 1em;
}
</style>
{'fraction_non_alphanumeric': 0.1769521410579345, 'fraction_numerical': 0.028652392947103273, 'mean_word_length': 2.419806243272336, 'pattern_counts': {'":': 0, '<': 54, '<?xml version=': 0, '>': 54, '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': '1750347', 'n_tokens_mistral': 1292, 'n_tokens_neox': 1199, 'n_words': 238}