<template>
  <q-input v-model="innerValue" :mask="inputMask" v-bind="props" type="text">
    <template #append="scope">
      <q-icon name="event" class="cursor-pointer">
        <q-popup-proxy
          ref="qDateProxy"
          transition-show="scale"
          transition-hide="scale"
        >
          <div class="x-date__calendar" @click="hideClearButton">
            <q-date
              v-model="innerValue"
              minimal
              :options="options"
              :mask="dateMask"
              @input="closePopup"
            />
            <q-btn
              v-show="value"
              v-t="'base.clear'"
              class="x-date__clear"
              color="primary"
              no-caps
              :class="{ 'x-date__clear--hidden': clearButtonHidden }"
              @click.stop="closePopup((innerValue = ''))"
            />
          </div>
        </q-popup-proxy>
      </q-icon>
      <slot name="append" v-bind="scope" />
    </template>
    <template v-for="(_, slot) of slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </q-input>
</template>

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

<style lang="sass" src="./index.sass"></style>
