<commit_before><template>
  <v-autocomplete
    class="c-select"
    :value="internalModelValue"
    @input="onInput"
    v-on="{...$listeners}"

    :loading="loading"
    :items="listItems"
    :search-input.sync="search"
    :item-value="modelObjectMeta.keyProp.name"
    :return-object="true"
    :clearable="effectiveClearable"
    :rules="effectiveRules"
    :error-messages="error"
    no-filter
    @keydown.native.delete.stop="!search ? onInput(null) : void 0"
    open-on-clear
    v-bind="inputBindAttrs"
  >
    <template slot="no-data">
      <!-- TODO: i18n -->
      <div class="grey--text px-4 my-3" v-if="!createItemLabel">No results found.</div>
      <!-- Must include an empty element so vuetify doesn't fall back to the slot's default -->
      <span v-else></span>
    </template>
    <template slot="prepend-item" v-if="createItemLabel">
      <v-list-item @click="createItem">
        <v-list-item-avatar class="mr-1 my-0">
          <v-icon color="success">fa fa-plus</v-icon>
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title >
            <span class="grey--text">
              Create: 
            </span>
            {{createItemLabel}}
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </template>
    <template slot="append-item">
      <!-- TODO: i18n -->
      <div class="grey--text px-4 my-3" v-if="listCaller.pageCount > 1">
        Max {{listCaller.pageSize}} items retrieved. Refine your search to view more.
      </div>
    </template>
    <template #item="{ item, attrs, on }">
      <!-- <c-display :model="item" /> -->
      <v-list-item v-bind="attrs" v-on="on">
        <v-list-item-content>
          <v-list-item-title >
            <slot name="item" :item="item">
              <c-display :model="item" />
            </slot>
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </template>
    <template #selection="{ item }">
      <slot name="item" :item="item" >
        <c-display :model="item" />
      </slot>
    </template>

  </v-autocomplete>
</template>

<script lang="ts">

import { Vue, Component, Watch, Prop } from 'vue-property-decorator';

import CDisplay from '../display/c-display';
import MetadataComponent from '../c-metadata-component'
import { 
  ApiClient, ModelApiClient, ListApiState, ListResultPromise, ItemApiState, ItemResultPromise, 
  Model, ModelType, ForeignKeyProperty, ModelReferenceNavigationProperty, ListParameters, 
  mapParamsToDto, getMessageForError, 
  ViewModel, 
  mapValueToModel,
  ItemApiStateWithArgs
} from 'coalesce-vue'

@Component({
  name: 'c-select',
  components: {
    CDisplay
  }
})
export default class CSelect extends MetadataComponent {
  public search: string | null = null;

  @Prop({required: false, default: undefined, type: Boolean})
  public clearable!: boolean

  @Prop({required: false})
  public value?: any

  @Prop({required: false})
  public keyValue?: any

  @Prop({required: false})
  public objectValue?: any

  @Prop({ required: false, type: Boolean, default: false })
  public preselectFirst?: false;

  @Prop({ required: false, type: Boolean, default: false })
  public preselectSingle?: false;

  @Prop({required: false})<commit_msg>Allow overriding of open-on-clear in c-select<commit_after><template>
  <v-autocomplete
    class="c-select"
    :value="internalModelValue"
    @input="onInput"
    v-on="{...$listeners}"

    :loading="loading"
    :items="listItems"
    :search-input.sync="search"
    :item-value="modelObjectMeta.keyProp.name"
    :return-object="true"
    :clearable="effectiveClearable"
    :rules="effectiveRules"
    :error-messages="error"
    no-filter
    @keydown.native.delete.stop="!search ? onInput(null) : void 0"
    :open-on-clear="openOnClear"
    v-bind="inputBindAttrs"
  >
    <template slot="no-data">
      <!-- TODO: i18n -->
      <div class="grey--text px-4 my-3" v-if="!createItemLabel">No results found.</div>
      <!-- Must include an empty element so vuetify doesn't fall back to the slot's default -->
      <span v-else></span>
    </template>
    <template slot="prepend-item" v-if="createItemLabel">
      <v-list-item @click="createItem">
        <v-list-item-avatar class="mr-1 my-0">
          <v-icon color="success">fa fa-plus</v-icon>
        </v-list-item-avatar>
        <v-list-item-content>
          <v-list-item-title >
            <span class="grey--text">
              Create: 
            </span>
            {{createItemLabel}}
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </template>
    <template slot="append-item">
      <!-- TODO: i18n -->
      <div class="grey--text px-4 my-3" v-if="listCaller.pageCount > 1">
        Max {{listCaller.pageSize}} items retrieved. Refine your search to view more.
      </div>
    </template>
    <template #item="{ item, attrs, on }">
      <!-- <c-display :model="item" /> -->
      <v-list-item v-bind="attrs" v-on="on">
        <v-list-item-content>
          <v-list-item-title >
            <slot name="item" :item="item">
              <c-display :model="item" />
            </slot>
          </v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </template>
    <template #selection="{ item }">
      <slot name="item" :item="item" >
        <c-display :model="item" />
      </slot>
    </template>

  </v-autocomplete>
</template>

<script lang="ts">

import { Vue, Component, Watch, Prop } from 'vue-property-decorator';

import CDisplay from '../display/c-display';
import MetadataComponent from '../c-metadata-component'
import { 
  ApiClient, ModelApiClient, ListApiState, ListResultPromise, ItemApiState, ItemResultPromise, 
  Model, ModelType, ForeignKeyProperty, ModelReferenceNavigationProperty, ListParameters, 
  mapParamsToDto, getMessageForError, 
  ViewModel, 
  mapValueToModel,
  ItemApiStateWithArgs
} from 'coalesce-vue'

@Component({
  name: 'c-select',
  components: {
    CDisplay
  }
})
export default class CSelect extends MetadataComponent {
  public search: string | null = null;

  @Prop({required: false, default: undefined, type: Boolean})
  public clearable!: boolean

  @Prop({required: false})
  public value?: any

  @Prop({required: false})
  public keyValue?: any

  @Prop({required: false})
  public objectValue?: any

  @Prop({ required: false, type: Boolean, default: false })
  public preselectFirst?: boolean;

  @Prop({ required: false, type: Boolean, default: false })
  public preselectSingle?: boolean;

  @Prop({ required: false, type: Boolean, default: true })
  public openOnClear?: boolean;

  @Prop({required: false})
{'fraction_non_alphanumeric': 0.1617097593782693, 'fraction_numerical': 0.0035869077865789867, 'mean_word_length': 2.8044343376918706, 'pattern_counts': {'":': 0, '<': 103, '<?xml version=': 0, '>': 105, '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': '5009658', 'n_tokens_mistral': 2181, 'n_tokens_neox': 2127, 'n_words': 466}