<script>
import { unique } from './util'

export default {
  name: 'UiGridFilterItem',
  inject: ['UiGridFilter'],
  props: {
    label: {
      type: String
    },
    position: {
      type: String
    }
  },
  data() {
    return {
      data: {
        key: 0
      }
    }
  },
  computed: {
    item() {
      return {
        id: this.id,
        props: this.$props,
        data: this.data,
        render: () => {
          return this.$scopedSlots.default()
        }
      }
    }
  },
  created() {
    this.id = unique()
    this.UiGridFilter.addItem(this.item)
  },
  beforeDestroy() {
    this.UiGridFilter.removeItem(this.id)
  },
  updated() {
    this.data.key++
  },
  render() {
    return null
  }
}
</script>
