<template>
  <div class="full-width">
    <q-select 
      clearable 
      filled 
      :disable="!records.length"
      class="full-width"
      v-model="model" 
      :options="optionsByFilter" 
      :label="label"
      use-input
      input-debounce="0"
      @filter="filterFn"
      stack-label
    >
      <template v-slot:option="scope">
        <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
          <q-item-section>
            <q-item-label>{{ scope.opt.label }}</q-item-label>
            <q-item-label caption v-if="scope.opt && scope.opt.parent && scope.opt.parent.label">{{ scope.opt.parent.label }}</q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </q-select>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<style>
.base-tree.q-tree .q-tree__node-header {
  pointer-events: none;
}
.base-tree__active-node {
  pointer-events: all;
}
</style>
