From a186fc14e7429a500108a12fa2153453fedb3477 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 22 Oct 2021 17:47:53 -0500
Subject: [PATCH 01/85] Datepicker initial skelethon

---
 src/components/TDatepicker.vue                | 208 +++++++++++++
 .../TDatepicker/DatepickerClearButton.vue     |  29 ++
 .../TDatepicker/DatepickerDropdown.vue        |  19 ++
 src/components/TDatepicker/DatepickerView.vue |  20 ++
 .../TDatepicker/DatepickerViewControls.vue    |  60 ++++
 .../TDatepicker/DatepickerViewMonth.vue       | 278 ++++++++++++++++++
 .../TDatepicker/DatepickerViewMonthDay.vue    |  22 ++
 src/development/AppMenu.vue                   |   3 +
 src/development/Datepicker.vue                |  32 ++
 src/development/router.ts                     |   2 +
 10 files changed, 673 insertions(+)
 create mode 100644 src/components/TDatepicker.vue
 create mode 100644 src/components/TDatepicker/DatepickerClearButton.vue
 create mode 100644 src/components/TDatepicker/DatepickerDropdown.vue
 create mode 100644 src/components/TDatepicker/DatepickerView.vue
 create mode 100644 src/components/TDatepicker/DatepickerViewControls.vue
 create mode 100644 src/components/TDatepicker/DatepickerViewMonth.vue
 create mode 100644 src/components/TDatepicker/DatepickerViewMonthDay.vue
 create mode 100644 src/development/Datepicker.vue

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
new file mode 100644
index 0000000..4c48eb6
--- /dev/null
+++ b/src/components/TDatepicker.vue
@@ -0,0 +1,208 @@
+<template>
+  <div
+    :class="configuration.classesList?.wrapper"
+    v-bind="attributes"
+  >
+    <!-- <t-select
+      v-model="localValue"
+      :name="configuration.name"
+      style="display: none"
+      :fixed-classes="undefined"
+      :classes="undefined"
+      :multiple="configuration.multiple"
+      :options="flattenedOptions"
+    /> -->
+
+    <t-dropdown
+      ref="dropdownComponent"
+      :classes="undefined"
+      :fixed-classes="undefined"
+      :popper-options="configuration.dropdownPopperOptions"
+      :placement="configuration.dropdownPlacement"
+      show
+      tag-name="input"
+      type="text"
+    >
+      <datepicker-dropdown />
+      <!-- :classes="dropdownClasses"
+      :fixed-classes="undefined" -->
+
+      <!-- :toggle-on-focus="false"
+      :toggle-on-click="false"
+      :toggle-on-hover="false" -->
+      <!-- <template #trigger>
+        <rich-select-trigger ref="trigger">
+          <template #selectorIcon="props">
+            <slot
+              name="selectorIcon"
+              v-bind="props"
+            />
+          </template>
+          <template #placeholder="props">
+            <slot
+              name="placeholder"
+              v-bind="props"
+            />
+          </template>
+          <template #label="props">
+            <slot
+              name="label"
+              v-bind="props"
+            />
+          </template>
+          <template #tagCloseIcon="props">
+            <slot
+              name="tagCloseIcon"
+              v-bind="props"
+            />
+          </template>
+          <template #tagLabel="props">
+            <slot
+              name="tagLabel"
+              v-bind="props"
+            />
+          </template>
+        </rich-select-trigger>
+      </template> -->
+
+      <!-- <rich-select-dropdown
+        ref="dropdown"
+      >
+        <template #option="props">
+          <slot
+            name="option"
+            v-bind="props"
+          />
+        </template>
+        <template #optionLabel="props">
+          <slot
+            name="optionLabel"
+            v-bind="props"
+          />
+        </template>
+        <template #optionIcon="props">
+          <slot
+            name="optionIcon"
+            v-bind="props"
+          />
+        </template>
+        <template #dropdownTop="props">
+          <slot
+            name="dropdownTop"
+            v-bind="props"
+          />
+        </template>
+        <template #dropdownButton="props">
+          <slot
+            name="dropdownButton"
+            v-bind="props"
+          />
+        </template>
+        <template #stateFeedback="props">
+          <slot
+            name="stateFeedback"
+            v-bind="props"
+          />
+        </template>
+      </rich-select-dropdown> -->
+    </t-dropdown>
+
+    <!-- <rich-select-clear-button
+      v-if="showClearButton"
+      ref="clearButton"
+      @click="clearValue"
+    >
+      <template #clearButton="props">
+        <slot
+          name="clearButton"
+          v-bind="props"
+          :classes-list="configuration.classesList"
+        />
+      </template>
+    </rich-select-clear-button> -->
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  PropType,
+  provide,
+  ref,
+  computed,
+} from 'vue';
+import {
+  InputOptions,
+  TRichSelectConfig,
+  TRichSelectClassesKeys,
+  TRichSelectClassesValidKeys,
+  NormalizedOption,
+  CSSRawClassesList,
+  TDropdownPopperDefaultOptions as defaultPopperOptions,
+  isEqual,
+  throttle,
+  Measure,
+  Data,
+} from '@variantjs/core';
+import { Options, Placement } from '@popperjs/core';
+import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
+import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
+import {
+  TRichSelectOptions, TSelectValue,
+} from '../types';
+import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
+import TDropdown, { validDropdownPlacements } from './TDropdown.vue';
+import { sameWidthModifier } from '../utils/popper';
+
+// @vue/component
+export default defineComponent({
+  name: 'TRichSelect',
+  components: {
+    DatepickerDropdown,
+    TDropdown,
+  },
+  props: {
+    ...getVariantPropsWithClassesList<TRichSelectOptions, TRichSelectClassesValidKeys>(),
+    modelValue: {
+      type: [Date, String, Number, Array] as PropType<TSelectValue>,
+      default: undefined,
+    },
+
+    dropdownPlacement: {
+      type: String as PropType<Placement>,
+      default: undefined,
+      validator: (value: string):boolean => validDropdownPlacements.includes(value),
+    },
+    dropdownPopperOptions: {
+      type: Object as PropType<Options>,
+      default: (): Options => ({
+        ...defaultPopperOptions,
+        placement: 'bottom',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 8],
+            },
+          },
+          sameWidthModifier,
+        ],
+      } as Options),
+    },
+
+  },
+
+  setup(props) {
+    const { configuration, attributes } = useConfigurationWithClassesList<TRichSelectOptions>(TRichSelectConfig, TRichSelectClassesKeys);
+
+    // const { localValue, clearValue } = useVModel(props, 'modelValue');
+
+    return {
+      configuration,
+      attributes,
+    };
+  },
+
+});
+
+</script>
diff --git a/src/components/TDatepicker/DatepickerClearButton.vue b/src/components/TDatepicker/DatepickerClearButton.vue
new file mode 100644
index 0000000..3fa044f
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerClearButton.vue
@@ -0,0 +1,29 @@
+<template>
+  <button
+    type="button"
+    data-rich-select-focusable
+    :class="className"
+  >
+    <slot name="clearButton">
+      <close-icon class="w-4 h-4" />
+    </slot>
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import CloseIcon from '../../icons/CloseIcon.vue';
+import useInjectsClassesListClass from '../../use/useInjectsClassesListClass';
+
+export default defineComponent({
+  name: 'RichSelectClearButton',
+  components: {
+    CloseIcon,
+  },
+  setup() {
+    const className = useInjectsClassesListClass('clearButton');
+
+    return { className };
+  },
+});
+</script>
diff --git a/src/components/TDatepicker/DatepickerDropdown.vue b/src/components/TDatepicker/DatepickerDropdown.vue
new file mode 100644
index 0000000..5f60a9c
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerDropdown.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="inline-flex flex-col mt-1 bg-white border rounded">
+    <div class="inline-flex flex-wrap ">
+      <datepicker-view />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import DatepickerView from './DatepickerView.vue';
+
+export default defineComponent({
+  name: 'DatepickerDropdown',
+  components: {
+    DatepickerView,
+  },
+});
+</script>
diff --git a/src/components/TDatepicker/DatepickerView.vue b/src/components/TDatepicker/DatepickerView.vue
new file mode 100644
index 0000000..7a96008
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerView.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="w-64">
+    <datepicker-view-controls />
+    <datepicker-view-month />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import DatepickerViewControls from './DatepickerViewControls.vue';
+import DatepickerViewMonth from './DatepickerViewMonth.vue';
+
+export default defineComponent({
+  name: 'DatepickerView',
+  components: {
+    DatepickerViewControls,
+    DatepickerViewMonth,
+  },
+});
+</script>
diff --git a/src/components/TDatepicker/DatepickerViewControls.vue b/src/components/TDatepicker/DatepickerViewControls.vue
new file mode 100644
index 0000000..9e237e7
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerViewControls.vue
@@ -0,0 +1,60 @@
+<template>
+  <div class="flex px-3 pt-2">
+    <button
+      type="button"
+      class="flex inline-flex items-center px-2 py-1 -ml-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100"
+      tabindex="-1"
+    >
+      <span class="">October</span><span class="ml-1 text-gray-500">2021</span><svg
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        class="flex-shrink-0 w-5 h-5 text-gray-400 fill-current"
+      ><polygon points="12.9497475 10.7071068 13.6568542 10 8 4.34314575 6.58578644 5.75735931 10.8284271 10 6.58578644 14.2426407 8 15.6568542 12.9497475 10.7071068" /></svg>
+    </button>
+    <button
+      aria-label="Prev Year"
+      type="button"
+      class="inline-flex p-1 ml-2 ml-auto transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      tabindex="-1"
+    >
+      <svg
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        class="inline-flex w-6 h-6 text-gray-400"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M15 19l-7-7 7-7"
+      /></svg>
+    </button>
+    <button
+      aria-label="Next Year"
+      type="button"
+      class="inline-flex p-1 -mr-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      tabindex="-1"
+    >
+      <svg
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        class="inline-flex w-6 h-6 text-gray-400"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M9 5l7 7-7 7"
+      /></svg>
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DatepickerViewControls',
+});
+</script>
diff --git a/src/components/TDatepicker/DatepickerViewMonth.vue b/src/components/TDatepicker/DatepickerViewMonth.vue
new file mode 100644
index 0000000..1cf71a4
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerViewMonth.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="px-3 py-2">
+    <div class="grid grid-cols-7 ">
+      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Sun</span>
+      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Mon</span>
+      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Tue</span>
+      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Wed</span>
+      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Thu</span>
+      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Fri</span>
+      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Sat</span>
+    </div>
+    <div class="grid grid-cols-7">
+      <DatepickerViewMonthDay />
+
+      <span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="September 27, 2021"
+        data-date="2021-09-27"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >27</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="September 28, 2021"
+        data-date="2021-09-28"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >28</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="September 29, 2021"
+        data-date="2021-09-29"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >29</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="September 30, 2021"
+        data-date="2021-09-30"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >30</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 1, 2021"
+        data-date="2021-10-01"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >1</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 2, 2021"
+        data-date="2021-10-02"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >2</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 3, 2021"
+        data-date="2021-10-03"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >3</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 4, 2021"
+        data-date="2021-10-04"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >4</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 5, 2021"
+        data-date="2021-10-05"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >5</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 6, 2021"
+        data-date="2021-10-06"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >6</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 7, 2021"
+        data-date="2021-10-07"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >7</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 8, 2021"
+        data-date="2021-10-08"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >8</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 9, 2021"
+        data-date="2021-10-09"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >9</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 10, 2021"
+        data-date="2021-10-10"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >10</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 11, 2021"
+        data-date="2021-10-11"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >11</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 12, 2021"
+        data-date="2021-10-12"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >12</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 13, 2021"
+        data-date="2021-10-13"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >13</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 14, 2021"
+        data-date="2021-10-14"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >14</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 15, 2021"
+        data-date="2021-10-15"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm text-white bg-blue-500 rounded-full disabled:opacity-50 disabled:cursor-not-allowed"
+      >15</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 16, 2021"
+        data-date="2021-10-16"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >16</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 17, 2021"
+        data-date="2021-10-17"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >17</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 18, 2021"
+        data-date="2021-10-18"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >18</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 19, 2021"
+        data-date="2021-10-19"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >19</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 20, 2021"
+        data-date="2021-10-20"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >20</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 21, 2021"
+        data-date="2021-10-21"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >21</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 22, 2021"
+        aria-current="date"
+        data-date="2021-10-22"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm border border-blue-500 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >22</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 23, 2021"
+        data-date="2021-10-23"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >23</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 24, 2021"
+        data-date="2021-10-24"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >24</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 25, 2021"
+        data-date="2021-10-25"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >25</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 26, 2021"
+        data-date="2021-10-26"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >26</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 27, 2021"
+        data-date="2021-10-27"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >27</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 28, 2021"
+        data-date="2021-10-28"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >28</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 29, 2021"
+        data-date="2021-10-29"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >29</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 30, 2021"
+        data-date="2021-10-30"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >30</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="October 31, 2021"
+        data-date="2021-10-31"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >31</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="November 1, 2021"
+        data-date="2021-11-01"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >1</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="November 2, 2021"
+        data-date="2021-11-02"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >2</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="November 3, 2021"
+        data-date="2021-11-03"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >3</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="November 4, 2021"
+        data-date="2021-11-04"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >4</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="November 5, 2021"
+        data-date="2021-11-05"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >5</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
+        aria-label="November 6, 2021"
+        data-date="2021-11-06"
+        type="button"
+        tabindex="-1"
+        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      >6</button></span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import DatepickerViewMonthDay from './DatepickerViewMonthDay.vue';
+
+export default defineComponent({
+  name: 'DatepickerViewMonth',
+  components: {
+    DatepickerViewMonthDay,
+  },
+
+});
+</script>
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
new file mode 100644
index 0000000..e858bec
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="flex items-center flex-shrink-0 w-full h-8">
+    <button
+      aria-label="September 26, 2021"
+      data-date="2021-09-26"
+      type="button"
+      tabindex="-1"
+      class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+    >
+      26
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'DatepickerViewMonthDay',
+
+});
+</script>
diff --git a/src/development/AppMenu.vue b/src/development/AppMenu.vue
index 585d509..07ad9cb 100644
--- a/src/development/AppMenu.vue
+++ b/src/development/AppMenu.vue
@@ -30,6 +30,9 @@
     <t-button to="/dialog">
       Dialog
     </t-button>
+    <t-button to="/datepicker">
+      Datepicker
+    </t-button>
     <t-button to="/about">
       About
     </t-button>
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
new file mode 100644
index 0000000..14a4b49
--- /dev/null
+++ b/src/development/Datepicker.vue
@@ -0,0 +1,32 @@
+<template>
+  <t-card header="Options">
+    <TInputGroup
+      label="Default Datepicker"
+      class="mb-4"
+    >
+      <t-datepicker />
+    </TInputGroup>
+  </t-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import TCard from '../components/TCard.vue';
+import TInputGroup from '../components/TInputGroup.vue';
+import TDatepicker from '../components/TDatepicker.vue';
+
+export default defineComponent({
+  name: 'Datepicker',
+  components: {
+    TCard,
+    TInputGroup,
+    TDatepicker,
+  },
+  data() {
+    return {
+
+    };
+  },
+
+});
+</script>
diff --git a/src/development/router.ts b/src/development/router.ts
index 88d4e6b..f1d0e8e 100644
--- a/src/development/router.ts
+++ b/src/development/router.ts
@@ -10,6 +10,7 @@ import Alert from './Alert.vue';
 import Modal from './Modal.vue';
 import Dialog from './Dialog.vue';
 import Checkbox from './Check.vue';
+import Datepicker from './Datepicker.vue';
 import Theme from './Theme.vue';
 import Attributes from './Attributes.vue';
 
@@ -25,6 +26,7 @@ const routes = [
   { path: '/theme', component: Theme },
   { path: '/attributes', component: Attributes },
   { path: '/checkbox', component: Checkbox },
+  { path: '/datepicker', component: Datepicker },
 ];
 
 const router = createRouter({

From 10335d46ee7a1a7fbcf337352d3e1be527197b09 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 22 Oct 2021 17:57:05 -0500
Subject: [PATCH 02/85] Remove rich select references

---
 src/components/TDatepicker.vue                | 30 +++++++------------
 .../TDatepicker/DatepickerClearButton.vue     |  3 +-
 src/types/components/t-datepicker.ts          | 15 ++++++++++
 src/types/index.ts                            |  1 +
 4 files changed, 28 insertions(+), 21 deletions(-)
 create mode 100644 src/types/components/t-datepicker.ts

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 4c48eb6..f3c044a 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -127,28 +127,20 @@
 import {
   defineComponent,
   PropType,
-  provide,
-  ref,
-  computed,
 } from 'vue';
+
 import {
-  InputOptions,
-  TRichSelectConfig,
-  TRichSelectClassesKeys,
-  TRichSelectClassesValidKeys,
-  NormalizedOption,
-  CSSRawClassesList,
   TDropdownPopperDefaultOptions as defaultPopperOptions,
-  isEqual,
-  throttle,
-  Measure,
-  Data,
+  TDatepickerClassesValidKeys,
+  TDatepickerConfig,
+  TDatepickerClassesKeys,
+
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
 import {
-  TRichSelectOptions, TSelectValue,
+  TDatepickerOptions, TSelectValue,
 } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
 import TDropdown, { validDropdownPlacements } from './TDropdown.vue';
@@ -156,18 +148,17 @@ import { sameWidthModifier } from '../utils/popper';
 
 // @vue/component
 export default defineComponent({
-  name: 'TRichSelect',
+  name: 'TDatepicker',
   components: {
     DatepickerDropdown,
     TDropdown,
   },
   props: {
-    ...getVariantPropsWithClassesList<TRichSelectOptions, TRichSelectClassesValidKeys>(),
+    ...getVariantPropsWithClassesList<TDatepickerOptions, TDatepickerClassesValidKeys>(),
     modelValue: {
       type: [Date, String, Number, Array] as PropType<TSelectValue>,
       default: undefined,
     },
-
     dropdownPlacement: {
       type: String as PropType<Placement>,
       default: undefined,
@@ -191,9 +182,10 @@ export default defineComponent({
     },
 
   },
+  setup() {
+    const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
-  setup(props) {
-    const { configuration, attributes } = useConfigurationWithClassesList<TRichSelectOptions>(TRichSelectConfig, TRichSelectClassesKeys);
+    // const activeDate = ref();
 
     // const { localValue, clearValue } = useVModel(props, 'modelValue');
 
diff --git a/src/components/TDatepicker/DatepickerClearButton.vue b/src/components/TDatepicker/DatepickerClearButton.vue
index 3fa044f..91bd903 100644
--- a/src/components/TDatepicker/DatepickerClearButton.vue
+++ b/src/components/TDatepicker/DatepickerClearButton.vue
@@ -1,7 +1,6 @@
 <template>
   <button
     type="button"
-    data-rich-select-focusable
     :class="className"
   >
     <slot name="clearButton">
@@ -16,7 +15,7 @@ import CloseIcon from '../../icons/CloseIcon.vue';
 import useInjectsClassesListClass from '../../use/useInjectsClassesListClass';
 
 export default defineComponent({
-  name: 'RichSelectClearButton',
+  name: 'DatepickerClearButton',
   components: {
     CloseIcon,
   },
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
new file mode 100644
index 0000000..ab293d8
--- /dev/null
+++ b/src/types/components/t-datepicker.ts
@@ -0,0 +1,15 @@
+import {
+  Data, TDatepickerClassesValidKeys, WithVariantPropsAndClassesList,
+} from '@variantjs/core';
+import { HTMLAttributes } from 'vue';
+import { Placement, Options } from '@popperjs/core';
+
+type TDatepickerSingleValue = Date | string | number;
+
+export type TDatepickerValue = TDatepickerSingleValue | Array<TDatepickerSingleValue>;
+
+export type TDatepickerOptions = WithVariantPropsAndClassesList<{
+  modelValue?: TDatepickerValue,
+  dropdownPlacement?: Placement,
+  dropdownPopperOptions?: Options,
+} & HTMLAttributes & Data, TDatepickerClassesValidKeys>;
diff --git a/src/types/index.ts b/src/types/index.ts
index dcaf186..ba77959 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -4,6 +4,7 @@ export { TTextareaValue, TTextareaOptions } from './components/t-textarea';
 export { TRadioValue, TRadioOptions } from './components/t-radio';
 export { TCheckboxValue, TCheckboxOptions } from './components/t-checkbox';
 export { TSelectValue, TSelectOptions } from './components/t-select';
+export { TDatepickerValue, TDatepickerOptions } from './components/t-datepicker';
 export { TButtonOptions } from './components/t-button';
 export { TCardOptions } from './components/t-card';
 export { TModalOptions } from './components/t-modal';

From 4496b08bc213916cf1bef8ca11393240162986f3 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 27 Oct 2021 14:13:46 -0500
Subject: [PATCH 03/85] WIP

---
 package.json                                  |  2 +-
 src/components/TDatepicker.vue                | 17 +++++-
 .../TDatepicker/DatepickerViewMonth.vue       | 30 ++++++++--
 .../TDatepicker/DatepickerViewMonthDay.vue    | 55 +++++++++++++++++--
 src/types/components/t-datepicker.ts          |  3 +-
 yarn.lock                                     |  8 +--
 6 files changed, 98 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 7a8ae11..2ac9172 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,6 @@
     }
   },
   "dependencies": {
-    "@variantjs/core": "^0.0.66"
+    "@variantjs/core": "^0.0.67"
   }
 }
diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index f3c044a..cb6f746 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -127,6 +127,8 @@
 import {
   defineComponent,
   PropType,
+  ref,
+  provide,
 } from 'vue';
 
 import {
@@ -140,7 +142,7 @@ import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
 import {
-  TDatepickerOptions, TSelectValue,
+  TDatepickerOptions, TDatepickerValue,
 } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
 import TDropdown, { validDropdownPlacements } from './TDropdown.vue';
@@ -156,9 +158,13 @@ export default defineComponent({
   props: {
     ...getVariantPropsWithClassesList<TDatepickerOptions, TDatepickerClassesValidKeys>(),
     modelValue: {
-      type: [Date, String, Number, Array] as PropType<TSelectValue>,
+      type: [Date, String, Number, Array] as PropType<TDatepickerValue>,
       default: undefined,
     },
+    weekStart: {
+      type: Number,
+      default: 0,
+    },
     dropdownPlacement: {
       type: String as PropType<Placement>,
       default: undefined,
@@ -185,10 +191,15 @@ export default defineComponent({
   setup() {
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
-    // const activeDate = ref();
+    const activeDate = ref<Date>(new Date());
+    // const selectedDate = ref<TDatepickerValue>();
 
     // const { localValue, clearValue } = useVModel(props, 'modelValue');
 
+    provide('activeDate', activeDate);
+
+    provide('configuration', configuration);
+
     return {
       configuration,
       attributes,
diff --git a/src/components/TDatepicker/DatepickerViewMonth.vue b/src/components/TDatepicker/DatepickerViewMonth.vue
index 1cf71a4..a5a4cf8 100644
--- a/src/components/TDatepicker/DatepickerViewMonth.vue
+++ b/src/components/TDatepicker/DatepickerViewMonth.vue
@@ -10,9 +10,13 @@
       <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Sat</span>
     </div>
     <div class="grid grid-cols-7">
-      <DatepickerViewMonthDay />
+      <datepicker-view-month-day
+        v-for="day in days"
+        :key="day.toTimeString()"
+        :day="day"
+      />
 
-      <span class="flex items-center flex-shrink-0 w-full h-8"><button
+      <!-- <span class="flex items-center flex-shrink-0 w-full h-8"><button
         aria-label="September 27, 2021"
         data-date="2021-09-27"
         type="button"
@@ -259,13 +263,18 @@
         type="button"
         tabindex="-1"
         class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >6</button></span>
+      >6</button></span> -->
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+
+import { visibleDaysInMonthView } from '@variantjs/core';
+import {
+  defineComponent, inject, Ref, computed,
+} from 'vue';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
 import DatepickerViewMonthDay from './DatepickerViewMonthDay.vue';
 
 export default defineComponent({
@@ -273,6 +282,19 @@ export default defineComponent({
   components: {
     DatepickerViewMonthDay,
   },
+  setup() {
+    const activeDate = inject<Ref<Date>>('activeDate')!;
+    const configuration = inject<TDatepickerOptions>('configuration')!;
+
+    // @TODO: the month is dynamic
+    const activeMonth = new Date();
+
+    // @TODO add this as a prop
+    const weekStart = 0;
 
+    const days = computed<Date[]>(() => visibleDaysInMonthView(activeDate.value, weekStart));
+
+    return { days, configuration };
+  },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index e858bec..8f86d75 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -1,22 +1,69 @@
 <template>
-  <div class="flex items-center flex-shrink-0 w-full h-8">
+  <div :class="configuration.classesList?.calendarDaysDayWrapper">
     <button
       aria-label="September 26, 2021"
       data-date="2021-09-26"
       type="button"
       tabindex="-1"
-      class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      :class="buttonClass"
     >
-      26
+      {{ day.getDate() }}
     </button>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, inject, computed } from 'vue';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
 export default defineComponent({
   name: 'DatepickerViewMonthDay',
+  props: {
+    day: {
+      type: Date,
+      required: true,
+    },
+  },
+  setup() {
+    const configuration = inject<TDatepickerOptions>('configuration')!;
 
+    const buttonClass = computed(() => {
+      if (this.isForAnotherMonth) {
+        return configuration.classesList?.otherMonthDay;
+      }
+
+      if (this.isFirstDayOfRange) {
+        return configuration.classesList?.inRangeFirstDay;
+      }
+
+      if (this.isLastDayOfRange) {
+        return configuration.classesList?.inRangeLastDay;
+      }
+
+      if (this.isInRange) {
+        return configuration.classesList?.inRangeDay;
+      }
+
+      if (this.isSelected) {
+        return configuration.classesList?.selectedDay;
+      }
+
+      if (this.isActive && this.showActiveDate) {
+        return configuration.classesList?.activeDay;
+      }
+
+      if (this.isHighlighted) {
+        return configuration.classesList?.highlightedDay;
+      }
+
+      if (this.isToday) {
+        return configuration.classesList?.today;
+      }
+
+      return configuration.classesList?.day;
+    });
+
+    return { configuration, buttonClass };
+  },
 });
 </script>
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index ab293d8..f175739 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -4,12 +4,13 @@ import {
 import { HTMLAttributes } from 'vue';
 import { Placement, Options } from '@popperjs/core';
 
-type TDatepickerSingleValue = Date | string | number;
+type TDatepickerSingleValue = Date | string | number | undefined;
 
 export type TDatepickerValue = TDatepickerSingleValue | Array<TDatepickerSingleValue>;
 
 export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   modelValue?: TDatepickerValue,
+  weekStart?: number,
   dropdownPlacement?: Placement,
   dropdownPopperOptions?: Options,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;
diff --git a/yarn.lock b/yarn.lock
index 3a99b65..242d931 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1151,10 +1151,10 @@
     "@typescript-eslint/types" "4.31.2"
     eslint-visitor-keys "^2.0.0"
 
-"@variantjs/core@^0.0.66":
-  version "0.0.66"
-  resolved "https://registry.yarnpkg.com/@variantjs/core/-/core-0.0.66.tgz#4ae95a2f33b2d2160ab8032147d7e0305989d83f"
-  integrity sha512-1ANpHnAKQ3CbVI5Mt8yYG4xPEqtOvmDYW5Qb388uHPDWu/4I/x5dpoQqGf9wrhYHVEwMu9noKDQa8/LWY7v72w==
+"@variantjs/core@^0.0.67":
+  version "0.0.67"
+  resolved "https://registry.yarnpkg.com/@variantjs/core/-/core-0.0.67.tgz#83a4aa1bb5ed064efd78b15752cf8362bcfbe14e"
+  integrity sha512-AwMAH4batS+RTYROvBgDbz2+3jwfoDVYp++D2BuZk7vY1N6pXrEwltP/gC2M32BK9VlElZJXUU1rJEbNXsgGCQ==
 
 "@vitejs/plugin-vue@^1.9.0":
   version "1.9.0"

From 6443658eb7436c6d04d495ffff8e44959ac7c017 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 27 Oct 2021 21:54:52 -0500
Subject: [PATCH 04/85] Date picker day view wip

---
 package.json                                  |   2 +-
 src/components/TDatepicker.vue                |  22 +-
 .../TDatepicker/DatepickerDropdown.vue        |  24 +-
 src/components/TDatepicker/DatepickerView.vue |   9 +-
 .../TDatepicker/DatepickerViewMonth.vue       | 270 +-----------------
 .../TDatepicker/DatepickerViewMonthDay.vue    |  90 +++++-
 src/development/Datepicker.vue                |  12 +
 src/types/components/t-datepicker.ts          |   5 +-
 yarn.lock                                     |   8 +-
 9 files changed, 160 insertions(+), 282 deletions(-)

diff --git a/package.json b/package.json
index 8ff7066..6e81da7 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,6 @@
     }
   },
   "dependencies": {
-    "@variantjs/core": "^0.0.72"
+    "@variantjs/core": "^0.0.73"
   }
 }
diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index cb6f746..0c96de9 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -136,6 +136,7 @@ import {
   TDatepickerClassesValidKeys,
   TDatepickerConfig,
   TDatepickerClassesKeys,
+  DateConditions,
 
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
@@ -165,6 +166,18 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+    monthsPerView: {
+      type: Number,
+      default: 1,
+    },
+    range: {
+      type: Boolean,
+      default: false,
+    },
+    highlightDates: {
+      type: [Date, Array, Function, String, Number] as PropType<DateConditions>,
+      default: undefined,
+    },
     dropdownPlacement: {
       type: String as PropType<Placement>,
       default: undefined,
@@ -192,12 +205,19 @@ export default defineComponent({
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
     const activeDate = ref<Date>(new Date());
-    // const selectedDate = ref<TDatepickerValue>();
+    // @TODO: Value comes from the model
+    const selectedDate = ref<Date | Date[]>(new Date());
+    // The active date is usually hidden but shown when navigating with the keyboard
+    const showActiveDate = ref<boolean>(false);
 
     // const { localValue, clearValue } = useVModel(props, 'modelValue');
 
     provide('activeDate', activeDate);
 
+    provide('showActiveDate', showActiveDate);
+
+    provide('selectedDate', selectedDate);
+
     provide('configuration', configuration);
 
     return {
diff --git a/src/components/TDatepicker/DatepickerDropdown.vue b/src/components/TDatepicker/DatepickerDropdown.vue
index 5f60a9c..9e297b3 100644
--- a/src/components/TDatepicker/DatepickerDropdown.vue
+++ b/src/components/TDatepicker/DatepickerDropdown.vue
@@ -1,19 +1,39 @@
 <template>
   <div class="inline-flex flex-col mt-1 bg-white border rounded">
     <div class="inline-flex flex-wrap ">
-      <datepicker-view />
+      <datepicker-view
+        v-for="(month) in activeMonths"
+        :key="month.toISOString"
+        :month="month"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import {
+  defineComponent, computed, inject, Ref,
+} from 'vue';
+import { addMonths } from '@variantjs/core';
 import DatepickerView from './DatepickerView.vue';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
 export default defineComponent({
   name: 'DatepickerDropdown',
   components: {
     DatepickerView,
   },
+  setup() {
+    const configuration = inject<TDatepickerOptions>('configuration')!;
+    const monthsPerView = configuration.monthsPerView!;
+
+    const activeDate = inject<Ref<Date>>('activeDate')!;
+
+    const activeMonths = computed<Date[]>(() => Array
+      .from({ length: monthsPerView }, (_x, i) => i)
+      .map((i) => addMonths(activeDate.value, i)));
+
+    return { activeMonths };
+  },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerView.vue b/src/components/TDatepicker/DatepickerView.vue
index 7a96008..9175f4a 100644
--- a/src/components/TDatepicker/DatepickerView.vue
+++ b/src/components/TDatepicker/DatepickerView.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="w-64">
     <datepicker-view-controls />
-    <datepicker-view-month />
+
+    <datepicker-view-month :month="month" />
   </div>
 </template>
 
@@ -16,5 +17,11 @@ export default defineComponent({
     DatepickerViewControls,
     DatepickerViewMonth,
   },
+  props: {
+    month: {
+      type: Date,
+      required: true,
+    },
+  },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewMonth.vue b/src/components/TDatepicker/DatepickerViewMonth.vue
index a5a4cf8..f1887c2 100644
--- a/src/components/TDatepicker/DatepickerViewMonth.vue
+++ b/src/components/TDatepicker/DatepickerViewMonth.vue
@@ -12,258 +12,10 @@
     <div class="grid grid-cols-7">
       <datepicker-view-month-day
         v-for="day in days"
-        :key="day.toTimeString()"
+        :key="day.toISOString()"
+        :month="month"
         :day="day"
       />
-
-      <!-- <span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="September 27, 2021"
-        data-date="2021-09-27"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >27</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="September 28, 2021"
-        data-date="2021-09-28"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >28</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="September 29, 2021"
-        data-date="2021-09-29"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >29</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="September 30, 2021"
-        data-date="2021-09-30"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >30</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 1, 2021"
-        data-date="2021-10-01"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >1</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 2, 2021"
-        data-date="2021-10-02"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >2</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 3, 2021"
-        data-date="2021-10-03"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >3</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 4, 2021"
-        data-date="2021-10-04"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >4</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 5, 2021"
-        data-date="2021-10-05"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >5</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 6, 2021"
-        data-date="2021-10-06"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >6</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 7, 2021"
-        data-date="2021-10-07"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >7</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 8, 2021"
-        data-date="2021-10-08"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >8</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 9, 2021"
-        data-date="2021-10-09"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >9</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 10, 2021"
-        data-date="2021-10-10"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >10</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 11, 2021"
-        data-date="2021-10-11"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >11</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 12, 2021"
-        data-date="2021-10-12"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >12</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 13, 2021"
-        data-date="2021-10-13"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >13</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 14, 2021"
-        data-date="2021-10-14"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >14</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 15, 2021"
-        data-date="2021-10-15"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm text-white bg-blue-500 rounded-full disabled:opacity-50 disabled:cursor-not-allowed"
-      >15</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 16, 2021"
-        data-date="2021-10-16"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >16</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 17, 2021"
-        data-date="2021-10-17"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >17</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 18, 2021"
-        data-date="2021-10-18"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >18</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 19, 2021"
-        data-date="2021-10-19"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >19</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 20, 2021"
-        data-date="2021-10-20"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >20</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 21, 2021"
-        data-date="2021-10-21"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >21</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 22, 2021"
-        aria-current="date"
-        data-date="2021-10-22"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm border border-blue-500 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >22</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 23, 2021"
-        data-date="2021-10-23"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >23</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 24, 2021"
-        data-date="2021-10-24"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >24</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 25, 2021"
-        data-date="2021-10-25"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >25</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 26, 2021"
-        data-date="2021-10-26"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >26</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 27, 2021"
-        data-date="2021-10-27"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >27</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 28, 2021"
-        data-date="2021-10-28"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >28</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 29, 2021"
-        data-date="2021-10-29"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >29</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 30, 2021"
-        data-date="2021-10-30"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >30</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="October 31, 2021"
-        data-date="2021-10-31"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >31</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="November 1, 2021"
-        data-date="2021-11-01"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >1</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="November 2, 2021"
-        data-date="2021-11-02"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >2</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="November 3, 2021"
-        data-date="2021-11-03"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >3</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="November 4, 2021"
-        data-date="2021-11-04"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >4</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="November 5, 2021"
-        data-date="2021-11-05"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >5</button></span><span class="flex items-center flex-shrink-0 w-full h-8"><button
-        aria-label="November 6, 2021"
-        data-date="2021-11-06"
-        type="button"
-        tabindex="-1"
-        class="w-8 h-8 mx-auto text-sm text-gray-400 rounded-full hover:bg-blue-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      >6</button></span> -->
     </div>
   </div>
 </template>
@@ -271,6 +23,7 @@
 <script lang="ts">
 
 import { visibleDaysInMonthView } from '@variantjs/core';
+import { config } from '@vue/test-utils';
 import {
   defineComponent, inject, Ref, computed,
 } from 'vue';
@@ -282,17 +35,18 @@ export default defineComponent({
   components: {
     DatepickerViewMonthDay,
   },
-  setup() {
-    const activeDate = inject<Ref<Date>>('activeDate')!;
+  props: {
+    month: {
+      type: Date,
+      required: true,
+    },
+  },
+  setup(props) {
     const configuration = inject<TDatepickerOptions>('configuration')!;
 
-    // @TODO: the month is dynamic
-    const activeMonth = new Date();
-
-    // @TODO add this as a prop
-    const weekStart = 0;
+    const weekStart = configuration.weekStart!;
 
-    const days = computed<Date[]>(() => visibleDaysInMonthView(activeDate.value, weekStart));
+    const days = computed<Date[]>(() => visibleDaysInMonthView(props.month, weekStart));
 
     return { days, configuration };
   },
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index 8f86d75..9bda8a9 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -13,7 +13,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, computed } from 'vue';
+import { dateIsPartOfTheRange, isSameDay } from '@variantjs/core';
+import {
+  defineComponent, inject, computed, Ref,
+} from 'vue';
 import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
 export default defineComponent({
@@ -23,42 +26,101 @@ export default defineComponent({
       type: Date,
       required: true,
     },
+    month: {
+      type: Date,
+      required: true,
+    },
   },
-  setup() {
+  setup(props) {
     const configuration = inject<TDatepickerOptions>('configuration')!;
+    const showActiveDate = inject<Ref<boolean>>('showActiveDate')!;
+    const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
+    const activeDate = inject<Ref<Date>>('activeDate')!;
+
+    const isForAnotherMonth = computed(() => props.day.getFullYear() !== props.month.getFullYear()
+        || props.day.getMonth() !== props.month.getMonth());
+
+    const isFirstDayOfRange = computed<boolean>(() => {
+      if (!configuration.range! || !Array.isArray(selectedDate.value)) {
+        return false;
+      }
+      const [from] = selectedDate.value;
+      return from && isSameDay(from, props.day);
+    });
+
+    const isLastDayOfRange = computed<boolean>(() => {
+      if (!configuration.range! || !Array.isArray(selectedDate.value)) {
+        return false;
+      }
+      const [, to] = selectedDate.value;
+      return to && isSameDay(to, props.day);
+    });
+
+    const isInRange = computed<boolean>(() => {
+      if (!configuration.range! || !Array.isArray(selectedDate.value)) {
+        return false;
+      }
+      const [from, to] = selectedDate.value;
+      return from && to && dateIsPartOfTheRange(props.day, from, to);
+    });
+
+    const isSelected = computed<boolean>(() => {
+      if (Array.isArray(selectedDate.value)) {
+        return selectedDate.value.some((date) => isSameDay(date, props.day));
+      }
+
+      return isSameDay(selectedDate.value, props.day);
+    });
+    // const isHighlighted = computed<boolean>(() => {
+    //   if (Array.isArray(selectedDate.value)) {
+    //     return selectedDate.value.some((date) => isSameDay(date, props.day));
+    //   }
+
+    //   return isSameDay(selectedDate.value, props.day);
+    // });
+
+    // isHighlighted(): boolean {
+    //   const day = this.getDay();
+    //   const highlightDates: DateConditions = this.highlightDates as DateConditions;
+    //   const dateParser: DateParser = this.parse as DateParser;
+
+    //   return dayIsPartOfTheConditions(day, highlightDates, dateParser, this.dateFormat);
+    // },
+
+    const isActive = computed<boolean>(() => isSameDay(activeDate.value, props.day));
 
     const buttonClass = computed(() => {
-      if (this.isForAnotherMonth) {
+      if (isForAnotherMonth.value) {
         return configuration.classesList?.otherMonthDay;
       }
 
-      if (this.isFirstDayOfRange) {
+      if (isFirstDayOfRange.value) {
         return configuration.classesList?.inRangeFirstDay;
       }
 
-      if (this.isLastDayOfRange) {
+      if (isLastDayOfRange.value) {
         return configuration.classesList?.inRangeLastDay;
       }
 
-      if (this.isInRange) {
+      if (isInRange.value) {
         return configuration.classesList?.inRangeDay;
       }
 
-      if (this.isSelected) {
+      if (isSelected.value) {
         return configuration.classesList?.selectedDay;
       }
 
-      if (this.isActive && this.showActiveDate) {
+      if (isActive.value && showActiveDate.value) {
         return configuration.classesList?.activeDay;
       }
 
-      if (this.isHighlighted) {
-        return configuration.classesList?.highlightedDay;
-      }
+      // if (this.isHighlighted) {
+      //   return configuration.classesList?.highlightedDay;
+      // }
 
-      if (this.isToday) {
-        return configuration.classesList?.today;
-      }
+      // if (this.isToday) {
+      //   return configuration.classesList?.today;
+      // }
 
       return configuration.classesList?.day;
     });
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 14a4b49..806c89a 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -6,6 +6,18 @@
     >
       <t-datepicker />
     </TInputGroup>
+    <!-- <TInputGroup
+      label="Range"
+      class="mb-4"
+    >
+      <t-datepicker
+        range
+        :model-value="[
+          new Date(2020, 11, 11),
+          new Date(2020, 11, 15),
+        ]"
+      />
+    </TInputGroup> -->
   </t-card>
 </template>
 
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index f175739..ada9483 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -1,5 +1,5 @@
 import {
-  Data, TDatepickerClassesValidKeys, WithVariantPropsAndClassesList,
+  Data, DateConditions, TDatepickerClassesValidKeys, WithVariantPropsAndClassesList,
 } from '@variantjs/core';
 import { HTMLAttributes } from 'vue';
 import { Placement, Options } from '@popperjs/core';
@@ -13,4 +13,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   weekStart?: number,
   dropdownPlacement?: Placement,
   dropdownPopperOptions?: Options,
+  monthsPerView?: number,
+  range?: boolean,
+  highlightDates: DateConditions,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;
diff --git a/yarn.lock b/yarn.lock
index 4e36dd4..3bdadbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1151,10 +1151,10 @@
     "@typescript-eslint/types" "4.31.2"
     eslint-visitor-keys "^2.0.0"
 
-"@variantjs/core@^0.0.72":
-  version "0.0.72"
-  resolved "https://registry.yarnpkg.com/@variantjs/core/-/core-0.0.72.tgz#abb485859946f6ee6100982c1b254521cb38ec83"
-  integrity sha512-cFR3gIw68T2o9A6RRITpLL/YO+vWdGjW7sErw8SNgb3kDn4QVvhsbGn+G3F4UILkVbWJ3wCVq9sVrjvP9Ug5gQ==
+"@variantjs/core@^0.0.73":
+  version "0.0.73"
+  resolved "https://registry.yarnpkg.com/@variantjs/core/-/core-0.0.73.tgz#ee4ee046490cf180ed96a19ed32c9283342ade75"
+  integrity sha512-fA0snogYoUGCH6J7scL7Toi7QiPYXdcodYLJXEpIBwmI+z8mqWOgSnIYyphQ1xiG0OE+f416GZMdx68RX6C6Ug==
 
 "@vitejs/plugin-vue@^1.9.0":
   version "1.9.0"

From bfb9d2c84dc836dfe682a52360fd4b52e875107d Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 28 Oct 2021 18:24:39 -0500
Subject: [PATCH 05/85] Date parser and formatter provide

---
 package.json                         |  2 +-
 src/components/TDatepicker.vue       | 27 ++++++++++++++++++++++++++-
 src/types/components/t-datepicker.ts |  7 +++++--
 yarn.lock                            |  8 ++++----
 4 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 6e81da7..780ef01 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,6 @@
     }
   },
   "dependencies": {
-    "@variantjs/core": "^0.0.73"
+    "@variantjs/core": "^0.0.75"
   }
 }
diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 0c96de9..c1df671 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -129,6 +129,7 @@ import {
   PropType,
   ref,
   provide,
+  computed,
 } from 'vue';
 
 import {
@@ -137,7 +138,12 @@ import {
   TDatepickerConfig,
   TDatepickerClassesKeys,
   DateConditions,
-
+  DateFormatter,
+  DateParser,
+  buildDateParser,
+  DateLocale,
+  buildDateFormatter,
+  dateEnglishLocale,
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
@@ -183,6 +189,18 @@ export default defineComponent({
       default: undefined,
       validator: (value: string):boolean => validDropdownPlacements.includes(value),
     },
+    dateFormatter: {
+      type: Function as PropType<DateFormatter>,
+      default: undefined,
+    },
+    dateParser: {
+      type: Function as PropType<DateParser>,
+      default: undefined,
+    },
+    locale: {
+      type: Object as PropType<DateLocale>,
+      default: undefined,
+    },
     dropdownPopperOptions: {
       type: Object as PropType<Options>,
       default: (): Options => ({
@@ -204,6 +222,9 @@ export default defineComponent({
   setup() {
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
+    const dateParser = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
+    const dateFormatter = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
+
     const activeDate = ref<Date>(new Date());
     // @TODO: Value comes from the model
     const selectedDate = ref<Date | Date[]>(new Date());
@@ -220,6 +241,10 @@ export default defineComponent({
 
     provide('configuration', configuration);
 
+    provide('dateParser', dateParser);
+
+    provide('dateFormatter', dateFormatter);
+
     return {
       configuration,
       attributes,
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index ada9483..14d642a 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -1,5 +1,5 @@
 import {
-  Data, DateConditions, TDatepickerClassesValidKeys, WithVariantPropsAndClassesList,
+  Data, DateConditions, DateFormatter, DateLocale, DateParser, TDatepickerClassesValidKeys, WithVariantPropsAndClassesList,
 } from '@variantjs/core';
 import { HTMLAttributes } from 'vue';
 import { Placement, Options } from '@popperjs/core';
@@ -15,5 +15,8 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   dropdownPopperOptions?: Options,
   monthsPerView?: number,
   range?: boolean,
-  highlightDates: DateConditions,
+  highlightDates?: DateConditions,
+  dateParser?: DateParser,
+  dateFormatter?: DateFormatter,
+  locale?: DateLocale,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;
diff --git a/yarn.lock b/yarn.lock
index 3bdadbf..c52dda4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1151,10 +1151,10 @@
     "@typescript-eslint/types" "4.31.2"
     eslint-visitor-keys "^2.0.0"
 
-"@variantjs/core@^0.0.73":
-  version "0.0.73"
-  resolved "https://registry.yarnpkg.com/@variantjs/core/-/core-0.0.73.tgz#ee4ee046490cf180ed96a19ed32c9283342ade75"
-  integrity sha512-fA0snogYoUGCH6J7scL7Toi7QiPYXdcodYLJXEpIBwmI+z8mqWOgSnIYyphQ1xiG0OE+f416GZMdx68RX6C6Ug==
+"@variantjs/core@^0.0.75":
+  version "0.0.75"
+  resolved "https://registry.yarnpkg.com/@variantjs/core/-/core-0.0.75.tgz#fb650c63fd351a780b0ab03365b4a3a6dc46e3a2"
+  integrity sha512-8Yj9H9Nj+gE4dl6CgmeHAdQ9XJjHeNyUj43GtAGUeUS/ONdsBJ3TNCw2Cpq8Ruz6u0HynDnAeqyg5vqQGpQxMg==
 
 "@vitejs/plugin-vue@^1.9.0":
   version "1.9.0"

From c20c9a7cade356973bbbc766d77bc511763dd6a0 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 28 Oct 2021 18:29:50 -0500
Subject: [PATCH 06/85] All the conditions related to the day format

---
 src/components/TDatepicker.vue                |  8 +++++
 .../TDatepicker/DatepickerViewMonthDay.vue    | 36 +++++++++----------
 src/types/components/t-datepicker.ts          |  2 ++
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index c1df671..f8183f5 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -168,6 +168,14 @@ export default defineComponent({
       type: [Date, String, Number, Array] as PropType<TDatepickerValue>,
       default: undefined,
     },
+    dateFormat: {
+      type: String,
+      default: 'Y-m-d',
+    },
+    userFormat: {
+      type: String,
+      default: 'F j, Y',
+    },
     weekStart: {
       type: Number,
       default: 0,
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index 9bda8a9..412ee88 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -13,7 +13,9 @@
 </template>
 
 <script lang="ts">
-import { dateIsPartOfTheRange, isSameDay } from '@variantjs/core';
+import {
+  dateIsPartOfTheRange, DateParser, dayIsPartOfTheConditions, isSameDay,
+} from '@variantjs/core';
 import {
   defineComponent, inject, computed, Ref,
 } from 'vue';
@@ -36,6 +38,7 @@ export default defineComponent({
     const showActiveDate = inject<Ref<boolean>>('showActiveDate')!;
     const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
     const activeDate = inject<Ref<Date>>('activeDate')!;
+    const dateParser = inject<Ref<DateParser>>('dateParser')!;
 
     const isForAnotherMonth = computed(() => props.day.getFullYear() !== props.month.getFullYear()
         || props.day.getMonth() !== props.month.getMonth());
@@ -71,21 +74,16 @@ export default defineComponent({
 
       return isSameDay(selectedDate.value, props.day);
     });
-    // const isHighlighted = computed<boolean>(() => {
-    //   if (Array.isArray(selectedDate.value)) {
-    //     return selectedDate.value.some((date) => isSameDay(date, props.day));
-    //   }
 
-    //   return isSameDay(selectedDate.value, props.day);
-    // });
+    const isHighlighted = computed<boolean>(() => {
+      if (configuration.highlightDates === undefined) {
+        return false;
+      }
 
-    // isHighlighted(): boolean {
-    //   const day = this.getDay();
-    //   const highlightDates: DateConditions = this.highlightDates as DateConditions;
-    //   const dateParser: DateParser = this.parse as DateParser;
+      return dayIsPartOfTheConditions(props.day, configuration.highlightDates, dateParser.value, configuration.dateFormat);
+    });
 
-    //   return dayIsPartOfTheConditions(day, highlightDates, dateParser, this.dateFormat);
-    // },
+    const isToday = computed<boolean>(() => isSameDay(props.day, new Date()));
 
     const isActive = computed<boolean>(() => isSameDay(activeDate.value, props.day));
 
@@ -114,13 +112,13 @@ export default defineComponent({
         return configuration.classesList?.activeDay;
       }
 
-      // if (this.isHighlighted) {
-      //   return configuration.classesList?.highlightedDay;
-      // }
+      if (isHighlighted.value) {
+        return configuration.classesList?.highlightedDay;
+      }
 
-      // if (this.isToday) {
-      //   return configuration.classesList?.today;
-      // }
+      if (isToday.value) {
+        return configuration.classesList?.today;
+      }
 
       return configuration.classesList?.day;
     });
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index 14d642a..bdd1f08 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -10,6 +10,8 @@ export type TDatepickerValue = TDatepickerSingleValue | Array<TDatepickerSingleV
 
 export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   modelValue?: TDatepickerValue,
+  dateFormat?: string,
+  userFormat?: string,
   weekStart?: number,
   dropdownPlacement?: Placement,
   dropdownPopperOptions?: Options,

From 87ee6534fb306c77c9e60f734fe364f3a9025baa Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 28 Oct 2021 19:50:37 -0500
Subject: [PATCH 07/85] date model initialization

---
 package.json                                  |  2 +-
 src/components/TDatepicker.vue                | 34 +++++++++++++++----
 .../TDatepicker/DatepickerViewMonthDay.vue    | 10 ++----
 src/development/Datepicker.vue                |  8 ++---
 src/types/components/t-datepicker.ts          |  5 +--
 yarn.lock                                     |  8 ++---
 6 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 780ef01..841a807 100644
--- a/package.json
+++ b/package.json
@@ -93,6 +93,6 @@
     }
   },
   "dependencies": {
-    "@variantjs/core": "^0.0.75"
+    "@variantjs/core": "^0.0.77"
   }
 }
diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index f8183f5..d5ebe9b 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -184,6 +184,10 @@ export default defineComponent({
       type: Number,
       default: 1,
     },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
     range: {
       type: Boolean,
       default: false,
@@ -227,15 +231,31 @@ export default defineComponent({
     },
 
   },
-  setup() {
+  setup(props) {
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
-    const dateParser = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
-    const dateFormatter = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
+    const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
+
+    const formatDate = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
+
+    const getInitialSelectedDate = (): Date | Date[] | undefined => {
+      let initialDate: Date | undefined | Date[] = configuration.multiple || configuration.range ? [] : undefined;
+
+      if (Array.isArray(props.modelValue)) {
+        initialDate = (props.modelValue)
+          .map((value) => parseDate.value(value, configuration.dateFormat))
+          .filter((value) => value !== undefined) as Date[];
+      } else {
+        initialDate = parseDate.value(props.modelValue, configuration.dateFormat) || initialDate;
+      }
+
+      return initialDate;
+    };
 
-    const activeDate = ref<Date>(new Date());
     // @TODO: Value comes from the model
-    const selectedDate = ref<Date | Date[]>(new Date());
+    const selectedDate = ref<Date | Date[] | undefined>(getInitialSelectedDate());
+
+    const activeDate = ref<Date>(new Date());
     // The active date is usually hidden but shown when navigating with the keyboard
     const showActiveDate = ref<boolean>(false);
 
@@ -249,9 +269,9 @@ export default defineComponent({
 
     provide('configuration', configuration);
 
-    provide('dateParser', dateParser);
+    provide('parseDate', parseDate);
 
-    provide('dateFormatter', dateFormatter);
+    provide('formatDate', formatDate);
 
     return {
       configuration,
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index 412ee88..1fe2b43 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -38,7 +38,7 @@ export default defineComponent({
     const showActiveDate = inject<Ref<boolean>>('showActiveDate')!;
     const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
     const activeDate = inject<Ref<Date>>('activeDate')!;
-    const dateParser = inject<Ref<DateParser>>('dateParser')!;
+    const parseDate = inject<Ref<DateParser>>('parseDate')!;
 
     const isForAnotherMonth = computed(() => props.day.getFullYear() !== props.month.getFullYear()
         || props.day.getMonth() !== props.month.getMonth());
@@ -75,13 +75,7 @@ export default defineComponent({
       return isSameDay(selectedDate.value, props.day);
     });
 
-    const isHighlighted = computed<boolean>(() => {
-      if (configuration.highlightDates === undefined) {
-        return false;
-      }
-
-      return dayIsPartOfTheConditions(props.day, configuration.highlightDates, dateParser.value, configuration.dateFormat);
-    });
+    const isHighlighted = computed<boolean>(() => dayIsPartOfTheConditions(props.day, configuration.highlightDates, parseDate.value, configuration.dateFormat));
 
     const isToday = computed<boolean>(() => isSameDay(props.day, new Date()));
 
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 806c89a..a217321 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -6,18 +6,18 @@
     >
       <t-datepicker />
     </TInputGroup>
-    <!-- <TInputGroup
+    <TInputGroup
       label="Range"
       class="mb-4"
     >
       <t-datepicker
         range
         :model-value="[
-          new Date(2020, 11, 11),
-          new Date(2020, 11, 15),
+          new Date(2021, 9, 11),
+          new Date(2021, 9, 15),
         ]"
       />
-    </TInputGroup> -->
+    </TInputGroup>
   </t-card>
 </template>
 
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index bdd1f08..9266094 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -1,10 +1,10 @@
 import {
-  Data, DateConditions, DateFormatter, DateLocale, DateParser, TDatepickerClassesValidKeys, WithVariantPropsAndClassesList,
+  Data, DateConditions, DateFormatter, DateLocale, DateParser, DateValue, TDatepickerClassesValidKeys, WithVariantPropsAndClassesList,
 } from '@variantjs/core';
 import { HTMLAttributes } from 'vue';
 import { Placement, Options } from '@popperjs/core';
 
-type TDatepickerSingleValue = Date | string | number | undefined;
+type TDatepickerSingleValue = DateValue | undefined | null;
 
 export type TDatepickerValue = TDatepickerSingleValue | Array<TDatepickerSingleValue>;
 
@@ -16,6 +16,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   dropdownPlacement?: Placement,
   dropdownPopperOptions?: Options,
   monthsPerView?: number,
+  multiple?: boolean,
   range?: boolean,
   highlightDates?: DateConditions,
   dateParser?: DateParser,
diff --git a/yarn.lock b/yarn.lock
index c52dda4..1ecad02 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1151,10 +1151,10 @@
     "@typescript-eslint/types" "4.31.2"
     eslint-visitor-keys "^2.0.0"
 
-"@variantjs/core@^0.0.75":
-  version "0.0.75"
-  resolved "https://registry.yarnpkg.com/@variantjs/core/-/core-0.0.75.tgz#fb650c63fd351a780b0ab03365b4a3a6dc46e3a2"
-  integrity sha512-8Yj9H9Nj+gE4dl6CgmeHAdQ9XJjHeNyUj43GtAGUeUS/ONdsBJ3TNCw2Cpq8Ruz6u0HynDnAeqyg5vqQGpQxMg==
+"@variantjs/core@^0.0.77":
+  version "0.0.77"
+  resolved "https://registry.yarnpkg.com/@variantjs/core/-/core-0.0.77.tgz#19edea3bcbe46073f1b00a8d1856513c1be5b7db"
+  integrity sha512-MR1Jh+CIClA/bLxLiQU9bu0q8BtfWHprmiJped1QAHyWTBtlV9G3/5GFDVSarM6YsEGNrZUCh1K4/0GK9IuUDw==
 
 "@vitejs/plugin-vue@^1.9.0":
   version "1.9.0"

From 6acae717672f16e58838ef6f1d522e423b07fda6 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 28 Oct 2021 20:00:48 -0500
Subject: [PATCH 08/85] Initial active date

---
 src/components/TDatepicker.vue       | 53 +++++++++++++++++++++++-----
 src/types/components/t-datepicker.ts |  5 ++-
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index d5ebe9b..868a84e 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -144,6 +144,7 @@ import {
   DateLocale,
   buildDateFormatter,
   dateEnglishLocale,
+  DateValue,
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
@@ -154,6 +155,7 @@ import {
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
 import TDropdown, { validDropdownPlacements } from './TDropdown.vue';
 import { sameWidthModifier } from '../utils/popper';
+import { TDatepickerSingleValue } from '../types/components/t-datepicker';
 
 // @vue/component
 export default defineComponent({
@@ -168,6 +170,14 @@ export default defineComponent({
       type: [Date, String, Number, Array] as PropType<TDatepickerValue>,
       default: undefined,
     },
+    initialDate: {
+      type: [Date, String, Number, Array] as PropType<TDatepickerValue>,
+      default: undefined,
+    },
+    initialTime: {
+      type: [Date, String, Number, Array] as PropType<TDatepickerSingleValue>,
+      default: undefined,
+    },
     dateFormat: {
       type: String,
       default: 'Y-m-d',
@@ -180,6 +190,10 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+    amPm: {
+      type: Boolean,
+      default: false,
+    },
     monthsPerView: {
       type: Number,
       default: 1,
@@ -239,28 +253,51 @@ export default defineComponent({
     const formatDate = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
 
     const getInitialSelectedDate = (): Date | Date[] | undefined => {
-      let initialDate: Date | undefined | Date[] = configuration.multiple || configuration.range ? [] : undefined;
+      let selectedDate: Date | undefined | Date[] = configuration.multiple || configuration.range ? [] : undefined;
 
       if (Array.isArray(props.modelValue)) {
-        initialDate = (props.modelValue)
+        selectedDate = (props.modelValue)
           .map((value) => parseDate.value(value, configuration.dateFormat))
           .filter((value) => value !== undefined) as Date[];
       } else {
-        initialDate = parseDate.value(props.modelValue, configuration.dateFormat) || initialDate;
+        selectedDate = parseDate.value(props.modelValue, configuration.dateFormat) || selectedDate;
+      }
+
+      return selectedDate;
+    };
+
+    const getInitialActiveDate = (selectedDate: Date | Date[] | undefined): Date => {
+      let activeDate: Date = new Date();
+      if (Array.isArray(selectedDate)) {
+        if (selectedDate.length > 0) {
+          activeDate = selectedDate[selectedDate.length - 1];
+        }
+      } else if (selectedDate instanceof Date) {
+        activeDate = selectedDate;
+      } else {
+        activeDate = parseDate.value(selectedDate, configuration.dateFormat) || new Date();
       }
 
-      return initialDate;
+      if (configuration.initialTime) {
+        const parsedDateWithTime = parseDate.value(configuration.initialTime, configuration.amPm ? 'G:i:S K' : 'H:i:S');
+
+        if (parsedDateWithTime) {
+          activeDate.setHours(parsedDateWithTime.getHours());
+          activeDate.setMinutes(parsedDateWithTime.getMinutes());
+          activeDate.setSeconds(parsedDateWithTime.getSeconds());
+        }
+      }
+
+      return activeDate;
     };
 
-    // @TODO: Value comes from the model
     const selectedDate = ref<Date | Date[] | undefined>(getInitialSelectedDate());
 
-    const activeDate = ref<Date>(new Date());
+    const activeDate = ref<Date>(getInitialActiveDate(selectedDate.value));
+
     // The active date is usually hidden but shown when navigating with the keyboard
     const showActiveDate = ref<boolean>(false);
 
-    // const { localValue, clearValue } = useVModel(props, 'modelValue');
-
     provide('activeDate', activeDate);
 
     provide('showActiveDate', showActiveDate);
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index 9266094..8af7758 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -4,12 +4,15 @@ import {
 import { HTMLAttributes } from 'vue';
 import { Placement, Options } from '@popperjs/core';
 
-type TDatepickerSingleValue = DateValue | undefined | null;
+export type TDatepickerSingleValue = DateValue | undefined | null;
 
 export type TDatepickerValue = TDatepickerSingleValue | Array<TDatepickerSingleValue>;
 
 export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   modelValue?: TDatepickerValue,
+  initialDate?: TDatepickerValue,
+  initialTime?: TDatepickerSingleValue,
+  amPm?: boolean,
   dateFormat?: string,
   userFormat?: string,
   weekStart?: number,

From 2ed2e9bb75add81343158e79b921cc03fbf9f165 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 28 Oct 2021 20:03:45 -0500
Subject: [PATCH 09/85] Update DatepickerViewMonthDay.vue

---
 src/components/TDatepicker/DatepickerViewMonthDay.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index 1fe2b43..61718ea 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -75,7 +75,12 @@ export default defineComponent({
       return isSameDay(selectedDate.value, props.day);
     });
 
-    const isHighlighted = computed<boolean>(() => dayIsPartOfTheConditions(props.day, configuration.highlightDates, parseDate.value, configuration.dateFormat));
+    const isHighlighted = computed<boolean>(() => dayIsPartOfTheConditions(
+      props.day,
+      configuration.highlightDates,
+      parseDate.value,
+      configuration.dateFormat,
+    ));
 
     const isToday = computed<boolean>(() => isSameDay(props.day, new Date()));
 

From 8f5859b904bdeb08cc5b91c28d4051d7dfcf52a1 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Mon, 27 Dec 2021 13:21:37 -0600
Subject: [PATCH 10/85] Update tailwind.config.js

---
 tailwind.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tailwind.config.js b/tailwind.config.js
index ef30e95..69d869f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   content: [
+    './src/components/**/*.vue',
     './src/development/**/*.{html,js,vue,ts}',
     './node_modules/@variantjs/core/src/config/**/*.ts'
   ],

From 63d3960c2d80c134de9b9871b4711d513b187a3a Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 4 Feb 2022 13:55:10 -0600
Subject: [PATCH 11/85] Select day WIP

---
 package.json                                  |    2 +-
 src/components/TDatepicker.vue                |   57 +-
 .../TDatepicker/DatepickerViewMonthDay.vue    |   10 +-
 src/development/Datepicker.vue                |   13 +-
 yarn.lock                                     | 4084 +++++++----------
 5 files changed, 1837 insertions(+), 2329 deletions(-)

diff --git a/package.json b/package.json
index ab629ac..9ecce32 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,6 @@
     }
   },
   "dependencies": {
-    "@variantjs/core": "^0.0.79"
+    "@variantjs/core": "^0.0.80"
   }
 }
diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 868a84e..395bd30 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -19,9 +19,9 @@
       :fixed-classes="undefined"
       :popper-options="configuration.dropdownPopperOptions"
       :placement="configuration.dropdownPlacement"
-      show
       tag-name="input"
       type="text"
+      class="border border-gray-300"
     >
       <datepicker-dropdown />
       <!-- :classes="dropdownClasses"
@@ -145,6 +145,8 @@ import {
   buildDateFormatter,
   dateEnglishLocale,
   DateValue,
+  isSameDay,
+  diffInDays,
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
@@ -246,6 +248,11 @@ export default defineComponent({
 
   },
   setup(props) {
+    // @TODOS:
+    // - Reinitialize the range after the dropdown is closed
+    // - Range and multiple: Consider selected dates outside of the view
+    // - Disabled dates shouldn't be selectable and needs his own styling (`DatepickerViewMonthDay`)
+    
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
     const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
@@ -268,6 +275,7 @@ export default defineComponent({
 
     const getInitialActiveDate = (selectedDate: Date | Date[] | undefined): Date => {
       let activeDate: Date = new Date();
+
       if (Array.isArray(selectedDate)) {
         if (selectedDate.length > 0) {
           activeDate = selectedDate[selectedDate.length - 1];
@@ -298,6 +306,51 @@ export default defineComponent({
     // The active date is usually hidden but shown when navigating with the keyboard
     const showActiveDate = ref<boolean>(false);
 
+    const selectDay = (day: Date) => {
+      // If we are using multiple or range means that the day consists of an array
+      // of dates
+      if (configuration.multiple || configuration.range) {
+        // If not array or is empty initialize it with with the selected date
+        if (!Array.isArray(selectedDate.value) || selectedDate.value.length === 0) {
+          selectedDate.value = [day];
+          return;
+        }
+
+        // The ranges consists in a tuple of dates, we should fill the first 
+        // or the second element depending of the current state of the selection
+        if (configuration.range) {
+          // If the new day is before than the first element of the range we need
+          // to reinitialize the range
+          if (diffInDays(selectedDate.value[0], day) < 0) {
+            selectedDate.value = [day];
+            return;
+          }
+
+          // If the range is already full we are going to replace the second date
+          if (selectedDate.value.length === 2) {
+            selectedDate.value[1] = day;
+            return;
+          }
+            
+          // Otherwise just add the new day to the range
+          selectedDate.value.push(day);
+          return;
+        }
+
+        if (configuration.multiple) {
+          if (selectedDate.value.includes(day)) {
+            selectedDate.value = selectedDate.value.filter((date) => ! isSameDay(date, day));
+            return;
+          }
+
+          selectedDate.value.push(day);
+          return;
+        }
+      }
+
+      selectedDate.value = day;
+    };
+
     provide('activeDate', activeDate);
 
     provide('showActiveDate', showActiveDate);
@@ -309,6 +362,8 @@ export default defineComponent({
     provide('parseDate', parseDate);
 
     provide('formatDate', formatDate);
+    
+    provide('selectDay', selectDay);
 
     return {
       configuration,
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index 61718ea..ab61aed 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -6,6 +6,7 @@
       type="button"
       tabindex="-1"
       :class="buttonClass"
+      @click="daySelectedHandler"
     >
       {{ day.getDate() }}
     </button>
@@ -39,6 +40,8 @@ export default defineComponent({
     const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
     const activeDate = inject<Ref<Date>>('activeDate')!;
     const parseDate = inject<Ref<DateParser>>('parseDate')!;
+    // @TODO: Fix class
+    const selectDay = inject<(day: Date) => void>('selectDay')!;
 
     const isForAnotherMonth = computed(() => props.day.getFullYear() !== props.month.getFullYear()
         || props.day.getMonth() !== props.month.getMonth());
@@ -122,7 +125,12 @@ export default defineComponent({
       return configuration.classesList?.day;
     });
 
-    return { configuration, buttonClass };
+    const daySelectedHandler = ()  => {
+      // @TODO: Consider disabled days      
+      selectDay(props.day);
+    };
+
+    return { configuration, buttonClass, daySelectedHandler };
   },
 });
 </script>
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index a217321..e2782ef 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -12,10 +12,15 @@
     >
       <t-datepicker
         range
-        :model-value="[
-          new Date(2021, 9, 11),
-          new Date(2021, 9, 15),
-        ]"
+      />
+    </TInputGroup>
+
+    <TInputGroup
+      label="Multiple"
+      class="mb-4"
+    >
+      <t-datepicker
+        multiple
       />
     </TInputGroup>
   </t-card>
diff --git a/yarn.lock b/yarn.lock
index 1ecad02..16d8ffb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,12 +2,13 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@7.12.11":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
-  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
+"@ampproject/remapping@^2.0.0":
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.0.2.tgz#f3d9760bf30588c51408dbe7c05ff2bb13069307"
+  integrity sha512-sE8Gx+qSDMLoJvb3QarJJlDQK7SSY4rK3hxp4XsiANeFOmjU46ZI7Y9adAQRJrmbz8zbtZkp3mJTT+rGxtF0XA==
   dependencies:
-    "@babel/highlight" "^7.10.4"
+    "@jridgewell/trace-mapping" "^0.2.2"
+    sourcemap-codec "1.4.8"
 
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.14.5":
   version "7.14.5"
@@ -16,12 +17,24 @@
   dependencies:
     "@babel/highlight" "^7.14.5"
 
+"@babel/code-frame@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
+  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
+  dependencies:
+    "@babel/highlight" "^7.16.7"
+
 "@babel/compat-data@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.5.tgz#8ef4c18e58e801c5c95d3c1c0f2874a2680fadea"
   integrity sha512-kixrYn4JwfAVPa0f2yfzc2AWti6WRRyO3XjWW5PJAvtE11qhSayrrcrEnee05KAtNaPC+EwehE8Qt1UedEVB8w==
 
-"@babel/core@^7.1.0", "@babel/core@^7.12.16", "@babel/core@^7.7.5":
+"@babel/compat-data@^7.16.4":
+  version "7.17.0"
+  resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.17.0.tgz#86850b8597ea6962089770952075dcaabb8dba34"
+  integrity sha512-392byTlpGWXMv4FbyWw3sAZ/FrW/DrwqLGXpy0mbyNe9Taqv1mg9yON5/o0cnr8XYCkFTZbC1eV+c+LAROgrng==
+
+"@babel/core@^7.1.0", "@babel/core@^7.12.16":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.5.tgz#d281f46a9905f07d1b3bf71ead54d9c7d89cb1e3"
   integrity sha512-RN/AwP2DJmQTZSfiDaD+JQQ/J99KsIpOCfBE5pL+5jJSt7nI3nYGoAXZu+ffYSQ029NLs2DstZb+eR81uuARgg==
@@ -42,6 +55,27 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
+"@babel/core@^7.12.3", "@babel/core@^7.7.2", "@babel/core@^7.8.0":
+  version "7.17.0"
+  resolved "https://registry.npmjs.org/@babel/core/-/core-7.17.0.tgz#16b8772b0a567f215839f689c5ded6bb20e864d5"
+  integrity sha512-x/5Ea+RO5MvF9ize5DeVICJoVrNv0Mi2RnIABrZEKYvPEpldXwauPkgvYA17cKa6WpU3LoYvYbuEMFtSNFsarA==
+  dependencies:
+    "@ampproject/remapping" "^2.0.0"
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.0"
+    "@babel/helper-compilation-targets" "^7.16.7"
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helpers" "^7.17.0"
+    "@babel/parser" "^7.17.0"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.0"
+    "@babel/types" "^7.17.0"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.1.2"
+    semver "^6.3.0"
+
 "@babel/generator@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.5.tgz#848d7b9f031caca9d0cd0af01b063f226f52d785"
@@ -51,6 +85,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.17.0", "@babel/generator@^7.7.2":
+  version "7.17.0"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.17.0.tgz#7bd890ba706cd86d3e2f727322346ffdbf98f65e"
+  integrity sha512-I3Omiv6FGOC29dtlZhkfXO6pgkmukJSlT26QjVvS1DGZe/NzSVCPG41X0tS21oZkJYlovfj9qDWgKP+Cn4bXxw==
+  dependencies:
+    "@babel/types" "^7.17.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/helper-compilation-targets@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz#7a99c5d0967911e972fe2c3411f7d5b498498ecf"
@@ -61,6 +104,23 @@
     browserslist "^4.16.6"
     semver "^6.3.0"
 
+"@babel/helper-compilation-targets@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.7.tgz#06e66c5f299601e6c7da350049315e83209d551b"
+  integrity sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==
+  dependencies:
+    "@babel/compat-data" "^7.16.4"
+    "@babel/helper-validator-option" "^7.16.7"
+    browserslist "^4.17.5"
+    semver "^6.3.0"
+
+"@babel/helper-environment-visitor@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
+  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-function-name@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz#89e2c474972f15d8e233b52ee8c480e2cfcd50c4"
@@ -70,6 +130,15 @@
     "@babel/template" "^7.14.5"
     "@babel/types" "^7.14.5"
 
+"@babel/helper-function-name@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
+  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-get-function-arity@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz#25fbfa579b0937eee1f3b805ece4ce398c431815"
@@ -77,6 +146,13 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
+"@babel/helper-get-function-arity@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
+  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-hoist-variables@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz#e0dd27c33a78e577d7c8884916a3e7ef1f7c7f8d"
@@ -84,6 +160,13 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
+"@babel/helper-hoist-variables@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
+  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-member-expression-to-functions@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.5.tgz#d5c70e4ad13b402c95156c7a53568f504e2fb7b8"
@@ -98,6 +181,13 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
+  integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-module-transforms@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz#7de42f10d789b423eb902ebd24031ca77cb1e10e"
@@ -112,6 +202,20 @@
     "@babel/traverse" "^7.14.5"
     "@babel/types" "^7.14.5"
 
+"@babel/helper-module-transforms@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.16.7.tgz#7665faeb721a01ca5327ddc6bba15a5cb34b6a41"
+  integrity sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/helper-simple-access" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/helper-validator-identifier" "^7.16.7"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-optimise-call-expression@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz#f27395a8619e0665b3f0364cddb41c25d71b499c"
@@ -124,6 +228,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
   integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
 
+"@babel/helper-plugin-utils@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
+  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
+
 "@babel/helper-replace-supers@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz#0ecc0b03c41cd567b4024ea016134c28414abb94"
@@ -141,6 +250,13 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
+"@babel/helper-simple-access@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.16.7.tgz#d656654b9ea08dbb9659b69d61063ccd343ff0f7"
+  integrity sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==
+  dependencies:
+    "@babel/types" "^7.16.7"
+
 "@babel/helper-split-export-declaration@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz#22b23a54ef51c2b7605d851930c1976dd0bc693a"
@@ -148,10 +264,12 @@
   dependencies:
     "@babel/types" "^7.14.5"
 
-"@babel/helper-validator-identifier@^7.12.11":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
-  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
+"@babel/helper-split-export-declaration@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
+  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
+  dependencies:
+    "@babel/types" "^7.16.7"
 
 "@babel/helper-validator-identifier@^7.14.5":
   version "7.14.5"
@@ -163,11 +281,21 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
   integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
 
+"@babel/helper-validator-identifier@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
+  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
+
 "@babel/helper-validator-option@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz#6e72a1fff18d5dfcb878e1e62f1a021c4b72d5a3"
   integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==
 
+"@babel/helper-validator-option@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz#b203ce62ce5fe153899b617c08957de860de4d23"
+  integrity sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==
+
 "@babel/helpers@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.14.5.tgz#4870f8d9a6fdbbd65e5674a3558b4ff7fef0d9b2"
@@ -177,14 +305,14 @@
     "@babel/traverse" "^7.14.5"
     "@babel/types" "^7.14.5"
 
-"@babel/highlight@^7.10.4":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.8.tgz#10b2dac78526424dfc1f47650d0e415dfd9dc481"
-  integrity sha512-4vrIhfJyfNf+lCtXC2ck1rKSzDwciqF7IWFhXXrSOUC2O5DrVp+w4c6ed4AllTxhTkUP5x2tYj41VaxdVMMRDw==
+"@babel/helpers@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.17.0.tgz#79cdf6c66a579f3a7b5e739371bc63ca0306886b"
+  integrity sha512-Xe/9NFxjPwELUvW2dsukcMZIp6XwPSbI4ojFBJuX5ramHuVE22SVcZIwqzdWo5uCgeTXW8qV97lMvSOjq+1+nQ==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
+    "@babel/template" "^7.16.7"
+    "@babel/traverse" "^7.17.0"
+    "@babel/types" "^7.17.0"
 
 "@babel/highlight@^7.14.5":
   version "7.14.5"
@@ -195,15 +323,24 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.16.7":
+  version "7.16.10"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
+  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.5.tgz#4cd2f346261061b2518873ffecdf1612cb032829"
   integrity sha512-TM8C+xtH/9n1qzX+JNHi7AN2zHMTiPUtspO0ZdHflW8KaskkALhMmuMHb4bCmNdv9VAPzJX3/bXqkVLnAvsPfg==
 
-"@babel/parser@^7.15.0":
-  version "7.15.7"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.7.tgz#0c3ed4a2eb07b165dfa85b3cc45c727334c4edae"
-  integrity sha512-rycZXvQ+xS9QyIcJ9HXeDWf1uxqlbVFAUq0Rq0dbc50Zb/+wUe/ehyfzGfm9KZZF0kBejYgxltBXocP+gKdL2g==
+"@babel/parser@^7.14.7", "@babel/parser@^7.16.4", "@babel/parser@^7.16.7", "@babel/parser@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.17.0.tgz#f0ac33eddbe214e4105363bb17c3341c5ffcc43c"
+  integrity sha512-VKXSCQx5D8S04ej+Dqsr1CzYvvWgf20jIw2D+YhQCrIlr2UZGaDds23Y0xg75/skOxpLCRpUZvk/1EAVkGoDOw==
 
 "@babel/parser@^7.6.0", "@babel/parser@^7.9.6":
   version "7.15.3"
@@ -294,7 +431,24 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-transform-modules-commonjs@^7.12.13", "@babel/plugin-transform-modules-commonjs@^7.2.0":
+"@babel/plugin-syntax-typescript@^7.7.2":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.16.7.tgz#39c9b55ee153151990fb038651d58d3fd03f98f8"
+  integrity sha512-YhUIJHHGkqPgEcMYkPCKTyGUdoGKWtopIycQyjJH8OjvRgOYsXsaKehLVPScKJWAULPxMa4N1vCe6szREFlZ7A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.16.7"
+
+"@babel/plugin-transform-modules-commonjs@^7.15.0":
+  version "7.16.8"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.8.tgz#cdee19aae887b16b9d331009aa9a219af7c86afe"
+  integrity sha512-oflKPvsLT2+uKQopesJt3ApiaIS2HW+hzHFcwRNtyDGieAeC/dIHZX8buJQ2J2X1rxGPy4eRcUijm3qcSPjYcA==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-simple-access" "^7.16.7"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-commonjs@^7.2.0":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.5.tgz#7aaee0ea98283de94da98b28f8c35701429dad97"
   integrity sha512-en8GfBtgnydoao2PS+87mKyw62k02k7kJ9ltbKe0fXTHrQmG6QZZflYuGI1VVG7sVpx4E1n7KBpNlPb8m78J+A==
@@ -328,7 +482,16 @@
     "@babel/parser" "^7.14.5"
     "@babel/types" "^7.14.5"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.14.5":
+"@babel/template@^7.16.7":
+  version "7.16.7"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
+  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/parser" "^7.16.7"
+    "@babel/types" "^7.16.7"
+
+"@babel/traverse@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.5.tgz#c111b0f58afab4fea3d3385a406f692748c59870"
   integrity sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==
@@ -343,6 +506,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.16.7", "@babel/traverse@^7.17.0", "@babel/traverse@^7.7.2":
+  version "7.17.0"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.0.tgz#3143e5066796408ccc880a33ecd3184f3e75cd30"
+  integrity sha512-fpFIXvqD6kC7c7PUNnZ0Z8cQXlarCLtCUpt2S1Dx7PjoRtCFffvOkHHSom+m5HIxMZn5bIBVb71lhabcmjEsqg==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.0"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.16.7"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.0"
+    "@babel/types" "^7.17.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.14.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
@@ -351,12 +530,12 @@
     "@babel/helper-validator-identifier" "^7.14.5"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.15.0":
-  version "7.15.6"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.6.tgz#99abdc48218b2881c058dd0a7ab05b99c9be758f"
-  integrity sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==
+"@babel/types@^7.16.7", "@babel/types@^7.17.0":
+  version "7.17.0"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
+  integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.14.9"
+    "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
 "@babel/types@^7.6.1", "@babel/types@^7.9.6":
@@ -372,14 +551,6 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@cnakazawa/watch@^1.0.3":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
-  integrity sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==
-  dependencies:
-    exec-sh "^0.3.2"
-    minimist "^1.2.0"
-
 "@emmetio/abbreviation@^2.2.2":
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/@emmetio/abbreviation/-/abbreviation-2.2.2.tgz#746762fd9e7a8c2ea604f580c62e3cfe250e6989"
@@ -399,18 +570,18 @@
   resolved "https://registry.yarnpkg.com/@emmetio/scanner/-/scanner-1.0.0.tgz#065b2af6233fe7474d44823e3deb89724af42b5f"
   integrity sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==
 
-"@eslint/eslintrc@^0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
-  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
+"@eslint/eslintrc@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.0.5.tgz#33f1b838dbf1f923bfa517e008362b78ddbbf318"
+  integrity sha512-BLxsnmK3KyPunz5wmCCpqy0YelEoxxGmH73Is+Z74oOTMtExcjkr3dDR6quwrjh1YspA8DH9gnX1o069KiS9AQ==
   dependencies:
     ajv "^6.12.4"
-    debug "^4.1.1"
-    espree "^7.3.0"
+    debug "^4.3.2"
+    espree "^9.2.0"
     globals "^13.9.0"
     ignore "^4.0.6"
     import-fresh "^3.2.1"
-    js-yaml "^3.13.1"
+    js-yaml "^4.1.0"
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
@@ -426,19 +597,19 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
-"@humanwhocodes/config-array@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
-  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+"@humanwhocodes/config-array@^0.9.2":
+  version "0.9.3"
+  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz#f2564c744b387775b436418491f15fce6601f63e"
+  integrity sha512-3xSMlXHh03hCcCmFc0rbKp3Ivt2PFEJnQUJDDMTJQ2wkECZWdq4GePs2ctc5H8zV+cHPaq8k2vU8mrQjA6iHdQ==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.0"
+    "@humanwhocodes/object-schema" "^1.2.1"
     debug "^4.1.1"
     minimatch "^3.0.4"
 
-"@humanwhocodes/object-schema@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
-  integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
+"@humanwhocodes/object-schema@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
 
 "@iarna/toml@2.2.5":
   version "2.2.5"
@@ -461,18 +632,6 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
   integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
 
-"@jest/console@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-26.6.2.tgz#4e04bc464014358b03ab4937805ee36a0aeb98f2"
-  integrity sha512-IY1R2i2aLsLr7Id3S6p2BA82GNWryt4oSvEXLAKc+L2zdi89dSkE8xC1C+0kpATG4JhBJREnQOH7/zmccM2B0g==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    chalk "^4.0.0"
-    jest-message-util "^26.6.2"
-    jest-util "^26.6.2"
-    slash "^3.0.0"
-
 "@jest/console@^27.0.2":
   version "27.0.2"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.0.2.tgz#b8eeff8f21ac51d224c851e1729d2630c18631e6"
@@ -485,122 +644,123 @@
     jest-util "^27.0.2"
     slash "^3.0.0"
 
-"@jest/core@^26.6.3":
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.6.3.tgz#7639fcb3833d748a4656ada54bde193051e45fad"
-  integrity sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==
+"@jest/console@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/@jest/console/-/console-27.4.6.tgz#0742e6787f682b22bdad56f9db2a8a77f6a86107"
+  integrity sha512-jauXyacQD33n47A44KrlOVeiXHEXDqapSdfb9kTekOchH/Pd18kBIO1+xxJQRLuG+LUuljFCwTG92ra4NW7SpA==
   dependencies:
-    "@jest/console" "^26.6.2"
-    "@jest/reporters" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^27.4.6"
+    jest-util "^27.4.2"
+    slash "^3.0.0"
+
+"@jest/core@^27.4.7":
+  version "27.4.7"
+  resolved "https://registry.npmjs.org/@jest/core/-/core-27.4.7.tgz#84eabdf42a25f1fa138272ed229bcf0a1b5e6913"
+  integrity sha512-n181PurSJkVMS+kClIFSX/LLvw9ExSb+4IMtD6YnfxZVerw9ANYtW0bPrm0MJu2pfe9SY9FJ9FtQ+MdZkrZwjg==
+  dependencies:
+    "@jest/console" "^27.4.6"
+    "@jest/reporters" "^27.4.6"
+    "@jest/test-result" "^27.4.6"
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
     "@types/node" "*"
     ansi-escapes "^4.2.1"
     chalk "^4.0.0"
+    emittery "^0.8.1"
     exit "^0.1.2"
     graceful-fs "^4.2.4"
-    jest-changed-files "^26.6.2"
-    jest-config "^26.6.3"
-    jest-haste-map "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.6.2"
-    jest-resolve-dependencies "^26.6.3"
-    jest-runner "^26.6.3"
-    jest-runtime "^26.6.3"
-    jest-snapshot "^26.6.2"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
-    jest-watcher "^26.6.2"
-    micromatch "^4.0.2"
-    p-each-series "^2.1.0"
+    jest-changed-files "^27.4.2"
+    jest-config "^27.4.7"
+    jest-haste-map "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-regex-util "^27.4.0"
+    jest-resolve "^27.4.6"
+    jest-resolve-dependencies "^27.4.6"
+    jest-runner "^27.4.6"
+    jest-runtime "^27.4.6"
+    jest-snapshot "^27.4.6"
+    jest-util "^27.4.2"
+    jest-validate "^27.4.6"
+    jest-watcher "^27.4.6"
+    micromatch "^4.0.4"
     rimraf "^3.0.0"
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
-"@jest/environment@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-26.6.2.tgz#ba364cc72e221e79cc8f0a99555bf5d7577cf92c"
-  integrity sha512-nFy+fHl28zUrRsCeMB61VDThV1pVTtlEokBRgqPrcT1JNq4yRNIyTHfyht6PqtUvY9IsuLGTrbG8kPXjSZIZwA==
+"@jest/environment@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/@jest/environment/-/environment-27.4.6.tgz#1e92885d64f48c8454df35ed9779fbcf31c56d8b"
+  integrity sha512-E6t+RXPfATEEGVidr84WngLNWZ8ffCPky8RqqRK6u1Bn0LK92INe0MDttyPl/JOzaq92BmDzOeuqk09TvM22Sg==
   dependencies:
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@jest/fake-timers" "^27.4.6"
+    "@jest/types" "^27.4.2"
     "@types/node" "*"
-    jest-mock "^26.6.2"
+    jest-mock "^27.4.6"
 
-"@jest/fake-timers@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.6.2.tgz#459c329bcf70cee4af4d7e3f3e67848123535aad"
-  integrity sha512-14Uleatt7jdzefLPYM3KLcnUl1ZNikaKq34enpb5XG9i81JpppDb5muZvonvKyrl7ftEHkKS5L5/eB/kxJ+bvA==
+"@jest/fake-timers@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-27.4.6.tgz#e026ae1671316dbd04a56945be2fa251204324e8"
+  integrity sha512-mfaethuYF8scV8ntPpiVGIHQgS0XIALbpY2jt2l7wb/bvq4Q5pDLk4EP4D7SAvYT1QrPOPVZAtbdGAOOyIgs7A==
   dependencies:
-    "@jest/types" "^26.6.2"
-    "@sinonjs/fake-timers" "^6.0.1"
+    "@jest/types" "^27.4.2"
+    "@sinonjs/fake-timers" "^8.0.1"
     "@types/node" "*"
-    jest-message-util "^26.6.2"
-    jest-mock "^26.6.2"
-    jest-util "^26.6.2"
+    jest-message-util "^27.4.6"
+    jest-mock "^27.4.6"
+    jest-util "^27.4.2"
 
-"@jest/globals@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.6.2.tgz#5b613b78a1aa2655ae908eba638cc96a20df720a"
-  integrity sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==
+"@jest/globals@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/@jest/globals/-/globals-27.4.6.tgz#3f09bed64b0fd7f5f996920258bd4be8f52f060a"
+  integrity sha512-kAiwMGZ7UxrgPzu8Yv9uvWmXXxsy0GciNejlHvfPIfWkSxChzv6bgTS3YqBkGuHcis+ouMFI2696n2t+XYIeFw==
   dependencies:
-    "@jest/environment" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    expect "^26.6.2"
+    "@jest/environment" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    expect "^27.4.6"
 
-"@jest/reporters@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.6.2.tgz#1f518b99637a5f18307bd3ecf9275f6882a667f6"
-  integrity sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==
+"@jest/reporters@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/@jest/reporters/-/reporters-27.4.6.tgz#b53dec3a93baf9b00826abf95b932de919d6d8dd"
+  integrity sha512-+Zo9gV81R14+PSq4wzee4GC2mhAN9i9a7qgJWL90Gpx7fHYkWpTBvwWNZUXvJByYR9tAVBdc8VxDWqfJyIUrIQ==
   dependencies:
     "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@jest/console" "^27.4.6"
+    "@jest/test-result" "^27.4.6"
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
     chalk "^4.0.0"
     collect-v8-coverage "^1.0.0"
     exit "^0.1.2"
     glob "^7.1.2"
     graceful-fs "^4.2.4"
     istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-instrument "^4.0.3"
+    istanbul-lib-instrument "^5.1.0"
     istanbul-lib-report "^3.0.0"
     istanbul-lib-source-maps "^4.0.0"
-    istanbul-reports "^3.0.2"
-    jest-haste-map "^26.6.2"
-    jest-resolve "^26.6.2"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
+    istanbul-reports "^3.1.3"
+    jest-haste-map "^27.4.6"
+    jest-resolve "^27.4.6"
+    jest-util "^27.4.2"
+    jest-worker "^27.4.6"
     slash "^3.0.0"
     source-map "^0.6.0"
     string-length "^4.0.1"
     terminal-link "^2.0.0"
-    v8-to-istanbul "^7.0.0"
-  optionalDependencies:
-    node-notifier "^8.0.0"
+    v8-to-istanbul "^8.1.0"
 
-"@jest/source-map@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.6.2.tgz#29af5e1e2e324cafccc936f218309f54ab69d535"
-  integrity sha512-YwYcCwAnNmOVsZ8mr3GfnzdXDAl4LaenZP5z+G0c8bzC9/dugL8zRmxZzdoTl4IaS3CryS1uWnROLPFmb6lVvA==
+"@jest/source-map@^27.4.0":
+  version "27.4.0"
+  resolved "https://registry.npmjs.org/@jest/source-map/-/source-map-27.4.0.tgz#2f0385d0d884fb3e2554e8f71f8fa957af9a74b6"
+  integrity sha512-Ntjx9jzP26Bvhbm93z/AKcPRj/9wrkI88/gK60glXDx1q+IeI0rf7Lw2c89Ch6ofonB0On/iRDreQuQ6te9pgQ==
   dependencies:
     callsites "^3.0.0"
     graceful-fs "^4.2.4"
     source-map "^0.6.0"
 
-"@jest/test-result@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.6.2.tgz#55da58b62df134576cc95476efa5f7949e3f5f18"
-  integrity sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==
-  dependencies:
-    "@jest/console" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    collect-v8-coverage "^1.0.0"
-
 "@jest/test-result@^27.0.2":
   version "27.0.2"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.0.2.tgz#0451049e32ceb609b636004ccc27c8fa22263f10"
@@ -611,34 +771,43 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
-"@jest/test-sequencer@^26.6.3":
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz#98e8a45100863886d074205e8ffdc5a7eb582b17"
-  integrity sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==
+"@jest/test-result@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/@jest/test-result/-/test-result-27.4.6.tgz#b3df94c3d899c040f602cea296979844f61bdf69"
+  integrity sha512-fi9IGj3fkOrlMmhQqa/t9xum8jaJOOAi/lZlm6JXSc55rJMXKHxNDN1oCP39B0/DhNOa2OMupF9BcKZnNtXMOQ==
+  dependencies:
+    "@jest/console" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-27.4.6.tgz#447339b8a3d7b5436f50934df30854e442a9d904"
+  integrity sha512-3GL+nsf6E1PsyNsJuvPyIz+DwFuCtBdtvPpm/LMXVkBJbdFvQYCDpccYT56qq5BGniXWlE81n2qk1sdXfZebnw==
   dependencies:
-    "@jest/test-result" "^26.6.2"
+    "@jest/test-result" "^27.4.6"
     graceful-fs "^4.2.4"
-    jest-haste-map "^26.6.2"
-    jest-runner "^26.6.3"
-    jest-runtime "^26.6.3"
+    jest-haste-map "^27.4.6"
+    jest-runtime "^27.4.6"
 
-"@jest/transform@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.6.2.tgz#5ac57c5fa1ad17b2aae83e73e45813894dcf2e4b"
-  integrity sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==
+"@jest/transform@^27.4.6":
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/@jest/transform/-/transform-27.4.6.tgz#153621940b1ed500305eacdb31105d415dc30231"
+  integrity sha512-9MsufmJC8t5JTpWEQJ0OcOOAXaH5ioaIX6uHVBLBMoCZPfKKQF+EqP8kACAvCZ0Y1h2Zr3uOccg8re+Dr5jxyw==
   dependencies:
     "@babel/core" "^7.1.0"
-    "@jest/types" "^26.6.2"
-    babel-plugin-istanbul "^6.0.0"
+    "@jest/types" "^27.4.2"
+    babel-plugin-istanbul "^6.1.1"
     chalk "^4.0.0"
     convert-source-map "^1.4.0"
     fast-json-stable-stringify "^2.0.0"
     graceful-fs "^4.2.4"
-    jest-haste-map "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-util "^26.6.2"
-    micromatch "^4.0.2"
-    pirates "^4.0.1"
+    jest-haste-map "^27.4.6"
+    jest-regex-util "^27.4.0"
+    jest-util "^27.4.2"
+    micromatch "^4.0.4"
+    pirates "^4.0.4"
     slash "^3.0.0"
     source-map "^0.6.1"
     write-file-atomic "^3.0.0"
@@ -665,6 +834,30 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@jest/types@^27.4.2":
+  version "27.4.2"
+  resolved "https://registry.npmjs.org/@jest/types/-/types-27.4.2.tgz#96536ebd34da6392c2b7c7737d693885b5dd44a5"
+  integrity sha512-j35yw0PMTPpZsUoOBiuHzr1zTYoad1cVIE0ajEjcrJONxxrko/IRGKkXx3os0Nsi4Hu3+5VmDbVfq5WhG/pWAg==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^16.0.0"
+    chalk "^4.0.0"
+
+"@jridgewell/resolve-uri@^3.0.3":
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz#b876e3feefb9c8d3aa84014da28b5e52a0640d72"
+  integrity sha512-cz8HFjOFfUBtvN+NXYSFMHYRdxZMaEl0XypVrhzxBgadKIXhIkRd8aMeHhmF56Sl7SuS8OnUpQ73/k9LE4VnLg==
+
+"@jridgewell/trace-mapping@^0.2.2":
+  version "0.2.6"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.2.6.tgz#5eac4bea1b56e073471c6f021582bdb986c4b8b7"
+  integrity sha512-rVJf5dSMEBxnDEwtAT5x8+p6tZ+xU6Ocm+cR1MYL2gMsRi4MMzVf9Pvq6JaxIsEeKAyYmo2U+yPQN4QfdTfFnA==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.0.3"
+    sourcemap-codec "1.4.8"
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"
@@ -729,24 +922,29 @@
   resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-10.2.2.tgz#6c1c839d7d169feabaf1d2a69c79439c75d979cd"
   integrity sha512-EVcXQ+ZrC04cg17AMg1ofocWMxHDn17cB66ZHgYc0eUwjFtxS0oBzkyw2VqIrHBwVgtfoYrq1WMQfQmMjUwthw==
 
-"@octokit/plugin-paginate-rest@^2.16.0":
-  version "2.16.3"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.16.3.tgz#6dbf74a12a53e04da6ca731d4c93f20c0b5c6fe9"
-  integrity sha512-kdc65UEsqze/9fCISq6BxLzeB9qf0vKvKojIfzgwf4tEF+Wy6c9dXnPFE6vgpoDFB1Z5Jek5WFVU6vL1w22+Iw==
+"@octokit/openapi-types@^11.2.0":
+  version "11.2.0"
+  resolved "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-11.2.0.tgz#b38d7fc3736d52a1e96b230c1ccd4a58a2f400a6"
+  integrity sha512-PBsVO+15KSlGmiI8QAzaqvsNlZlrDlyAJYcrXBCvVUxCp7VnXjkwPoFHgjEJXx3WF9BAwkA6nfCUA7i9sODzKA==
+
+"@octokit/plugin-paginate-rest@^2.16.8":
+  version "2.17.0"
+  resolved "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.17.0.tgz#32e9c7cab2a374421d3d0de239102287d791bce7"
+  integrity sha512-tzMbrbnam2Mt4AhuyCHvpRkS0oZ5MvwwcQPYGtMv4tUa5kkzG58SVB0fcsLulOZQeRnOgdkZWkRUiyBlh0Bkyw==
   dependencies:
-    "@octokit/types" "^6.28.1"
+    "@octokit/types" "^6.34.0"
 
 "@octokit/plugin-request-log@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz#5e50ed7083a613816b1e4a28aeec5fb7f1462e85"
   integrity sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==
 
-"@octokit/plugin-rest-endpoint-methods@^5.9.0":
-  version "5.10.4"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.10.4.tgz#97e85eb7375e30b9bf193894670f9da205e79408"
-  integrity sha512-Dh+EAMCYR9RUHwQChH94Skl0lM8Fh99auT8ggck/xTzjJrwVzvsd0YH68oRPqp/HxICzmUjLfaQ9sy1o1sfIiA==
+"@octokit/plugin-rest-endpoint-methods@^5.12.0":
+  version "5.13.0"
+  resolved "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.13.0.tgz#8c46109021a3412233f6f50d28786f8e552427ba"
+  integrity sha512-uJjMTkN1KaOIgNtUPMtIXDOjx6dGYysdIFhgA52x4xSadQCz3b/zJexvITDVpANnfKPW/+E0xkOvLntqMYpviA==
   dependencies:
-    "@octokit/types" "^6.28.1"
+    "@octokit/types" "^6.34.0"
     deprecation "^2.3.1"
 
 "@octokit/request-error@^2.0.5", "@octokit/request-error@^2.1.0":
@@ -770,32 +968,39 @@
     node-fetch "^2.6.1"
     universal-user-agent "^6.0.0"
 
-"@octokit/rest@18.10.0":
-  version "18.10.0"
-  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-18.10.0.tgz#8a0add9611253e0e31d3ed5b4bc941a3795a7648"
-  integrity sha512-esHR5OKy38bccL/sajHqZudZCvmv4yjovMJzyXlphaUo7xykmtOdILGJ3aAm0mFHmMLmPFmDMJXf39cAjNJsrw==
+"@octokit/rest@18.12.0":
+  version "18.12.0"
+  resolved "https://registry.npmjs.org/@octokit/rest/-/rest-18.12.0.tgz#f06bc4952fc87130308d810ca9d00e79f6988881"
+  integrity sha512-gDPiOHlyGavxr72y0guQEhLsemgVjwRePayJ+FcKc2SJqKUbxbkvf5kAZEWA/MKvsfYlQAMVzNJE3ezQcxMJ2Q==
   dependencies:
     "@octokit/core" "^3.5.1"
-    "@octokit/plugin-paginate-rest" "^2.16.0"
+    "@octokit/plugin-paginate-rest" "^2.16.8"
     "@octokit/plugin-request-log" "^1.0.4"
-    "@octokit/plugin-rest-endpoint-methods" "^5.9.0"
+    "@octokit/plugin-rest-endpoint-methods" "^5.12.0"
 
-"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.28.1":
+"@octokit/types@^6.0.3", "@octokit/types@^6.16.1":
   version "6.28.1"
   resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.28.1.tgz#ab990d1fe952226055e81c7650480e6bacfb877c"
   integrity sha512-XlxDoQLFO5JnFZgKVQTYTvXRsQFfr/GwDUU108NJ9R5yFPkA2qXhTJjYuul3vE4eLXP40FA2nysOu2zd6boE+w==
   dependencies:
     "@octokit/openapi-types" "^10.2.2"
 
-"@popperjs/core@^2.10.1":
-  version "2.10.1"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.1.tgz#728ecd95ab207aab8a9a4e421f0422db329232be"
-  integrity sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==
+"@octokit/types@^6.34.0":
+  version "6.34.0"
+  resolved "https://registry.npmjs.org/@octokit/types/-/types-6.34.0.tgz#c6021333334d1ecfb5d370a8798162ddf1ae8218"
+  integrity sha512-s1zLBjWhdEI2zwaoSgyOFoKSl109CUcVBCc7biPJ3aAf6LGLU6szDvi31JPU7bxfla2lqfhjbbg/5DdFNxOwHw==
+  dependencies:
+    "@octokit/openapi-types" "^11.2.0"
+
+"@popperjs/core@^2.11.0":
+  version "2.11.2"
+  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9"
+  integrity sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==
 
-"@rollup/plugin-typescript@^8.2.5":
-  version "8.2.5"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-8.2.5.tgz#e0319761b2b5105615e5a0c371ae05bc2984b7de"
-  integrity sha512-QL/LvDol/PAGB2O0S7/+q2HpSUNodpw7z6nGn9BfoVCPOZ0r4EALrojFU29Bkoi2Hr2jgTocTejJ5GGWZfOxbQ==
+"@rollup/plugin-typescript@^8.3.0":
+  version "8.3.0"
+  resolved "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-8.3.0.tgz#bc1077fa5897b980fc27e376c4e377882c63e68b"
+  integrity sha512-I5FpSvLbtAdwJ+naznv+B4sjXZUcIvLLceYpITAn7wAP8W0wqc5noLdGIp9HGVntNhRWXctwPYrSSFQxtl0FPA==
   dependencies:
     "@rollup/pluginutils" "^3.1.0"
     resolve "^1.17.0"
@@ -843,10 +1048,10 @@
   dependencies:
     type-detect "4.0.8"
 
-"@sinonjs/fake-timers@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz#293674fccb3262ac782c7aadfdeca86b10c75c40"
-  integrity sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==
+"@sinonjs/fake-timers@^8.0.1":
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-8.1.0.tgz#3fdc2b6cb58935b21bfb8d1625eb1300484316e7"
+  integrity sha512-OAPJUAtgeINhh/TAlUID4QTs53Njm7xzddaVlEs/SXwgtiD1tW22zAB/W1wdqfrpmikgaWQ9Fw6Ws+hsiRm5Vg==
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
@@ -864,10 +1069,10 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@tailwindcss/forms@^0.3.3":
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.3.3.tgz#a29d22668804f3dae293dcadbef1aa6315c45b64"
-  integrity sha512-U8Fi/gq4mSuaLyLtFISwuDYzPB73YzgozjxOIHsK6NXgg/IWD1FLaHbFlWmurAMyy98O+ao74ksdQefsquBV1Q==
+"@tailwindcss/forms@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.4.0.tgz#a46715e347a32d216a3973eb67473bd29ae3798e"
+  integrity sha512-DeaQBx6EgEeuZPQACvC+mKneJsD8am1uiJugjgQK1+/Vt+Ai0GpFBC2T2fqnUad71WgOxyrZPE6BG1VaI6YqfQ==
   dependencies:
     mini-svg-data-uri "^1.2.3"
 
@@ -904,7 +1109,7 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.1.tgz#78b5433344e2f92e8b306c06a5622c50c245bf6b"
   integrity sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==
 
-"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
+"@types/babel__core@^7.0.0":
   version "7.1.14"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.14.tgz#faaeefc4185ec71c389f4501ee5ec84b170cc402"
   integrity sha512-zGZJzzBUVDo/eV6KgbE0f0ZI7dInEYvo12Rb70uNQDshC3SkRMb67ja0GgRHZgAX3Za6rhaWlvbDO8rrGyAb1g==
@@ -915,6 +1120,17 @@
     "@types/babel__template" "*"
     "@types/babel__traverse" "*"
 
+"@types/babel__core@^7.1.14":
+  version "7.1.18"
+  resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.18.tgz#1a29abcc411a9c05e2094c98f9a1b7da6cdf49f8"
+  integrity sha512-S7unDjm/C7z2A2R9NzfKCK1I+BAALDtxEmsJBwlB3EzNfb929ykjL++1CK9LO++EIp2fQrC8O+BwjKvz6UeDyQ==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
 "@types/babel__generator@*":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.2.tgz#f3d71178e187858f7c45e30380f8f1b7415a12d8"
@@ -988,25 +1204,17 @@
   dependencies:
     "@types/istanbul-lib-report" "*"
 
-"@types/jest@^26.0.20":
-  version "26.0.23"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.23.tgz#a1b7eab3c503b80451d019efb588ec63522ee4e7"
-  integrity sha512-ZHLmWMJ9jJ9PTiT58juykZpL7KjwJywFN3Rr2pTSkyQfydf/rk22yS7W8p5DaVUMQ2BQC7oYiU3FjbTM/mYrOA==
-  dependencies:
-    jest-diff "^26.0.0"
-    pretty-format "^26.0.0"
-
-"@types/jest@^26.0.23":
-  version "26.0.24"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-26.0.24.tgz#943d11976b16739185913a1936e0de0c4a7d595a"
-  integrity sha512-E/X5Vib8BWqZNRlDxj9vYXhsDwPYbPINqKF9BsnSoon4RQ0D9moEuLD8txgyypFLH7J4+Lho9Nr/c8H0Fi+17w==
+"@types/jest@^27.0.1", "@types/jest@^27.0.3":
+  version "27.4.0"
+  resolved "https://registry.npmjs.org/@types/jest/-/jest-27.4.0.tgz#037ab8b872067cae842a320841693080f9cb84ed"
+  integrity sha512-gHl8XuC1RZ8H2j5sHv/JqsaxXkDDM9iDOgu0Wp8sjs4u/snb2PVehyWXJPr+ORA0RPpgw231mnutWI1+0hgjIQ==
   dependencies:
-    jest-diff "^26.0.0"
-    pretty-format "^26.0.0"
+    jest-diff "^27.0.0"
+    pretty-format "^27.0.0"
 
-"@types/json-schema@^7.0.7":
+"@types/json-schema@^7.0.9":
   version "7.0.9"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
 "@types/json5@^0.0.29":
@@ -1036,10 +1244,10 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/prettier@^2.0.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.3.0.tgz#2e8332cc7363f887d32ec5496b207d26ba8052bb"
-  integrity sha512-hkc1DATxFLQo4VxPDpMH1gCkPpBbpOoJ/4nhuXw4n63/0R6bCpQECj4+K226UJ4JO/eJQz+1mC2I7JsWanAdQw==
+"@types/prettier@^2.1.5":
+  version "2.4.3"
+  resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.3.tgz#a3c65525b91fca7da00ab1a3ac2b5a2a4afbffbf"
+  integrity sha512-QzSuZMBuG5u8HqYz01qtMdg/Jfctlnvj1z/lYnIDXs/golxw0fxtRAHd9KrzjR7Yxz1qVeI00o0kiO3PmVdJ9w==
 
 "@types/responselike@*", "@types/responselike@^1.0.0":
   version "1.0.0"
@@ -1082,131 +1290,157 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^4.31.2":
-  version "4.31.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.31.2.tgz#9f41efaee32cdab7ace94b15bd19b756dd099b0a"
-  integrity sha512-w63SCQ4bIwWN/+3FxzpnWrDjQRXVEGiTt9tJTRptRXeFvdZc/wLiz3FQUwNQ2CVoRGI6KUWMNUj/pk63noUfcA==
+"@typescript-eslint/eslint-plugin@^5.8.0":
+  version "5.10.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.10.2.tgz#f8c1d59fc37bd6d9d11c97267fdfe722c4777152"
+  integrity sha512-4W/9lLuE+v27O/oe7hXJKjNtBLnZE8tQAFpapdxwSVHqtmIoPB1gph3+ahNwVuNL37BX7YQHyGF9Xv6XCnIX2Q==
   dependencies:
-    "@typescript-eslint/experimental-utils" "4.31.2"
-    "@typescript-eslint/scope-manager" "4.31.2"
-    debug "^4.3.1"
+    "@typescript-eslint/scope-manager" "5.10.2"
+    "@typescript-eslint/type-utils" "5.10.2"
+    "@typescript-eslint/utils" "5.10.2"
+    debug "^4.3.2"
     functional-red-black-tree "^1.0.1"
-    regexpp "^3.1.0"
+    ignore "^5.1.8"
+    regexpp "^3.2.0"
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/experimental-utils@4.31.2":
-  version "4.31.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.31.2.tgz#98727a9c1e977dd5d20c8705e69cd3c2a86553fa"
-  integrity sha512-3tm2T4nyA970yQ6R3JZV9l0yilE2FedYg8dcXrTar34zC9r6JB7WyBQbpIVongKPlhEMjhQ01qkwrzWy38Bk1Q==
+"@typescript-eslint/parser@^5.8.0":
+  version "5.10.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.10.2.tgz#b6076d27cc5499ce3f2c625f5ccde946ecb7db9a"
+  integrity sha512-JaNYGkaQVhP6HNF+lkdOr2cAs2wdSZBoalE22uYWq8IEv/OVH0RksSGydk+sW8cLoSeYmC+OHvRyv2i4AQ7Czg==
   dependencies:
-    "@types/json-schema" "^7.0.7"
-    "@typescript-eslint/scope-manager" "4.31.2"
-    "@typescript-eslint/types" "4.31.2"
-    "@typescript-eslint/typescript-estree" "4.31.2"
-    eslint-scope "^5.1.1"
-    eslint-utils "^3.0.0"
+    "@typescript-eslint/scope-manager" "5.10.2"
+    "@typescript-eslint/types" "5.10.2"
+    "@typescript-eslint/typescript-estree" "5.10.2"
+    debug "^4.3.2"
 
-"@typescript-eslint/parser@^4.31.2", "@typescript-eslint/parser@^4.4.1":
-  version "4.31.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.31.2.tgz#54aa75986e3302d91eff2bbbaa6ecfa8084e9c34"
-  integrity sha512-EcdO0E7M/sv23S/rLvenHkb58l3XhuSZzKf6DBvLgHqOYdL6YFMYVtreGFWirxaU2mS1GYDby3Lyxco7X5+Vjw==
-  dependencies:
-    "@typescript-eslint/scope-manager" "4.31.2"
-    "@typescript-eslint/types" "4.31.2"
-    "@typescript-eslint/typescript-estree" "4.31.2"
-    debug "^4.3.1"
-
-"@typescript-eslint/scope-manager@4.31.2":
-  version "4.31.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.31.2.tgz#1d528cb3ed3bcd88019c20a57c18b897b073923a"
-  integrity sha512-2JGwudpFoR/3Czq6mPpE8zBPYdHWFGL6lUNIGolbKQeSNv4EAiHaR5GVDQaLA0FwgcdcMtRk+SBJbFGL7+La5w==
-  dependencies:
-    "@typescript-eslint/types" "4.31.2"
-    "@typescript-eslint/visitor-keys" "4.31.2"
-
-"@typescript-eslint/types@4.31.2":
-  version "4.31.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.31.2.tgz#2aea7177d6d744521a168ed4668eddbd912dfadf"
-  integrity sha512-kWiTTBCTKEdBGrZKwFvOlGNcAsKGJSBc8xLvSjSppFO88AqGxGNYtF36EuEYG6XZ9vT0xX8RNiHbQUKglbSi1w==
-
-"@typescript-eslint/typescript-estree@4.31.2":
-  version "4.31.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.31.2.tgz#abfd50594d8056b37e7428df3b2d185ef2d0060c"
-  integrity sha512-ieBq8U9at6PvaC7/Z6oe8D3czeW5d//Fo1xkF/s9394VR0bg/UaMYPdARiWyKX+lLEjY3w/FNZJxitMsiWv+wA==
-  dependencies:
-    "@typescript-eslint/types" "4.31.2"
-    "@typescript-eslint/visitor-keys" "4.31.2"
-    debug "^4.3.1"
-    globby "^11.0.3"
-    is-glob "^4.0.1"
+"@typescript-eslint/scope-manager@5.10.2":
+  version "5.10.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.10.2.tgz#92c0bc935ec00f3d8638cdffb3d0e70c9b879639"
+  integrity sha512-39Tm6f4RoZoVUWBYr3ekS75TYgpr5Y+X0xLZxXqcZNDWZdJdYbKd3q2IR4V9y5NxxiPu/jxJ8XP7EgHiEQtFnw==
+  dependencies:
+    "@typescript-eslint/types" "5.10.2"
+    "@typescript-eslint/visitor-keys" "5.10.2"
+
+"@typescript-eslint/type-utils@5.10.2":
+  version "5.10.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.10.2.tgz#ad5acdf98a7d2ab030bea81f17da457519101ceb"
+  integrity sha512-uRKSvw/Ccs5FYEoXW04Z5VfzF2iiZcx8Fu7DGIB7RHozuP0VbKNzP1KfZkHBTM75pCpsWxIthEH1B33dmGBKHw==
+  dependencies:
+    "@typescript-eslint/utils" "5.10.2"
+    debug "^4.3.2"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/types@5.10.2":
+  version "5.10.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.10.2.tgz#604d15d795c4601fffba6ecb4587ff9fdec68ce8"
+  integrity sha512-Qfp0qk/5j2Rz3p3/WhWgu4S1JtMcPgFLnmAKAW061uXxKSa7VWKZsDXVaMXh2N60CX9h6YLaBoy9PJAfCOjk3w==
+
+"@typescript-eslint/typescript-estree@5.10.2":
+  version "5.10.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.10.2.tgz#810906056cd3ddcb35aa333fdbbef3713b0fe4a7"
+  integrity sha512-WHHw6a9vvZls6JkTgGljwCsMkv8wu8XU8WaYKeYhxhWXH/atZeiMW6uDFPLZOvzNOGmuSMvHtZKd6AuC8PrwKQ==
+  dependencies:
+    "@typescript-eslint/types" "5.10.2"
+    "@typescript-eslint/visitor-keys" "5.10.2"
+    debug "^4.3.2"
+    globby "^11.0.4"
+    is-glob "^4.0.3"
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/visitor-keys@4.31.2":
-  version "4.31.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.31.2.tgz#7d5b4a4705db7fe59ecffb273c1d082760f635cc"
-  integrity sha512-PrBId7EQq2Nibns7dd/ch6S6/M4/iwLM9McbgeEbCXfxdwRUNxJ4UNreJ6Gh3fI2GNKNrWnQxKL7oCPmngKBug==
+"@typescript-eslint/utils@5.10.2":
+  version "5.10.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.10.2.tgz#1fcd37547c32c648ab11aea7173ec30060ee87a8"
+  integrity sha512-vuJaBeig1NnBRkf7q9tgMLREiYD7zsMrsN1DA3wcoMDvr3BTFiIpKjGiYZoKPllfEwN7spUjv7ZqD+JhbVjEPg==
   dependencies:
-    "@typescript-eslint/types" "4.31.2"
-    eslint-visitor-keys "^2.0.0"
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.10.2"
+    "@typescript-eslint/types" "5.10.2"
+    "@typescript-eslint/typescript-estree" "5.10.2"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
 
-"@variantjs/core@^0.0.77":
-  version "0.0.77"
-  resolved "https://registry.yarnpkg.com/@variantjs/core/-/core-0.0.77.tgz#19edea3bcbe46073f1b00a8d1856513c1be5b7db"
-  integrity sha512-MR1Jh+CIClA/bLxLiQU9bu0q8BtfWHprmiJped1QAHyWTBtlV9G3/5GFDVSarM6YsEGNrZUCh1K4/0GK9IuUDw==
+"@typescript-eslint/visitor-keys@5.10.2":
+  version "5.10.2"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.10.2.tgz#fdbf272d8e61c045d865bd6c8b41bea73d222f3d"
+  integrity sha512-zHIhYGGGrFJvvyfwHk5M08C5B5K4bewkm+rrvNTKk1/S15YHR+SA/QUF8ZWscXSfEaB8Nn2puZj+iHcoxVOD/Q==
+  dependencies:
+    "@typescript-eslint/types" "5.10.2"
+    eslint-visitor-keys "^3.0.0"
 
-"@vitejs/plugin-vue@^1.9.0":
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.9.0.tgz#ae458a2eaac1d06efac8d71a4427d5d742466d72"
-  integrity sha512-TQB87f8baZsTZO/g7Az/dTCwV8eDxwkrP8hMl8HpwLJz/NKvmXtBqa7bYg8GKWNwqjy+pBRLdgiML+BI3HphOw==
+"@variantjs/core@^0.0.80":
+  version "0.0.80"
+  resolved "https://registry.npmjs.org/@variantjs/core/-/core-0.0.80.tgz#742be6087a73256d5b5535c0231c997a1dded2ce"
+  integrity sha512-43vcdvMlocajpfHyzxqHZmu77oMbYFsZI38/TC0E3r2vWu95UyqHS+goaDYXd9H7ES/mcPI0H6fBwkUBoZjgxQ==
+
+"@vitejs/plugin-vue@^2.0.1":
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.1.0.tgz#ddf5e0059f84f2ff649afc25ce5a59211e670542"
+  integrity sha512-AZ78WxvFMYd8JmM/GBV6a6SGGTU0GgN/0/4T+FnMMsLzFEzTeAUwuraapy50ifHZsC+G5SvWs86bvaCPTneFlA==
 
-"@volar/code-gen@^0.27.22":
-  version "0.27.22"
-  resolved "https://registry.yarnpkg.com/@volar/code-gen/-/code-gen-0.27.22.tgz#c13b298af28bd402d5f016266733974f6a496e1f"
-  integrity sha512-2yZR1tjueLNr6psZ45GZAkdszSDA73ARxVXupC4dAdEatBCZQKdyvyRvukmG+YFZvPhJTQWS8A18TWashg0T6g==
+"@volar/code-gen@0.30.6":
+  version "0.30.6"
+  resolved "https://registry.npmjs.org/@volar/code-gen/-/code-gen-0.30.6.tgz#1bdf231f4a833918848fe6fb0d8f47ed31270c85"
+  integrity sha512-odkXN91QCS/KRKPk4eUQp7jkN0PuYLwDuJZwGiDDJrZWUCCSdEvSj7e+Cjk7Q7doX0G9WAF88BL7ozcjzrtiKw==
   dependencies:
-    "@volar/shared" "^0.27.22"
-    "@volar/source-map" "^0.27.22"
+    "@volar/shared" "0.30.6"
+    "@volar/source-map" "0.30.6"
 
-"@volar/html2pug@^0.27.13":
-  version "0.27.13"
-  resolved "https://registry.yarnpkg.com/@volar/html2pug/-/html2pug-0.27.13.tgz#48dfa73ecf1ef1955a02a046d0c88845950fac85"
-  integrity sha512-3NYgNA5F3PDsKbbpOrVdGy2S7ZYmZIbFmbp1A/27DDzjj/uIC9Pj7HXVvbYOzi8HcOxUPt0BMrh4TVzBUaCFww==
+"@volar/html2pug@0.30.6":
+  version "0.30.6"
+  resolved "https://registry.npmjs.org/@volar/html2pug/-/html2pug-0.30.6.tgz#57004fef02e43ea2c0e4061580d2bb030187f2b5"
+  integrity sha512-mPRQCRa/Nse0bC1wxJ+K7q/Ou0Wg+220qL3nPI3mqwSn0KECOAPsZxaVHRFauY4MeBxO2sOzkOvFfQLk8whJ1g==
   dependencies:
     domelementtype "^2.2.0"
-    domhandler "^4.2.0"
-    htmlparser2 "^6.1.0"
+    domhandler "^4.3.0"
+    htmlparser2 "^7.2.0"
     pug "^3.0.2"
 
-"@volar/shared@^0.27.22":
-  version "0.27.22"
-  resolved "https://registry.yarnpkg.com/@volar/shared/-/shared-0.27.22.tgz#b8b9d918abb27e4ddf6d66128809467385c70ea8"
-  integrity sha512-1zkLEkcEgxLWT2G2kXuAXLd7SKwOWJZ36CisWDA9Pp8eF6JkrxMhtvLtuHQN7B5aaYJ2BgcQczxfjxdkoxgOsg==
+"@volar/shared@0.30.6":
+  version "0.30.6"
+  resolved "https://registry.npmjs.org/@volar/shared/-/shared-0.30.6.tgz#2388b60f92724ba9aa10c953e283c357dec5dc6a"
+  integrity sha512-YJa7kl2HRkSZaETBPCVEm/ZVXPBpt1aAlCxNuj55GaCHhcabOVj2oCBZioJLiwAvSR0e6k6KjbJBcKTuKrP9bw==
   dependencies:
     upath "^2.0.1"
-    vscode-jsonrpc "^8.0.0-next.2"
-    vscode-uri "^3.0.2"
-
-"@volar/source-map@^0.27.22":
-  version "0.27.22"
-  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-0.27.22.tgz#533c10ac33bc01bbeb62affb304e1b9766fb94e2"
-  integrity sha512-cBvkLYnLwmTVZiKL7XNp2eKwMk1ZEoVmA4rVQW+AqTpBH1nNfOF3wrHlvVWITl0kkHU2AdBpHVadeEIG7OpJ8w==
-  dependencies:
-    "@volar/shared" "^0.27.22"
-
-"@volar/transforms@^0.27.22":
-  version "0.27.22"
-  resolved "https://registry.yarnpkg.com/@volar/transforms/-/transforms-0.27.22.tgz#01fec2a1544668bc8511df2a61d024998068616c"
-  integrity sha512-DJmXLXTebixAqiMY7PnNhV3qwQnzcNwzZFwbYnECL6INwV8hIMPaY6jR8+dpiDwlAnxV6N+Fb2qFLn6R8dYJmA==
-  dependencies:
-    "@volar/shared" "^0.27.22"
-    vscode-languageserver "^8.0.0-next.2"
+    vscode-html-languageservice "^4.2.1"
+    vscode-jsonrpc "^8.0.0-next.5"
+    vscode-uri "^3.0.3"
+
+"@volar/source-map@0.30.6":
+  version "0.30.6"
+  resolved "https://registry.npmjs.org/@volar/source-map/-/source-map-0.30.6.tgz#1bd802caca9802e142582b510c3a2af0b826e3ab"
+  integrity sha512-B0KLi0StdM3KsMLA+iK5pdE+mokukio7r0EkOMUAYZN/xn/kGWkKIdleJjLtgmtH2tw4kBz/5hP+KKEOlD3Etg==
+  dependencies:
+    "@volar/shared" "0.30.6"
+    vscode-languageserver-textdocument "^1.0.3"
+
+"@volar/transforms@0.30.6":
+  version "0.30.6"
+  resolved "https://registry.npmjs.org/@volar/transforms/-/transforms-0.30.6.tgz#9f99dfe73533d8643a23016539d34c0c9f11965f"
+  integrity sha512-jbVBXOBOeKc6Rb7dzyiq5b+FfYsXFWGFLLDZok5U+JoFujxoPfn5HwX9A3t+RW/NRwQkZxrdiPmW8b69B5nMKQ==
+  dependencies:
+    "@volar/shared" "0.30.6"
+    vscode-languageserver-types "^3.17.0-next.6"
+
+"@volar/vue-code-gen@0.30.6":
+  version "0.30.6"
+  resolved "https://registry.npmjs.org/@volar/vue-code-gen/-/vue-code-gen-0.30.6.tgz#e44c96c08c09ecdfa7d4f83d3741719c78f147b8"
+  integrity sha512-UGpbOuC5ZxT2GXvkq2IWUuca9IDJVaaywWparKW0SwPFOZaMM2ivHLOfQpiuPqDUKTZLGK3fQuBWuXSTl+GIbA==
+  dependencies:
+    "@volar/code-gen" "0.30.6"
+    "@volar/shared" "0.30.6"
+    "@volar/source-map" "0.30.6"
+    "@vue/compiler-core" "^3.2.27"
+    "@vue/compiler-dom" "^3.2.27"
+    "@vue/shared" "^3.2.27"
+    upath "^2.0.1"
 
-"@vscode/emmet-helper@^2.7.0":
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/@vscode/emmet-helper/-/emmet-helper-2.7.0.tgz#3db485f6a650196ff8bbd38ba1b9e468ec8d22f8"
-  integrity sha512-LL7MoKNLUQASacQROO7hBdx5IAxsEnA0UdJFd9xXyf3sBQgz8NE3QEfo3IezE7uin8W2fkG2+EXMst3oqK6+KQ==
+"@vscode/emmet-helper@^2.8.3":
+  version "2.8.3"
+  resolved "https://registry.npmjs.org/@vscode/emmet-helper/-/emmet-helper-2.8.3.tgz#f7c2b4a4751d03bcf2b421f0fce5b521a0f64a18"
+  integrity sha512-dkTSL+BaBBS8gFgPm/GMOU+XfxaMyI+Fl1IUYxEi8Iv24RfHf9/q2eCpV2hs7sncLcoKWEbMYe5gv4Ppmp2Oxw==
   dependencies:
     emmet "^2.3.0"
     jsonc-parser "^2.3.0"
@@ -1215,28 +1449,28 @@
     vscode-nls "^5.0.0"
     vscode-uri "^2.1.2"
 
-"@vue/cli-plugin-unit-jest@^5.0.0-beta.2":
-  version "5.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-5.0.0-beta.2.tgz#1793b4dab1245862d2942ddfc5e000b4ec7f7a6f"
-  integrity sha512-LUJ8uIu9sXxJq4AOcGuWy3CUJrogywD3APKUgLX8BFK1biMlzdemlX292lIbwWXsRQiEI7SgfHhILE1GpEY79g==
+"@vue/cli-plugin-unit-jest@^5.0.0-rc.1":
+  version "5.0.0-rc.2"
+  resolved "https://registry.npmjs.org/@vue/cli-plugin-unit-jest/-/cli-plugin-unit-jest-5.0.0-rc.2.tgz#0e915678e962cf3fff30651d7299d16219a51c6b"
+  integrity sha512-xXioVWYJaRVVfIWxp6UtYQCoEA9gIG/Q/7xsNka/l0ofteiOhuwqVAEk5lSQcSc9KRaWq3ZhNiGqVCTKApz5xA==
   dependencies:
     "@babel/core" "^7.12.16"
-    "@babel/plugin-transform-modules-commonjs" "^7.12.13"
-    "@types/jest" "^26.0.20"
-    "@vue/cli-shared-utils" "^5.0.0-beta.2"
-    babel-jest "^26.6.3"
+    "@babel/plugin-transform-modules-commonjs" "^7.15.0"
+    "@types/jest" "^27.0.1"
+    "@vue/cli-shared-utils" "^5.0.0-rc.2"
+    babel-jest "^27.1.0"
     deepmerge "^4.2.2"
-    jest "^26.6.3"
+    jest "^27.1.0"
     jest-serializer-vue "^2.0.2"
     jest-transform-stub "^2.0.0"
-    jest-watch-typeahead "^0.6.1"
+    jest-watch-typeahead "^1.0.0"
 
-"@vue/cli-shared-utils@^5.0.0-beta.2":
-  version "5.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-5.0.0-beta.2.tgz#b7bad21e3b13b5dbb985c07bef14dcbd669d90da"
-  integrity sha512-gYznhuPIsSpX6M0LE6GTOsy/V9xG0qEZoBw9bSCC5/eEg+JOwoBXqDdqOXrTPEc6oc0zjPM3lk9zlwsJQ4cUcg==
+"@vue/cli-shared-utils@^5.0.0-rc.2":
+  version "5.0.0-rc.2"
+  resolved "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-5.0.0-rc.2.tgz#6f21858524cdc78e645d848a5b7dacbb7c994a99"
+  integrity sha512-jzSZPj92T3i23XrbCW2HNmsI6LG4P5kmerneUtTF8uwMMi540PQePA+clxUmRyNnhVJN9KnWQc10Y2+jwfXkKA==
   dependencies:
-    chalk "^4.1.0"
+    chalk "^4.1.2"
     execa "^1.0.0"
     joi "^17.4.0"
     launch-editor "^2.2.1"
@@ -1249,126 +1483,110 @@
     semver "^7.3.4"
     strip-ansi "^6.0.0"
 
-"@vue/compiler-core@3.2.12":
-  version "3.2.12"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.12.tgz#23998d6986a45e1ab0424130cc0ad00e33da1101"
-  integrity sha512-IGJ0JmrAaAl5KBBegPAKkoXvsfDFgN/h7K1t/+0MxqpZF1fTDVUOp3tG7q9gWa7fwzGEaIsPhjtT5C3qztdLKg==
-  dependencies:
-    "@babel/parser" "^7.15.0"
-    "@babel/types" "^7.15.0"
-    "@vue/shared" "3.2.12"
-    estree-walker "^2.0.2"
-    source-map "^0.6.1"
-
-"@vue/compiler-core@3.2.13":
-  version "3.2.13"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.13.tgz#901268088b98a53c43be0f02bfa0e3a389ad6bf4"
-  integrity sha512-H8MUuKVCfAT6C0vth/+1LAriKnM+RTFo/5MoFycwRPwworTvkpWq/EuGoIXdLBblo8Y2/bNsOmIBEEoOtrb/bQ==
+"@vue/compiler-core@3.2.29", "@vue/compiler-core@^3.2.27":
+  version "3.2.29"
+  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.29.tgz#b06097ab8ff0493177c68c5ea5b63d379a061097"
+  integrity sha512-RePZ/J4Ub3sb7atQw6V6Rez+/5LCRHGFlSetT3N4VMrejqJnNPXKUt5AVm/9F5MJriy2w/VudEIvgscCfCWqxw==
   dependencies:
-    "@babel/parser" "^7.15.0"
-    "@vue/shared" "3.2.13"
+    "@babel/parser" "^7.16.4"
+    "@vue/shared" "3.2.29"
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.2.12", "@vue/compiler-dom@^3.2.6":
-  version "3.2.12"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.12.tgz#d6ba00114e73adb8b18940c3ff18797cc2b0514f"
-  integrity sha512-MulvKilA2USm8ubPfvXvNY55HVTn+zHERsXeNg437TXrmM4FRCis6zjWW47QZ3ZyxEkCdqOmuiFCtXbpnuthyw==
-  dependencies:
-    "@vue/compiler-core" "3.2.12"
-    "@vue/shared" "3.2.12"
-
-"@vue/compiler-dom@3.2.13":
-  version "3.2.13"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.13.tgz#028982494fb9d97807d5275b42355732686f8ed7"
-  integrity sha512-5+2dYgQyNzM97EEgbdAusUpLjulcKkvLM26jOGpd14+qwEcW/KCnns5DGjlZD/tsdEwToOoTDCm+mjx7cO/G1Q==
-  dependencies:
-    "@vue/compiler-core" "3.2.13"
-    "@vue/shared" "3.2.13"
-
-"@vue/compiler-sfc@^3.2.13":
-  version "3.2.13"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.13.tgz#a38475048aad9c96cf04dfe635129b417e0f9295"
-  integrity sha512-3j970d969aOILykcTstdihP33xH1Onm0wsvcl+rGv9AGxivB9xicRxBw93HCIA4dAPivr42WjHEoci9q2/85uw==
-  dependencies:
-    "@babel/parser" "^7.15.0"
-    "@vue/compiler-core" "3.2.13"
-    "@vue/compiler-dom" "3.2.13"
-    "@vue/compiler-ssr" "3.2.13"
-    "@vue/ref-transform" "3.2.13"
-    "@vue/shared" "3.2.13"
+"@vue/compiler-dom@3.2.29", "@vue/compiler-dom@^3.2.27":
+  version "3.2.29"
+  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.29.tgz#ad0ead405bd2f2754161335aad9758aa12430715"
+  integrity sha512-y26vK5khdNS9L3ckvkqJk/78qXwWb75Ci8iYLb67AkJuIgyKhIOcR1E8RIt4mswlVCIeI9gQ+fmtdhaiTAtrBQ==
+  dependencies:
+    "@vue/compiler-core" "3.2.29"
+    "@vue/shared" "3.2.29"
+
+"@vue/compiler-sfc@3.2.29", "@vue/compiler-sfc@^3.2.26":
+  version "3.2.29"
+  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.29.tgz#f76d556cd5fca6a55a3ea84c88db1a2a53a36ead"
+  integrity sha512-X9+0dwsag2u6hSOP/XsMYqFti/edvYvxamgBgCcbSYuXx1xLZN+dS/GvQKM4AgGS4djqo0jQvWfIXdfZ2ET68g==
+  dependencies:
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.29"
+    "@vue/compiler-dom" "3.2.29"
+    "@vue/compiler-ssr" "3.2.29"
+    "@vue/reactivity-transform" "3.2.29"
+    "@vue/shared" "3.2.29"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
     postcss "^8.1.10"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.2.13":
-  version "3.2.13"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.13.tgz#98434672e0b488c2affa4b0570731d6be5cda187"
-  integrity sha512-ZbO6uDhUWTdKBRguYNEZXj2FU3nh1cudoHBiidbxj9q5J0tVT+j1PSVFAXPq6SquUBdJpa4HvGkQ5kQzv6upXg==
+"@vue/compiler-ssr@3.2.29":
+  version "3.2.29"
+  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.29.tgz#37b15b32dcd2f6b410bb61fca3f37b1a92b7eb1e"
+  integrity sha512-LrvQwXlx66uWsB9/VydaaqEpae9xtmlUkeSKF6aPDbzx8M1h7ukxaPjNCAXuFd3fUHblcri8k42lfimHfzMICA==
   dependencies:
-    "@vue/compiler-dom" "3.2.13"
-    "@vue/shared" "3.2.13"
+    "@vue/compiler-dom" "3.2.29"
+    "@vue/shared" "3.2.29"
 
 "@vue/devtools-api@^6.0.0-beta.14":
   version "6.0.0-beta.14"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.14.tgz#6ed2d6f8d66a9256c9ad04bfff08309ba87b9723"
   integrity sha512-44fPrrN1cqcs6bFkT0C+yxTM6PZXLbR+ESh1U1j8UD22yO04gXvxH62HApMjLbS3WqJO/iCNC+CYT+evPQh2EQ==
 
-"@vue/reactivity@3.2.12", "@vue/reactivity@^3.2.6":
-  version "3.2.12"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.12.tgz#b482a737cbdc891f9b1ec3100f3c1804b56d080b"
-  integrity sha512-Lr5CTQjFm5mT/6DGnVNhptmba/Qg1DbD6eNWWmiHLMlpPt4q2ww9A2orEjVw0qNcdTJ04JLPEVAz5jhTZTCfIg==
-  dependencies:
-    "@vue/shared" "3.2.12"
-
-"@vue/ref-transform@3.2.13":
-  version "3.2.13"
-  resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.13.tgz#6adfce50d388cc03683d9d2ba58f3a3bde5166f4"
-  integrity sha512-q6GXHZFzXjpx1K3UFRF8fa+xSmD9xV/FjhGzTNnfrryBr8tBUNYgP2f0s5K5N+21Ay7+MlQ1XXMUp8McGvsryQ==
+"@vue/reactivity-transform@3.2.29":
+  version "3.2.29"
+  resolved "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.29.tgz#a08d606e10016b7cf588d1a43dae4db2953f9354"
+  integrity sha512-YF6HdOuhdOw6KyRm59+3rML8USb9o8mYM1q+SH0G41K3/q/G7uhPnHGKvspzceD7h9J3VR1waOQ93CUZj7J7OA==
   dependencies:
-    "@babel/parser" "^7.15.0"
-    "@vue/compiler-core" "3.2.13"
-    "@vue/shared" "3.2.13"
+    "@babel/parser" "^7.16.4"
+    "@vue/compiler-core" "3.2.29"
+    "@vue/shared" "3.2.29"
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/runtime-core@3.2.12":
-  version "3.2.12"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.12.tgz#422662fd5b85f787222d2aea840264ba97e84a13"
-  integrity sha512-LO+ztgcmsomavYUaSq7BTteh8pmnUmvUnXUFVYdlcg3VCdYRS0ImlclpYsNHqjAk2gU+H09dr2PP0kL961xUfQ==
+"@vue/reactivity@3.2.29", "@vue/reactivity@^3.2.27":
+  version "3.2.29"
+  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.29.tgz#afdc9c111d4139b14600be17ad80267212af6052"
+  integrity sha512-Ryhb6Gy62YolKXH1gv42pEqwx7zs3n8gacRVZICSgjQz8Qr8QeCcFygBKYfJm3o1SccR7U+bVBQDWZGOyG1k4g==
+  dependencies:
+    "@vue/shared" "3.2.29"
+
+"@vue/runtime-core@3.2.29":
+  version "3.2.29"
+  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.29.tgz#fb8577b2fcf52e8d967bd91cdf49ab9fb91f9417"
+  integrity sha512-VMvQuLdzoTGmCwIKTKVwKmIL0qcODIqe74JtK1pVr5lnaE0l25hopodmPag3RcnIcIXe+Ye3B2olRCn7fTCgig==
   dependencies:
-    "@vue/reactivity" "3.2.12"
-    "@vue/shared" "3.2.12"
+    "@vue/reactivity" "3.2.29"
+    "@vue/shared" "3.2.29"
 
-"@vue/runtime-dom@3.2.12":
-  version "3.2.12"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.12.tgz#d9fe865dca36f9ca33ba327afdeb89ae2aa03f4c"
-  integrity sha512-+NSDqivgihvoPYbKFDmzFu1tW7SOzwc7r0b7T8vsJtooVPGxwtfAFZ6wyLtteOXXrCpyTR3kpyTCIp31uY7aJg==
+"@vue/runtime-dom@3.2.29":
+  version "3.2.29"
+  resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.29.tgz#35e9a2bf04ef80b86ac2ca0e7b2ceaccf1e18f01"
+  integrity sha512-YJgLQLwr+SQyORzTsBQLL5TT/5UiV83tEotqjL7F9aFDIQdFBTCwpkCFvX9jqwHoyi9sJqM9XtTrMcc8z/OjPA==
   dependencies:
-    "@vue/runtime-core" "3.2.12"
-    "@vue/shared" "3.2.12"
+    "@vue/runtime-core" "3.2.29"
+    "@vue/shared" "3.2.29"
     csstype "^2.6.8"
 
-"@vue/shared@3.2.12", "@vue/shared@^3.2.6":
-  version "3.2.12"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.12.tgz#304064a4b56fc6c7b9169d80e9ee62ecb4bf0a1c"
-  integrity sha512-5CkaifUCJwcTuru7FDwKFacPJuEoGUTw0LKSa5bw40B23s0TS+MGlYR1285nbV/ju3QUGlA6d6PD+GJkWy7uFg==
+"@vue/server-renderer@3.2.29":
+  version "3.2.29"
+  resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.29.tgz#ea6afa361b9c781a868c8da18c761f9b7bc89102"
+  integrity sha512-lpiYx7ciV7rWfJ0tPkoSOlLmwqBZ9FTmQm33S+T4g0j1fO/LmhJ9b9Ctl1o5xvIFVDk9QkSUWANZn7H2pXuxVw==
+  dependencies:
+    "@vue/compiler-ssr" "3.2.29"
+    "@vue/shared" "3.2.29"
 
-"@vue/shared@3.2.13":
-  version "3.2.13"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.13.tgz#c830ef966d7af12598e0ea862a55695ea589cd47"
-  integrity sha512-F/gs3kHQ8Xeo24F6EImOvBiIoYQsBjF9qoLzvk+LHxYN6ZhIDEL1NWrBFYzdFQ7NphjEYd4EvPZ+Qee+WX8P6w==
+"@vue/shared@3.2.29", "@vue/shared@^3.2.27":
+  version "3.2.29"
+  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.29.tgz#07dac7051117236431d2f737d16932aa38bbb925"
+  integrity sha512-BjNpU8OK6Z0LVzGUppEk0CMYm/hKDnZfYdjSmPOs0N+TR1cLKJAkDwW8ASZUvaaSLEi6d3hVM7jnWnX+6yWnHw==
 
 "@vue/test-utils@^2.0.0-rc.0", "@vue/test-utils@^2.0.0-rc.6":
   version "2.0.0-rc.6"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-rc.6.tgz#d0aac24d20450d379e183f70542c0822670b8783"
   integrity sha512-0cnQBVH589PwgqWpyv1fgCAz+9Ram/MsvN3ZEAEVXi1aPuhUa22EudGc0WezQ9PKwR+L40NrBmt3JBXE2tSRRQ==
 
-"@vue/vue3-jest@^27.0.0-alpha.1":
-  version "27.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@vue/vue3-jest/-/vue3-jest-27.0.0-alpha.1.tgz#6ab3636bb24f95d053ae485f4558152c1ea5eb58"
-  integrity sha512-V4erTP0LvI0B4kM/cgSiusF0yahByrqJCAUQKDvpW3104J4njoNUY1HwSMqvv5SASOrzxer4ui3EDWyl8Pw2Lg==
+"@vue/vue3-jest@^27.0.0-alpha.4":
+  version "27.0.0-alpha.4"
+  resolved "https://registry.npmjs.org/@vue/vue3-jest/-/vue3-jest-27.0.0-alpha.4.tgz#eb2e5eba1c7a0ae39e457ba2df7ac891a79a2402"
+  integrity sha512-RgEwjNvwdWmRngHqgt957fLT6riOkv/Kyl0ra8jo0Z8Dgosmu17dNqgBzLn9fTgNlTbHv4TQQdLRjczr+z2mlA==
   dependencies:
     "@babel/plugin-transform-modules-commonjs" "^7.2.0"
     chalk "^2.1.0"
@@ -1395,7 +1613,7 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-jsx@^5.2.0, acorn-jsx@^5.3.1:
+acorn-jsx@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
   integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
@@ -1414,7 +1632,7 @@ acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.0:
+acorn@^7.0.0, acorn@^7.1.1:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -1424,6 +1642,11 @@ acorn@^8.2.4:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.4.0.tgz#af53266e698d7cffa416714b503066a82221be60"
   integrity sha512-ULr0LDaEqQrMFGyQ3bhJkLsbtrQ8QibAseGZeaSUiT/6zb9IvIkomWHJIvgvwad+hinRAgsI51JcWk2yvwyL+w==
 
+acorn@^8.7.0:
+  version "8.7.0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
+  integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -1441,16 +1664,6 @@ ajv@^6.10.0, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.1:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.5.0.tgz#695528274bcb5afc865446aa275484049a18ae4b"
-  integrity sha512-Y2l399Tt1AguU3BPRP9Fn4eN+Or+StUGWCUpbnFyXSo8NZ9S4uj+AG2pjs5apK+ZMOwYOz1+a+VKvKH7CudXgQ==
-  dependencies:
-    fast-deep-equal "^3.1.1"
-    json-schema-traverse "^1.0.0"
-    require-from-string "^2.0.2"
-    uri-js "^4.2.2"
-
 ansi-align@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
@@ -1458,11 +1671,6 @@ ansi-align@^3.0.0:
   dependencies:
     string-width "^3.0.0"
 
-ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
-
 ansi-escapes@^4.2.1, ansi-escapes@^4.3.1:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
@@ -1480,6 +1688,16 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
+  integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
+
 ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
@@ -1499,14 +1717,6 @@ ansi-styles@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
-anymatch@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
-  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
-  dependencies:
-    micromatch "^3.1.4"
-    normalize-path "^2.1.1"
-
 anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
@@ -1527,6 +1737,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 aria-query@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -1535,50 +1750,30 @@ aria-query@^4.2.2:
     "@babel/runtime" "^7.10.2"
     "@babel/runtime-corejs3" "^7.10.2"
 
-arr-diff@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
-  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
-
-arr-flatten@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
-  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
-
-arr-union@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
-  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
-
-array-includes@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
-  integrity sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==
+array-includes@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.4.tgz#f5b493162c760f3539631f005ba2bb46acb45ba9"
+  integrity sha512-ZTNSQkmWumEbiHO2GF4GmWxYVTiQyJy2XOTa15sdQSrvKn7l+180egQMqlrMOUMCyLMD7pmyQe4mMDUT6Behrw==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.2"
+    es-abstract "^1.19.1"
     get-intrinsic "^1.1.1"
-    is-string "^1.0.5"
+    is-string "^1.0.7"
 
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
-array-unique@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
-  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
-
-array.prototype.flat@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz#6ef638b43312bd401b4c6199fdec7e2dc9e9a123"
-  integrity sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==
+array.prototype.flat@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz#07e0975d84bbc7c48cd1879d609e682598d33e13"
+  integrity sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
+    es-abstract "^1.19.0"
 
 asap@~2.0.3:
   version "2.0.6"
@@ -1590,16 +1785,6 @@ assert-never@^1.2.1:
   resolved "https://registry.yarnpkg.com/assert-never/-/assert-never-1.2.1.tgz#11f0e363bf146205fb08193b5c7b90f4d1cf44fe"
   integrity sha512-TaTivMB6pYI1kXwrFlEhLeGfOqoDNdTxjCdwRfFFkEA30Eu+k48W34nlok2EYWJfFFzqaEmichdNM7th6M5HNw==
 
-assign-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
-  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
-
-astral-regex@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
-  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
-
 async-retry@1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/async-retry/-/async-retry-1.3.3.tgz#0e7f36c04d8478e7a58bdbed80cedf977785f280"
@@ -1617,28 +1802,28 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@^10.3.4:
-  version "10.3.4"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.3.4.tgz#29efe5d19f51c281953178ddb5b84c5f1ca24c86"
-  integrity sha512-EKjKDXOq7ug+jagLzmnoTRpTT0q1KVzEJqrJd0hCBa7FiG0WbFOBCcJCy2QkW1OckpO3qgttA1aWjVbeIPAecw==
+autoprefixer@^10.4.0:
+  version "10.4.2"
+  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.2.tgz#25e1df09a31a9fba5c40b578936b90d35c9d4d3b"
+  integrity sha512-9fOPpHKuDW1w/0EKfRmVnxTDt8166MAnLI3mgZ1JCnhNtYWxcJ6Ud5CO/AVOZi/AvFa8DY9RTy3h3+tFBlrrdQ==
   dependencies:
-    browserslist "^4.16.8"
-    caniuse-lite "^1.0.30001252"
-    colorette "^1.3.0"
-    fraction.js "^4.1.1"
+    browserslist "^4.19.1"
+    caniuse-lite "^1.0.30001297"
+    fraction.js "^4.1.2"
     normalize-range "^0.1.2"
-    postcss-value-parser "^4.1.0"
-
-babel-jest@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
-  integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
-  dependencies:
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/babel__core" "^7.1.7"
-    babel-plugin-istanbul "^6.0.0"
-    babel-preset-jest "^26.6.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
+babel-jest@^27.1.0, babel-jest@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/babel-jest/-/babel-jest-27.4.6.tgz#4d024e69e241cdf4f396e453a07100f44f7ce314"
+  integrity sha512-qZL0JT0HS1L+lOuH+xC2DVASR3nunZi/ozGhpgauJHgmI7f8rudxf6hUjEHympdQ/J64CdKmPkgfJ+A3U6QCrg==
+  dependencies:
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/babel__core" "^7.1.14"
+    babel-plugin-istanbul "^6.1.1"
+    babel-preset-jest "^27.4.0"
     chalk "^4.0.0"
     graceful-fs "^4.2.4"
     slash "^3.0.0"
@@ -1650,21 +1835,21 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-istanbul@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
-  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
+babel-plugin-istanbul@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@istanbuljs/load-nyc-config" "^1.0.0"
     "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-instrument "^4.0.0"
+    istanbul-lib-instrument "^5.0.4"
     test-exclude "^6.0.0"
 
-babel-plugin-jest-hoist@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz#8185bd030348d254c6d7dd974355e6a28b21e62d"
-  integrity sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==
+babel-plugin-jest-hoist@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.4.0.tgz#d7831fc0f93573788d80dee7e682482da4c730d6"
+  integrity sha512-Jcu7qS4OX5kTWBc45Hz7BMmgXuJqRnhatqpUhnzGC3OBYpOmf2tv6jFNwZpwM7wU7MUuv2r9IPS/ZlYOuburVw==
   dependencies:
     "@babel/template" "^7.3.3"
     "@babel/types" "^7.3.3"
@@ -1689,12 +1874,12 @@ babel-preset-current-node-syntax@^1.0.0:
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-top-level-await" "^7.8.3"
 
-babel-preset-jest@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz#747872b1171df032252426586881d62d31798fee"
-  integrity sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==
+babel-preset-jest@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-27.4.0.tgz#70d0e676a282ccb200fbabd7f415db5fdf393bca"
+  integrity sha512-NK4jGYpnBvNxcGo7/ZpZJr51jCGT+3bwwpVIDY2oNfTxJJldRtB4VAcYdgp1loDE50ODuTu+yBjpMAswv5tlpg==
   dependencies:
-    babel-plugin-jest-hoist "^26.6.2"
+    babel-plugin-jest-hoist "^27.4.0"
     babel-preset-current-node-syntax "^1.0.0"
 
 babel-walk@3.0.0-canary-5:
@@ -1714,19 +1899,6 @@ base64-js@^1.3.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-base@^0.11.1:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
-  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
-  dependencies:
-    cache-base "^1.0.1"
-    class-utils "^0.3.5"
-    component-emitter "^1.2.1"
-    define-property "^1.0.0"
-    isobject "^3.0.1"
-    mixin-deep "^1.2.0"
-    pascalcase "^0.1.1"
-
 before-after-hook@^2.2.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.2.tgz#a6e8ca41028d90ee2c24222f201c90956091613e"
@@ -1778,22 +1950,6 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^2.3.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
-  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
-  dependencies:
-    arr-flatten "^1.1.0"
-    array-unique "^0.3.2"
-    extend-shallow "^2.0.1"
-    fill-range "^4.0.0"
-    isobject "^3.0.1"
-    repeat-element "^1.1.2"
-    snapdragon "^0.8.1"
-    snapdragon-node "^2.0.1"
-    split-string "^3.0.2"
-    to-regex "^3.0.1"
-
 braces@^3.0.1, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -1817,16 +1973,16 @@ browserslist@^4.16.6:
     escalade "^3.1.1"
     node-releases "^1.1.71"
 
-browserslist@^4.16.8:
-  version "4.17.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.17.0.tgz#1fcd81ec75b41d6d4994fb0831b92ac18c01649c"
-  integrity sha512-g2BJ2a0nEYvEFQC208q8mVAhfNwpZ5Mu8BwgtCdZKO3qx98HChmeg448fPdUzld8aFmfLgVh7yymqV+q1lJZ5g==
+browserslist@^4.17.5, browserslist@^4.19.1:
+  version "4.19.1"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz#4ac0435b35ab655896c31d53018b6dd5e9e4c9a3"
+  integrity sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==
   dependencies:
-    caniuse-lite "^1.0.30001254"
-    colorette "^1.3.0"
-    electron-to-chromium "^1.3.830"
+    caniuse-lite "^1.0.30001286"
+    electron-to-chromium "^1.4.17"
     escalade "^3.1.1"
-    node-releases "^1.1.75"
+    node-releases "^2.0.1"
+    picocolors "^1.0.0"
 
 bs-logger@0.x:
   version "0.2.6"
@@ -1842,11 +1998,6 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
-buffer-from@1.x:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
-  integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
-
 buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
@@ -1860,26 +2011,6 @@ buffer@^5.5.0:
     base64-js "^1.3.1"
     ieee754 "^1.1.13"
 
-bytes@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
-  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
-
-cache-base@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
-  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
-  dependencies:
-    collection-visit "^1.0.0"
-    component-emitter "^1.2.1"
-    get-value "^2.0.6"
-    has-value "^1.0.0"
-    isobject "^3.0.1"
-    set-value "^2.0.0"
-    to-object-path "^0.3.0"
-    union-value "^1.0.0"
-    unset-value "^1.0.0"
-
 cacheable-lookup@^5.0.3:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz#5a6b865b2c44357be3d5ebc2a467b032719a7005"
@@ -1898,9 +2029,9 @@ cacheable-request@^6.0.0:
     normalize-url "^4.1.0"
     responselike "^1.0.2"
 
-cacheable-request@^7.0.1:
+cacheable-request@^7.0.2:
   version "7.0.2"
-  resolved "https://registry.yarnpkg.com/cacheable-request/-/cacheable-request-7.0.2.tgz#ea0d0b889364a25854757301ca12b2da77f91d27"
+  resolved "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.2.tgz#ea0d0b889364a25854757301ca12b2da77f91d27"
   integrity sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==
   dependencies:
     clone-response "^1.0.2"
@@ -1929,12 +2060,12 @@ camelcase-css@^2.0.1:
   resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-camelcase@^5.0.0, camelcase@^5.3.1:
+camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-camelcase@^6.0.0, camelcase@^6.2.0:
+camelcase@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
@@ -1944,17 +2075,10 @@ caniuse-lite@^1.0.30001219:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz#4b7783661515b8e7151fc6376cfd97f0e427b9e5"
   integrity sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw==
 
-caniuse-lite@^1.0.30001252, caniuse-lite@^1.0.30001254:
-  version "1.0.30001258"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001258.tgz#b604eed80cc54a578e4bf5a02ae3ed49f869d252"
-  integrity sha512-RBByOG6xWXUp0CR2/WU2amXz3stjKpSl5J1xU49F1n2OxD//uBZO4wCKUiG+QMGf7CHGfDDcqoKriomoGVxTeA==
-
-capture-exit@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
-  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
-  dependencies:
-    rsvp "^4.8.4"
+caniuse-lite@^1.0.30001286, caniuse-lite@^1.0.30001297:
+  version "1.0.30001307"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001307.tgz#27a67f13ebc4aa9c977e6b8256a11d5eafb30f27"
+  integrity sha512-+MXEMczJ4FuxJAUp0jvAl6Df0NI/OfW1RWEE61eSmzS7hw6lz4IKutbhbXendwq8BljfFuHtu26VWsg4afQ7Ng==
 
 chalk@4.1.2, chalk@^4.1.1, chalk@^4.1.2:
   version "4.1.2"
@@ -1986,6 +2110,11 @@ char-regex@^1.0.2:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
+char-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/char-regex/-/char-regex-2.0.0.tgz#16f98f3f874edceddd300fda5d58df380a7641a6"
+  integrity sha512-oGu2QekBMXgyQNWPDRQ001bjvDnZe4/zBTz37TMbiKz1NbNiyiH5hRkobe7npRN6GfbGbxMYFck/vQ1r9c1VMA==
+
 character-parser@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0"
@@ -1998,10 +2127,10 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chokidar@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
-  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+chokidar@^3.5.3:
+  version "3.5.3"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
+  integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
   dependencies:
     anymatch "~3.1.2"
     braces "~3.0.2"
@@ -2023,20 +2152,15 @@ ci-info@^3.1.1:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.2.0.tgz#2876cb948a498797b5236f0095bc057d0dca38b6"
   integrity sha512-dVqRX7fLUm8J6FgHJ418XuIgDLZDkYcDFTeL6TA2gt5WlIZUQrrH6EZrNClwT/H0FateUsZkGIOPRrLbP+PR9A==
 
-cjs-module-lexer@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz#4186fcca0eae175970aee870b9fe2d6cf8d5655f"
-  integrity sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==
+ci-info@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz#b4ed1fb6818dea4803a55c623041f9165d2066b2"
+  integrity sha512-riT/3vI5YpVH6/qomlDnJow6TBee2PBKSEpx3O32EGPYbWGIRsIlGRms3Sm74wYE1JMo8RnO04Hb12+v1J5ICw==
 
-class-utils@^0.3.5:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
-  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
-  dependencies:
-    arr-union "^3.1.0"
-    define-property "^0.2.5"
-    isobject "^3.0.0"
-    static-extend "^0.1.1"
+cjs-module-lexer@^1.0.0:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
+  integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
 cli-boxes@^2.2.1:
   version "2.2.1"
@@ -2060,14 +2184,14 @@ cli-width@^3.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
   integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
 
-cliui@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
-  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
   dependencies:
     string-width "^4.2.0"
     strip-ansi "^6.0.0"
-    wrap-ansi "^6.2.0"
+    wrap-ansi "^7.0.0"
 
 clone-response@^1.0.2:
   version "1.0.2"
@@ -2091,14 +2215,6 @@ collect-v8-coverage@^1.0.0:
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
   integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
 
-collection-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
-  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
-  dependencies:
-    map-visit "^1.0.0"
-    object-visit "^1.0.0"
-
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2118,37 +2234,16 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@^1.1.4, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.6.0.tgz#c3915f61fe267672cb7e1e064c9d692219f6c312"
-  integrity sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/color/-/color-4.0.1.tgz#21df44cd10245a91b1ccf5ba031609b0e10e7d67"
-  integrity sha512-rpZjOKN5O7naJxkH2Rx1sZzzBgaiWECc6BYXjeCE6kF0kcASJYbUq02u7JqIHwCb/j3NhV+QhRL2683aICeGZA==
-  dependencies:
-    color-convert "^2.0.1"
-    color-string "^1.6.0"
-
 colorette@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
-colorette@^1.3.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
-  integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
-
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -2161,16 +2256,6 @@ commander@^2.19.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
-commander@^6.0.0:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
-  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
-
-component-emitter@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
-  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -2225,11 +2310,6 @@ convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
-copy-descriptor@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
-  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
-
 core-js-pure@^3.14.0:
   version "3.14.0"
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.14.0.tgz#72bcfacba74a65ffce04bf94ae91d966e80ee553"
@@ -2271,16 +2351,6 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-color-names@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
-
-css-unit-converter@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
-  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
-
 css@^2.1.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
@@ -2327,21 +2397,21 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-debug@4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+debug@4, debug@^4.1.0, debug@^4.1.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
   integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
   dependencies:
     ms "2.1.2"
 
-debug@4.3.2, debug@^4.3.1:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b"
-  integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==
+debug@4.3.3, debug@^4.3.2:
+  version "4.3.3"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
+  integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
   dependencies:
     ms "2.1.2"
 
-debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
+debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -2355,11 +2425,6 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-decamelize@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-  integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
-
 decimal.js@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.1.tgz#238ae7b0f0c793d3e3cea410108b35a2c01426a3"
@@ -2384,6 +2449,11 @@ decompress-response@^6.0.0:
   dependencies:
     mimic-response "^3.1.0"
 
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
+
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -2428,29 +2498,7 @@ define-properties@^1.1.3:
   dependencies:
     object-keys "^1.0.12"
 
-define-property@^0.2.5:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
-  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
-  dependencies:
-    is-descriptor "^0.1.0"
-
-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
-  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
-  dependencies:
-    is-descriptor "^1.0.0"
-
-define-property@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
-  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
-  dependencies:
-    is-descriptor "^1.0.2"
-    isobject "^3.0.1"
-
-defined@^1.0.0:
+defined@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
   integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
@@ -2460,14 +2508,6 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
-deprecated-obj@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/deprecated-obj/-/deprecated-obj-2.0.0.tgz#e6ba93a3989f6ed18d685e7d99fb8d469b4beffc"
-  integrity sha512-CkdywZC2rJ8RGh+y3MM1fw1EJ4oO/oNExGbRFv0AQoMS+faTd3nO7slYjkj/6t8OnIMUE+wxh6G97YHhK1ytrw==
-  dependencies:
-    flat "^5.0.2"
-    lodash "^4.17.20"
-
 deprecation@^2.0.0, deprecation@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
@@ -2492,10 +2532,10 @@ didyoumean@^1.2.2:
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
-diff-sequences@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
-  integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
+diff-sequences@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.npmjs.org/diff-sequences/-/diff-sequences-27.4.0.tgz#d783920ad8d06ec718a060d00196dfef25b132a5"
+  integrity sha512-YqiQzkrsmHMH5uuh8OdQFU9/ZpADnwzml8z0O5HvRNda+5UZsaX/xN+AAxfR2hWq1Y7HZnAzO9J5lJXOuDz2Ww==
 
 dir-glob@^3.0.1:
   version "3.0.1"
@@ -2554,17 +2594,24 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-domhandler@^4.0.0, domhandler@^4.2.0:
+domhandler@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.0.tgz#f9768a5f034be60a89a27c2e4d0f74eba0d8b059"
   integrity sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==
   dependencies:
     domelementtype "^2.2.0"
 
-domutils@^2.5.2:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442"
-  integrity sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==
+domhandler@^4.2.2, domhandler@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
+  integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
   dependencies:
     dom-serializer "^1.0.1"
     domelementtype "^2.2.0"
@@ -2602,15 +2649,15 @@ electron-to-chromium@^1.3.723:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz#0728587f1b9b970ec9ffad932496429aef750d09"
   integrity sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==
 
-electron-to-chromium@^1.3.830:
-  version "1.3.843"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.843.tgz#671489bd2f59fd49b76adddc1aa02c88cd38a5c0"
-  integrity sha512-OWEwAbzaVd1Lk9MohVw8LxMXFlnYd9oYTYxfX8KS++kLLjDfbovLOcEEXwRhG612dqGQ6+44SZvim0GXuBRiKg==
+electron-to-chromium@^1.4.17:
+  version "1.4.64"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.64.tgz#8b1b5372f77ca208f2c498c6490da0e51176bd81"
+  integrity sha512-8mec/99xgLUZCIZZq3wt61Tpxg55jnOSpxGYapE/1Ma9MpFEYYaz4QNYm0CM1rrnCo7i3FRHhbaWjeCLsveGjQ==
 
-emittery@^0.7.1:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
-  integrity sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==
+emittery@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz#bb23cc86d03b30aa75a7f734819dee2e1ba70860"
+  integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
 
 emmet@^2.3.0:
   version "2.3.4"
@@ -2642,18 +2689,16 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enquirer@^2.3.5:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
-  integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
-  dependencies:
-    ansi-colors "^4.1.1"
-
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4"
+  integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -2661,32 +2706,10 @@ error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0.tgz#ab80b359eecb7ede4c298000390bc5ac3ec7b5a4"
-  integrity sha512-LJzK7MrQa8TS0ja2w3YNLzUgJCGPdPOV1yVvezjNnS89D+VR08+Szt2mz3YB2Dck/+w5tfIq/RoUAFqJJGM2yw==
-  dependencies:
-    call-bind "^1.0.2"
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    get-intrinsic "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.2"
-    is-callable "^1.2.3"
-    is-negative-zero "^2.0.1"
-    is-regex "^1.1.2"
-    is-string "^1.0.5"
-    object-inspect "^1.9.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.2"
-    string.prototype.trimend "^1.0.4"
-    string.prototype.trimstart "^1.0.4"
-    unbox-primitive "^1.0.0"
-
-es-abstract@^1.18.2:
-  version "1.18.6"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.6.tgz#2c44e3ea7a6255039164d26559777a6d978cb456"
-  integrity sha512-kAeIT4cku5eNLNuUKhlmtuk1/TRZvQoYccn6TO0cSVdf1kzB0T7+dYuVK9MWM7l+/53W2Q8M7N2c6MQvhXFcUQ==
+es-abstract@^1.19.0, es-abstract@^1.19.1:
+  version "1.19.1"
+  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.19.1.tgz#d4885796876916959de78edaa0df456627115ec3"
+  integrity sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==
   dependencies:
     call-bind "^1.0.2"
     es-to-primitive "^1.2.1"
@@ -2699,7 +2722,9 @@ es-abstract@^1.18.2:
     is-callable "^1.2.4"
     is-negative-zero "^2.0.1"
     is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.1"
     is-string "^1.0.7"
+    is-weakref "^1.0.1"
     object-inspect "^1.11.0"
     object-keys "^1.1.1"
     object.assign "^4.1.2"
@@ -2716,10 +2741,113 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-esbuild@^0.12.17:
-  version "0.12.28"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.28.tgz#84da0d2a0d0dee181281545271e0d65cf6fab1ef"
-  integrity sha512-pZ0FrWZXlvQOATlp14lRSk1N9GkeJ3vLIwOcUoo3ICQn9WNR4rWoNi81pbn6sC1iYUy7QPqNzI3+AEzokwyVcA==
+esbuild-android-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz#3fc3ff0bab76fe35dd237476b5d2b32bb20a3d44"
+  integrity sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==
+
+esbuild-darwin-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz#8e9169c16baf444eacec60d09b24d11b255a8e72"
+  integrity sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==
+
+esbuild-darwin-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz#1b07f893b632114f805e188ddfca41b2b778229a"
+  integrity sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==
+
+esbuild-freebsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz#0b8b7eca1690c8ec94c75680c38c07269c1f4a85"
+  integrity sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==
+
+esbuild-freebsd-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz#2e1a6c696bfdcd20a99578b76350b41db1934e52"
+  integrity sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==
+
+esbuild-linux-32@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz#6fd39f36fc66dd45b6b5f515728c7bbebc342a69"
+  integrity sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==
+
+esbuild-linux-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz#9cb8e4bcd7574e67946e4ee5f1f1e12386bb6dd3"
+  integrity sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==
+
+esbuild-linux-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz#3891aa3704ec579a1b92d2a586122e5b6a2bfba1"
+  integrity sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==
+
+esbuild-linux-arm@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz#8a00e99e6a0c6c9a6b7f334841364d8a2b4aecfe"
+  integrity sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==
+
+esbuild-linux-mips64le@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz#36b07cc47c3d21e48db3bb1f4d9ef8f46aead4f7"
+  integrity sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==
+
+esbuild-linux-ppc64le@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz#f7e6bba40b9a11eb9dcae5b01550ea04670edad2"
+  integrity sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==
+
+esbuild-netbsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz#a2fedc549c2b629d580a732d840712b08d440038"
+  integrity sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==
+
+esbuild-openbsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz#b22c0e5806d3a1fbf0325872037f885306b05cd7"
+  integrity sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==
+
+esbuild-sunos-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz#d0b6454a88375ee8d3964daeff55c85c91c7cef4"
+  integrity sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==
+
+esbuild-windows-32@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz#c96d0b9bbb52f3303322582ef8e4847c5ad375a7"
+  integrity sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==
+
+esbuild-windows-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz#1f79cb9b1e1bb02fb25cd414cb90d4ea2892c294"
+  integrity sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==
+
+esbuild-windows-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz#482173070810df22a752c686509c370c3be3b3c3"
+  integrity sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==
+
+esbuild@^0.13.12:
+  version "0.13.15"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.13.15.tgz#db56a88166ee373f87dbb2d8798ff449e0450cdf"
+  integrity sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==
+  optionalDependencies:
+    esbuild-android-arm64 "0.13.15"
+    esbuild-darwin-64 "0.13.15"
+    esbuild-darwin-arm64 "0.13.15"
+    esbuild-freebsd-64 "0.13.15"
+    esbuild-freebsd-arm64 "0.13.15"
+    esbuild-linux-32 "0.13.15"
+    esbuild-linux-64 "0.13.15"
+    esbuild-linux-arm "0.13.15"
+    esbuild-linux-arm64 "0.13.15"
+    esbuild-linux-mips64le "0.13.15"
+    esbuild-linux-ppc64le "0.13.15"
+    esbuild-netbsd-64 "0.13.15"
+    esbuild-openbsd-64 "0.13.15"
+    esbuild-sunos-64 "0.13.15"
+    esbuild-windows-32 "0.13.15"
+    esbuild-windows-64 "0.13.15"
+    esbuild-windows-arm64 "0.13.15"
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -2758,32 +2886,22 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-airbnb-base@^14.2.0, eslint-config-airbnb-base@^14.2.1:
-  version "14.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.1.tgz#8a2eb38455dc5a312550193b319cdaeef042cd1e"
-  integrity sha512-GOrQyDtVEc1Xy20U7vsB2yAoB4nBlfH5HZJeatRXHleO+OS5Ot+MWij4Dpltw4/DyIkqUfqz1epfhVR5XWWQPA==
+eslint-config-airbnb-base@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz#6b09add90ac79c2f8d723a2580e07f3925afd236"
+  integrity sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==
   dependencies:
     confusing-browser-globals "^1.0.10"
     object.assign "^4.1.2"
-    object.entries "^1.1.2"
-
-eslint-config-airbnb-typescript@^12.3.1:
-  version "12.3.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-12.3.1.tgz#83ab40d76402c208eb08516260d1d6fac8f8acbc"
-  integrity sha512-ql/Pe6/hppYuRp4m3iPaHJqkBB7dgeEmGPQ6X0UNmrQOfTF+dXw29/ZjU2kQ6RDoLxaxOA+Xqv07Vbef6oVTWw==
-  dependencies:
-    "@typescript-eslint/parser" "^4.4.1"
-    eslint-config-airbnb "^18.2.0"
-    eslint-config-airbnb-base "^14.2.0"
+    object.entries "^1.1.5"
+    semver "^6.3.0"
 
-eslint-config-airbnb@^18.2.0:
-  version "18.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.2.1.tgz#b7fe2b42f9f8173e825b73c8014b592e449c98d9"
-  integrity sha512-glZNDEZ36VdlZWoxn/bUR1r/sdFKPd1mHPbqUtkctgNG4yT2DLLtJ3D+yCV+jzZCc2V1nBVkmdknOJBZ5Hc0fg==
+eslint-config-airbnb-typescript@^16.1.0:
+  version "16.1.0"
+  resolved "https://registry.npmjs.org/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-16.1.0.tgz#f75a6b4f3bb679eef34c3c930359c2ca9bc3f09c"
+  integrity sha512-W5Cq20KpEx5ZLC54bnVrC37zq2+WD956Kp/Ma3nYFRjT1v9KM63v+DPkrrmmrVqrlDKaD0ivm/qeYmyHV6qKlw==
   dependencies:
-    eslint-config-airbnb-base "^14.2.1"
-    object.assign "^4.1.2"
-    object.entries "^1.1.2"
+    eslint-config-airbnb-base "^15.0.0"
 
 eslint-config-prettier@^8.3.0:
   version "8.3.0"
@@ -2798,49 +2916,47 @@ eslint-import-resolver-node@^0.3.6:
     debug "^3.2.7"
     resolve "^1.20.0"
 
-eslint-module-utils@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.2.tgz#94e5540dd15fe1522e8ffa3ec8db3b7fa7e7a534"
-  integrity sha512-QG8pcgThYOuqxupd06oYTZoNOGaUdTY1PqK+oS6ElF6vs4pBdk/aYxFVQQXzcrAqp9m7cl7lb2ubazX+g16k2Q==
+eslint-module-utils@^2.7.2:
+  version "2.7.3"
+  resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.3.tgz#ad7e3a10552fdd0642e1e55292781bd6e34876ee"
+  integrity sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==
   dependencies:
     debug "^3.2.7"
-    pkg-dir "^2.0.0"
+    find-up "^2.1.0"
 
-eslint-plugin-import@^2.24.2:
-  version "2.24.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.24.2.tgz#2c8cd2e341f3885918ee27d18479910ade7bb4da"
-  integrity sha512-hNVtyhiEtZmpsabL4neEj+6M5DCLgpYyG9nzJY8lZQeQXEn5UPW1DpUdsMHMXsq98dbNm7nt1w9ZMSVpfJdi8Q==
+eslint-plugin-import@^2.25.3:
+  version "2.25.4"
+  resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.25.4.tgz#322f3f916a4e9e991ac7af32032c25ce313209f1"
+  integrity sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==
   dependencies:
-    array-includes "^3.1.3"
-    array.prototype.flat "^1.2.4"
+    array-includes "^3.1.4"
+    array.prototype.flat "^1.2.5"
     debug "^2.6.9"
     doctrine "^2.1.0"
     eslint-import-resolver-node "^0.3.6"
-    eslint-module-utils "^2.6.2"
-    find-up "^2.0.0"
+    eslint-module-utils "^2.7.2"
     has "^1.0.3"
-    is-core-module "^2.6.0"
+    is-core-module "^2.8.0"
+    is-glob "^4.0.3"
     minimatch "^3.0.4"
-    object.values "^1.1.4"
-    pkg-up "^2.0.0"
-    read-pkg-up "^3.0.0"
+    object.values "^1.1.5"
     resolve "^1.20.0"
-    tsconfig-paths "^3.11.0"
+    tsconfig-paths "^3.12.0"
 
 eslint-plugin-tree-shaking@^1.9.2:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-tree-shaking/-/eslint-plugin-tree-shaking-1.9.2.tgz#f3055ba6baf596336fe55c7a2ef5fc6d89b22cbc"
   integrity sha512-3nF/ea5aeH1Qby7WPrbLGm/5oYH8Oh+8GQiNrqT6L/AS7chciKo+8tvghGAYogqAHkHLYhgCrJkjgomPY7kthg==
 
-eslint-plugin-vue@^7.18.0:
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-7.18.0.tgz#02a452142330c7f27c242db21a1b9e25238540f6"
-  integrity sha512-ceDXlXYMMPMSXw7tdKUR42w9jlzthJGJ3Kvm3YrZ0zuQfvAySNxe8sm6VHuksBW0+060GzYXhHJG6IHVOfF83Q==
+eslint-plugin-vue@^8.2.0:
+  version "8.4.1"
+  resolved "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-8.4.1.tgz#0a25493bbfee6baa21614e637e3fd390617c0bb4"
+  integrity sha512-nmWOhNmDx9TZ+yP9ZhezTkZUupSHsYA2TocRm+efPSXMOyFrVczVlaIuQcLBjCtI8CbkBiUQ3VcyQsjlIhDrhA==
   dependencies:
-    eslint-utils "^2.1.0"
+    eslint-utils "^3.0.0"
     natural-compare "^1.4.0"
-    semver "^6.3.0"
-    vue-eslint-parser "^7.10.0"
+    semver "^7.3.5"
+    vue-eslint-parser "^8.0.1"
 
 eslint-scope@^5.1.1:
   version "5.1.1"
@@ -2850,12 +2966,13 @@ eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-eslint-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
-  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+eslint-scope@^7.0.0, eslint-scope@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.0.tgz#c1f6ea30ac583031f203d65c73e723b01298f153"
+  integrity sha512-aWwkhnS0qAXqNOgKOK0dJ2nvzEbhEvpy8OlJ9kZ0FeZnA6zpjv1/Vei+puGFFX7zkPCkHHXb7IDX3A+7yPrRWg==
   dependencies:
-    eslint-visitor-keys "^1.1.0"
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
 
 eslint-utils@^3.0.0:
   version "3.0.0"
@@ -2864,79 +2981,65 @@ eslint-utils@^3.0.0:
   dependencies:
     eslint-visitor-keys "^2.0.0"
 
-eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
-  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
-
 eslint-visitor-keys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz#21fdc8fbcd9c795cc0321f0563702095751511a8"
   integrity sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==
 
-eslint@^7.32.0:
-  version "7.32.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
-  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
+eslint-visitor-keys@^3.0.0, eslint-visitor-keys@^3.1.0, eslint-visitor-keys@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.2.0.tgz#6fbb166a6798ee5991358bc2daa1ba76cc1254a1"
+  integrity sha512-IOzT0X126zn7ALX0dwFiUQEdsfzrm4+ISsQS8nukaJXwEyYKRSnEIIDULYg1mCtGp7UUXgfGl7BIolXREQK+XQ==
+
+eslint@^8.5.0:
+  version "8.8.0"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-8.8.0.tgz#9762b49abad0cb4952539ffdb0a046392e571a2d"
+  integrity sha512-H3KXAzQGBH1plhYS3okDix2ZthuYJlQQEGE5k0IKuEqUSiyu4AmxxlJ2MtTYeJ3xB4jDhcYCwGOg2TXYdnDXlQ==
   dependencies:
-    "@babel/code-frame" "7.12.11"
-    "@eslint/eslintrc" "^0.4.3"
-    "@humanwhocodes/config-array" "^0.5.0"
+    "@eslint/eslintrc" "^1.0.5"
+    "@humanwhocodes/config-array" "^0.9.2"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
-    debug "^4.0.1"
+    debug "^4.3.2"
     doctrine "^3.0.0"
-    enquirer "^2.3.5"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^2.1.0"
-    eslint-visitor-keys "^2.0.0"
-    espree "^7.3.1"
+    eslint-scope "^7.1.0"
+    eslint-utils "^3.0.0"
+    eslint-visitor-keys "^3.2.0"
+    espree "^9.3.0"
     esquery "^1.4.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
     functional-red-black-tree "^1.0.1"
-    glob-parent "^5.1.2"
+    glob-parent "^6.0.1"
     globals "^13.6.0"
-    ignore "^4.0.6"
+    ignore "^5.2.0"
     import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
-    js-yaml "^3.13.1"
+    js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
     minimatch "^3.0.4"
     natural-compare "^1.4.0"
     optionator "^0.9.1"
-    progress "^2.0.0"
-    regexpp "^3.1.0"
-    semver "^7.2.1"
-    strip-ansi "^6.0.0"
+    regexpp "^3.2.0"
+    strip-ansi "^6.0.1"
     strip-json-comments "^3.1.0"
-    table "^6.0.9"
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-espree@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
-  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
-  dependencies:
-    acorn "^7.1.1"
-    acorn-jsx "^5.2.0"
-    eslint-visitor-keys "^1.1.0"
-
-espree@^7.3.0, espree@^7.3.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
-  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
+espree@^9.0.0, espree@^9.2.0, espree@^9.3.0:
+  version "9.3.0"
+  resolved "https://registry.npmjs.org/espree/-/espree-9.3.0.tgz#c1240d79183b72aaee6ccfa5a90bc9111df085a8"
+  integrity sha512-d/5nCsb0JcqsSEeQzFZ8DH1RmxPcglRWh24EFTlUEmCKoehXGdpsx0RkHDubqUI8LSAIKMQp4r9SzQ3n+sm4HQ==
   dependencies:
-    acorn "^7.4.0"
+    acorn "^8.7.0"
     acorn-jsx "^5.3.1"
-    eslint-visitor-keys "^1.3.0"
+    eslint-visitor-keys "^3.1.0"
 
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
@@ -2987,14 +3090,9 @@ event-pubsub@4.3.0:
   resolved "https://registry.yarnpkg.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
   integrity sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==
 
-exec-sh@^0.3.2:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.6.tgz#ff264f9e325519a60cb5e273692943483cca63bc"
-  integrity sha512-nQn+hI3yp+oD0huYhKwvYI32+JFeq+XkNcD1GAo3Y/MjxsfVGmrrzrnzjWiNY6f+pUCP440fThsFh5gZrRAU/w==
-
-execa@5.1.1:
+execa@5.1.1, execa@^5.0.0:
   version "5.1.1"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
   integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
   dependencies:
     cross-spawn "^7.0.3"
@@ -3020,7 +3118,7 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@^4.0.0, execa@^4.0.2:
+execa@^4.0.2:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
   integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
@@ -3040,30 +3138,15 @@ exit@^0.1.2:
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
   integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
 
-expand-brackets@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
-  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
+expect@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/expect/-/expect-27.4.6.tgz#f335e128b0335b6ceb4fcab67ece7cbd14c942e6"
+  integrity sha512-1M/0kAALIaj5LaG66sFJTbRsWTADnylly82cu4bspI0nl+pgP4E6Bh/aqdHlTUjul06K7xQnnrAoqfxVU0+/ag==
   dependencies:
-    debug "^2.3.3"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    posix-character-classes "^0.1.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-expect@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-26.6.2.tgz#c6b996bf26bf3fe18b67b2d0f51fc981ba934417"
-  integrity sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    ansi-styles "^4.0.0"
-    jest-get-type "^26.3.0"
-    jest-matcher-utils "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-regex-util "^26.0.0"
+    "@jest/types" "^27.4.2"
+    jest-get-type "^27.4.0"
+    jest-matcher-utils "^27.4.6"
+    jest-message-util "^27.4.6"
 
 extend-shallow@^2.0.1:
   version "2.0.1"
@@ -3072,14 +3155,6 @@ extend-shallow@^2.0.1:
   dependencies:
     is-extendable "^0.1.0"
 
-extend-shallow@^3.0.0, extend-shallow@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
-  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
-  dependencies:
-    assign-symbols "^1.0.0"
-    is-extendable "^1.0.1"
-
 external-editor@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
@@ -3089,20 +3164,6 @@ external-editor@^3.0.3:
     iconv-lite "^0.4.24"
     tmp "^0.0.33"
 
-extglob@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
-  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
-  dependencies:
-    array-unique "^0.3.2"
-    define-property "^1.0.0"
-    expand-brackets "^2.1.4"
-    extend-shallow "^2.0.1"
-    fragment-cache "^0.2.1"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
 extract-from-css@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/extract-from-css/-/extract-from-css-0.4.4.tgz#1ea7df2e7c7c6eb9922fa08e8adaea486f6f8f92"
@@ -3127,10 +3188,10 @@ fast-glob@^3.1.1:
     micromatch "^4.0.2"
     picomatch "^2.2.1"
 
-fast-glob@^3.2.7:
-  version "3.2.7"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
-  integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
+fast-glob@^3.2.11, fast-glob@^3.2.9:
+  version "3.2.11"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
+  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -3176,16 +3237,6 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-fill-range@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
-  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-    to-regex-range "^2.1.0"
-
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -3198,7 +3249,7 @@ filter-obj@^1.1.0:
   resolved "https://registry.yarnpkg.com/filter-obj/-/filter-obj-1.1.0.tgz#9b311112bc6c6127a16e016c6c5d7f19e0805c5b"
   integrity sha1-mzERErxsYSehbgFsbF1/GeCAXFs=
 
-find-up@^2.0.0, find-up@^2.1.0:
+find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
   integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
@@ -3221,21 +3272,11 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
-flat@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
-  integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
-
 flatted@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.1.tgz#c4b489e80096d9df1dfc97c79871aea7c617c469"
   integrity sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==
 
-for-in@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
-  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
-
 form-data@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
@@ -3254,35 +3295,19 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
-fraction.js@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.1.tgz#ac4e520473dae67012d618aab91eda09bcb400ff"
-  integrity sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==
-
-fragment-cache@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
-  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
-  dependencies:
-    map-cache "^0.2.2"
-
-fs-extra@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
-  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
+fraction.js@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz#13e420a92422b6cf244dff8690ed89401029fbe8"
+  integrity sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==
 
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^2.1.2, fsevents@~2.3.1, fsevents@~2.3.2:
+fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
 function-bind@^1.1.1:
@@ -3300,9 +3325,9 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-caller-file@^2.0.1:
+get-caller-file@^2.0.5:
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
@@ -3346,11 +3371,6 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
-get-value@^2.0.3, get-value@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
-  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
-
 git-up@^4.0.0:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/git-up/-/git-up-4.0.5.tgz#e7bb70981a37ea2fb8fe049669800a1f9a01d759"
@@ -3380,6 +3400,13 @@ glob-parent@^6.0.1:
   dependencies:
     is-glob "^4.0.1"
 
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
 glob@^7.0.0, glob@^7.1.2, glob@^7.1.3:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -3430,7 +3457,7 @@ globals@^13.9.0:
   dependencies:
     type-fest "^0.20.2"
 
-globby@11.0.4, globby@^11.0.3:
+globby@11.0.4:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5"
   integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==
@@ -3442,17 +3469,29 @@ globby@11.0.4, globby@^11.0.3:
     merge2 "^1.3.0"
     slash "^3.0.0"
 
-got@11.8.2:
-  version "11.8.2"
-  resolved "https://registry.yarnpkg.com/got/-/got-11.8.2.tgz#7abb3959ea28c31f3576f1576c1effce23f33599"
-  integrity sha512-D0QywKgIe30ODs+fm8wMZiAcZjypcCodPNuMz5H9Mny7RJ+IjJ10BdmGW7OM7fHXP+O7r6ZwapQ/YQmMSvB0UQ==
+globby@^11.0.4:
+  version "11.1.0"
+  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+got@11.8.3:
+  version "11.8.3"
+  resolved "https://registry.npmjs.org/got/-/got-11.8.3.tgz#f496c8fdda5d729a90b4905d2b07dbd148170770"
+  integrity sha512-7gtQ5KiPh1RtGS9/Jbv1ofDpBFuq42gyfEib+ejaRBJuj/3tQFeR5+gw57e4ipaU8c/rCjvX6fkQz2lyDlGAOg==
   dependencies:
     "@sindresorhus/is" "^4.0.0"
     "@szmarczak/http-timer" "^4.0.5"
     "@types/cacheable-request" "^6.0.1"
     "@types/responselike" "^1.0.0"
     cacheable-lookup "^5.0.3"
-    cacheable-request "^7.0.1"
+    cacheable-request "^7.0.2"
     decompress-response "^6.0.0"
     http2-wrapper "^1.0.0-beta.5.2"
     lowercase-keys "^2.0.0"
@@ -3476,17 +3515,12 @@ got@^9.6.0:
     to-readable-stream "^1.0.0"
     url-parse-lax "^3.0.0"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4:
+graceful-fs@^4.1.2, graceful-fs@^4.2.4:
   version "4.2.6"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
-growly@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
-  integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
-
-has-bigints@^1.0.0, has-bigints@^1.0.1:
+has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
   integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
@@ -3501,7 +3535,7 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-symbols@^1.0.0, has-symbols@^1.0.1, has-symbols@^1.0.2:
+has-symbols@^1.0.1, has-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
   integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
@@ -3513,37 +3547,6 @@ has-tostringtag@^1.0.0:
   dependencies:
     has-symbols "^1.0.2"
 
-has-value@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
-  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
-  dependencies:
-    get-value "^2.0.3"
-    has-values "^0.1.4"
-    isobject "^2.0.0"
-
-has-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
-  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
-  dependencies:
-    get-value "^2.0.6"
-    has-values "^1.0.0"
-    isobject "^3.0.0"
-
-has-values@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
-  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
-
-has-values@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
-  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
-  dependencies:
-    is-number "^3.0.0"
-    kind-of "^4.0.0"
-
 has-yarn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
@@ -3561,26 +3564,11 @@ hash-sum@^2.0.0:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
   integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
 
-hex-color-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
-  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
-
 hosted-git-info@^2.1.4:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
   integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
 
-hsl-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
-  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
-
-hsla-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
-  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
-
 html-encoding-sniffer@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
@@ -3593,20 +3581,15 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-html-tags@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
-  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
-
-htmlparser2@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
-  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+htmlparser2@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz#8817cdea38bbc324392a90b1990908e81a65f5a5"
+  integrity sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==
   dependencies:
     domelementtype "^2.0.1"
-    domhandler "^4.0.0"
-    domutils "^2.5.2"
-    entities "^2.0.0"
+    domhandler "^4.2.2"
+    domutils "^2.8.0"
+    entities "^3.0.1"
 
 http-cache-semantics@^4.0.0:
   version "4.1.0"
@@ -3670,6 +3653,11 @@ ignore@^5.1.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+ignore@^5.1.8, ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
 import-cwd@3.0.0, import-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
@@ -3710,11 +3698,6 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
-indexes-of@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
-  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -3738,10 +3721,10 @@ ini@^1.3.4, ini@~1.3.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
-inquirer@8.1.5:
-  version "8.1.5"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-8.1.5.tgz#2dc5159203c826d654915b5fe6990fd17f54a150"
-  integrity sha512-G6/9xUqmt/r+UvufSyrPpt84NYwhKZ9jLsgMbQzlx804XErNupor8WQdBnBRrXmBfTPpuwf1sV+ss2ovjgdXIg==
+inquirer@8.2.0:
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/inquirer/-/inquirer-8.2.0.tgz#f44f008dd344bbfc4b30031f45d984e034a3ac3a"
+  integrity sha512-0crLweprevJ02tTuA6ThpoAERAGyVILC4sS74uib58Xf/zSr1/ZWtmm7D5CI+bSQEaA04f0K7idaHpQbSWgiVQ==
   dependencies:
     ansi-escapes "^4.2.1"
     chalk "^4.1.1"
@@ -3772,30 +3755,11 @@ interpret@^1.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
-is-accessor-descriptor@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
-  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-accessor-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
-  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
-  dependencies:
-    kind-of "^6.0.0"
-
 is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
 is-bigint@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.1.tgz#6923051dfcbc764278540b9ce0e6b3213aa5ebc2"
@@ -3820,7 +3784,7 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-callable@^1.1.4, is-callable@^1.2.3:
+is-callable@^1.1.4:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
   integrity sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==
@@ -3830,12 +3794,12 @@ is-callable@^1.2.4:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
   integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
 
-is-ci@3.0.0, is-ci@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.0.tgz#c7e7be3c9d8eef7d0fa144390bd1e4b88dc4c994"
-  integrity sha512-kDXyttuLeslKAHYL/K28F2YkM3x5jvFPEw3yXbRptXydjD9rpLEz+C5K5iutY9ZiUu6AP41JdvRQwF4Iqs4ZCQ==
+is-ci@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
+  integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
   dependencies:
-    ci-info "^3.1.1"
+    ci-info "^3.2.0"
 
 is-ci@^2.0.0:
   version "2.0.0"
@@ -3844,17 +3808,12 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-color-stop@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
-  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
+is-ci@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.0.tgz#c7e7be3c9d8eef7d0fa144390bd1e4b88dc4c994"
+  integrity sha512-kDXyttuLeslKAHYL/K28F2YkM3x5jvFPEw3yXbRptXydjD9rpLEz+C5K5iutY9ZiUu6AP41JdvRQwF4Iqs4ZCQ==
   dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
+    ci-info "^3.1.1"
 
 is-core-module@^2.2.0:
   version "2.2.0"
@@ -3863,50 +3822,18 @@ is-core-module@^2.2.0:
   dependencies:
     has "^1.0.3"
 
-is-core-module@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.6.0.tgz#d7553b2526fe59b92ba3e40c8df757ec8a709e19"
-  integrity sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==
+is-core-module@^2.8.0, is-core-module@^2.8.1:
+  version "2.8.1"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
+  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
   dependencies:
     has "^1.0.3"
 
-is-data-descriptor@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
-  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
-  dependencies:
-    kind-of "^3.0.2"
-
-is-data-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
-  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
-  dependencies:
-    kind-of "^6.0.0"
-
 is-date-object@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
 
-is-descriptor@^0.1.0:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
-  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
-  dependencies:
-    is-accessor-descriptor "^0.1.6"
-    is-data-descriptor "^0.1.4"
-    kind-of "^5.0.0"
-
-is-descriptor@^1.0.0, is-descriptor@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
-  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
-  dependencies:
-    is-accessor-descriptor "^1.0.0"
-    is-data-descriptor "^1.0.0"
-    kind-of "^6.0.2"
-
 is-docker@^2.0.0, is-docker@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
@@ -3920,18 +3847,11 @@ is-expression@^4.0.0:
     acorn "^7.1.1"
     object-assign "^4.1.1"
 
-is-extendable@^0.1.0, is-extendable@^0.1.1:
+is-extendable@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
   integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
 
-is-extendable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
-  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
-  dependencies:
-    is-plain-object "^2.0.4"
-
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -3959,6 +3879,13 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
 is-installed-globally@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
@@ -3987,13 +3914,6 @@ is-number-object@^1.0.4:
   resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.4.tgz#36ac95e741cf18b283fc1ddf5e83da798e3ec197"
   integrity sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==
 
-is-number@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
-  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
-  dependencies:
-    kind-of "^3.0.2"
-
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
@@ -4009,13 +3929,6 @@ is-path-inside@^3.0.2:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-plain-object@^2.0.3, is-plain-object@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
-  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
-  dependencies:
-    isobject "^3.0.1"
-
 is-plain-object@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
@@ -4039,13 +3952,10 @@ is-regex@^1.0.3, is-regex@^1.1.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
-is-regex@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"
-  integrity sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==
-  dependencies:
-    call-bind "^1.0.2"
-    has-symbols "^1.0.1"
+is-shared-array-buffer@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.1.tgz#97b0c85fbdacb59c9c446fe653b82cf2b5b7cfe6"
+  integrity sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==
 
 is-ssh@^1.3.0:
   version "1.3.3"
@@ -4093,16 +4003,18 @@ is-unicode-supported@^0.1.0:
   resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
   integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
 
+is-weakref@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
 is-whitespace@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
   integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38=
 
-is-windows@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
-  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
-
 is-wsl@^2.1.1, is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
@@ -4115,41 +4027,30 @@ is-yarn-global@^0.3.0:
   resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
   integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==
 
-isarray@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
-isobject@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
-  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
-  dependencies:
-    isarray "1.0.0"
-
-isobject@^3.0.0, isobject@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
-  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
-
 istanbul-lib-coverage@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz#f5944a37c70b550b02a78a5c3b2055b280cec8ec"
   integrity sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==
 
-istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
-  integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
+istanbul-lib-coverage@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.0.tgz#189e7909d0a39fa5a3dfad5b03f71947770191d3"
+  integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
+
+istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.1.0.tgz#7b49198b657b27a730b8e9cb601f1e1bff24c59a"
+  integrity sha512-czwUz525rkOFDJxfKK6mYfIs9zBKILyrZQxjz3ABhjQXhbhFsSbo1HW/BFcsDnfJYJWA6thRR5/TUY2qs5W99Q==
   dependencies:
-    "@babel/core" "^7.7.5"
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
     "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-coverage "^3.2.0"
     semver "^6.3.0"
 
 istanbul-lib-report@^3.0.0:
@@ -4170,201 +4071,212 @@ istanbul-lib-source-maps@^4.0.0:
     istanbul-lib-coverage "^3.0.0"
     source-map "^0.6.1"
 
-istanbul-reports@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
-  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
+istanbul-reports@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.1.3.tgz#4bcae3103b94518117930d51283690960b50d3c2"
+  integrity sha512-x9LtDVtfm/t1GFiLl3NffC7hz+I1ragvgX1P/Lg1NlIagifZDKUkuuaAxH/qpwj2IuEfD8G2Bs/UKp+sZ/pKkg==
   dependencies:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-jest-changed-files@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0"
-  integrity sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==
+jest-changed-files@^27.4.2:
+  version "27.4.2"
+  resolved "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.4.2.tgz#da2547ea47c6e6a5f6ed336151bd2075736eb4a5"
+  integrity sha512-/9x8MjekuzUQoPjDHbBiXbNEBauhrPU2ct7m8TfCg69ywt1y/N+yYwGh3gCpnqUS3klYWDU/lSNgv+JhoD2k1A==
   dependencies:
-    "@jest/types" "^26.6.2"
-    execa "^4.0.0"
-    throat "^5.0.0"
+    "@jest/types" "^27.4.2"
+    execa "^5.0.0"
+    throat "^6.0.1"
 
-jest-cli@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.6.3.tgz#43117cfef24bc4cd691a174a8796a532e135e92a"
-  integrity sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==
+jest-circus@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-circus/-/jest-circus-27.4.6.tgz#d3af34c0eb742a967b1919fbb351430727bcea6c"
+  integrity sha512-UA7AI5HZrW4wRM72Ro80uRR2Fg+7nR0GESbSI/2M+ambbzVuA63mn5T1p3Z/wlhntzGpIG1xx78GP2YIkf6PhQ==
   dependencies:
-    "@jest/core" "^26.6.3"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@jest/environment" "^27.4.6"
+    "@jest/test-result" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    expect "^27.4.6"
+    is-generator-fn "^2.0.0"
+    jest-each "^27.4.6"
+    jest-matcher-utils "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-runtime "^27.4.6"
+    jest-snapshot "^27.4.6"
+    jest-util "^27.4.2"
+    pretty-format "^27.4.6"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+    throat "^6.0.1"
+
+jest-cli@^27.4.7:
+  version "27.4.7"
+  resolved "https://registry.npmjs.org/jest-cli/-/jest-cli-27.4.7.tgz#d00e759e55d77b3bcfea0715f527c394ca314e5a"
+  integrity sha512-zREYhvjjqe1KsGV15mdnxjThKNDgza1fhDT+iUsXWLCq3sxe9w5xnvyctcYVT5PcdLSjv7Y5dCwTS3FCF1tiuw==
+  dependencies:
+    "@jest/core" "^27.4.7"
+    "@jest/test-result" "^27.4.6"
+    "@jest/types" "^27.4.2"
     chalk "^4.0.0"
     exit "^0.1.2"
     graceful-fs "^4.2.4"
     import-local "^3.0.2"
-    is-ci "^2.0.0"
-    jest-config "^26.6.3"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
+    jest-config "^27.4.7"
+    jest-util "^27.4.2"
+    jest-validate "^27.4.6"
     prompts "^2.0.1"
-    yargs "^15.4.1"
+    yargs "^16.2.0"
 
-jest-config@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.6.3.tgz#64f41444eef9eb03dc51d5c53b75c8c71f645349"
-  integrity sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==
+jest-config@^27.4.7:
+  version "27.4.7"
+  resolved "https://registry.npmjs.org/jest-config/-/jest-config-27.4.7.tgz#4f084b2acbd172c8b43aa4cdffe75d89378d3972"
+  integrity sha512-xz/o/KJJEedHMrIY9v2ParIoYSrSVY6IVeE4z5Z3i101GoA5XgfbJz+1C8EYPsv7u7f39dS8F9v46BHDhn0vlw==
   dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^26.6.3"
-    "@jest/types" "^26.6.2"
-    babel-jest "^26.6.3"
+    "@babel/core" "^7.8.0"
+    "@jest/test-sequencer" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    babel-jest "^27.4.6"
     chalk "^4.0.0"
+    ci-info "^3.2.0"
     deepmerge "^4.2.2"
     glob "^7.1.1"
     graceful-fs "^4.2.4"
-    jest-environment-jsdom "^26.6.2"
-    jest-environment-node "^26.6.2"
-    jest-get-type "^26.3.0"
-    jest-jasmine2 "^26.6.3"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.6.2"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
-    micromatch "^4.0.2"
-    pretty-format "^26.6.2"
+    jest-circus "^27.4.6"
+    jest-environment-jsdom "^27.4.6"
+    jest-environment-node "^27.4.6"
+    jest-get-type "^27.4.0"
+    jest-jasmine2 "^27.4.6"
+    jest-regex-util "^27.4.0"
+    jest-resolve "^27.4.6"
+    jest-runner "^27.4.6"
+    jest-util "^27.4.2"
+    jest-validate "^27.4.6"
+    micromatch "^4.0.4"
+    pretty-format "^27.4.6"
+    slash "^3.0.0"
 
-jest-diff@^26.0.0, jest-diff@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
-  integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
+jest-diff@^27.0.0, jest-diff@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-diff/-/jest-diff-27.4.6.tgz#93815774d2012a2cbb6cf23f84d48c7a2618f98d"
+  integrity sha512-zjaB0sh0Lb13VyPsd92V7HkqF6yKRH9vm33rwBt7rPYrpQvS1nCvlIy2pICbKta+ZjWngYLNn4cCK4nyZkjS/w==
   dependencies:
     chalk "^4.0.0"
-    diff-sequences "^26.6.2"
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
+    diff-sequences "^27.4.0"
+    jest-get-type "^27.4.0"
+    pretty-format "^27.4.6"
 
-jest-docblock@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
-  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
+jest-docblock@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.npmjs.org/jest-docblock/-/jest-docblock-27.4.0.tgz#06c78035ca93cbbb84faf8fce64deae79a59f69f"
+  integrity sha512-7TBazUdCKGV7svZ+gh7C8esAnweJoG+SvcF6Cjqj4l17zA2q1cMwx2JObSioubk317H+cjcHgP+7fTs60paulg==
   dependencies:
     detect-newline "^3.0.0"
 
-jest-each@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.6.2.tgz#02526438a77a67401c8a6382dfe5999952c167cb"
-  integrity sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==
+jest-each@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-each/-/jest-each-27.4.6.tgz#e7e8561be61d8cc6dbf04296688747ab186c40ff"
+  integrity sha512-n6QDq8y2Hsmn22tRkgAk+z6MCX7MeVlAzxmZDshfS2jLcaBlyhpF3tZSJLR+kXmh23GEvS0ojMR8i6ZeRvpQcA==
   dependencies:
-    "@jest/types" "^26.6.2"
+    "@jest/types" "^27.4.2"
     chalk "^4.0.0"
-    jest-get-type "^26.3.0"
-    jest-util "^26.6.2"
-    pretty-format "^26.6.2"
-
-jest-environment-jsdom@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz#78d09fe9cf019a357009b9b7e1f101d23bd1da3e"
-  integrity sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==
-  dependencies:
-    "@jest/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    jest-get-type "^27.4.0"
+    jest-util "^27.4.2"
+    pretty-format "^27.4.6"
+
+jest-environment-jsdom@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-27.4.6.tgz#c23a394eb445b33621dfae9c09e4c8021dea7b36"
+  integrity sha512-o3dx5p/kHPbUlRvSNjypEcEtgs6LmvESMzgRFQE6c+Prwl2JLA4RZ7qAnxc5VM8kutsGRTB15jXeeSbJsKN9iA==
+  dependencies:
+    "@jest/environment" "^27.4.6"
+    "@jest/fake-timers" "^27.4.6"
+    "@jest/types" "^27.4.2"
     "@types/node" "*"
-    jest-mock "^26.6.2"
-    jest-util "^26.6.2"
-    jsdom "^16.4.0"
-
-jest-environment-node@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.6.2.tgz#824e4c7fb4944646356f11ac75b229b0035f2b0c"
-  integrity sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==
-  dependencies:
-    "@jest/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    jest-mock "^27.4.6"
+    jest-util "^27.4.2"
+    jsdom "^16.6.0"
+
+jest-environment-node@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-27.4.6.tgz#ee8cd4ef458a0ef09d087c8cd52ca5856df90242"
+  integrity sha512-yfHlZ9m+kzTKZV0hVfhVu6GuDxKAYeFHrfulmy7Jxwsq4V7+ZK7f+c0XP/tbVDMQW7E4neG2u147hFkuVz0MlQ==
+  dependencies:
+    "@jest/environment" "^27.4.6"
+    "@jest/fake-timers" "^27.4.6"
+    "@jest/types" "^27.4.2"
     "@types/node" "*"
-    jest-mock "^26.6.2"
-    jest-util "^26.6.2"
+    jest-mock "^27.4.6"
+    jest-util "^27.4.2"
 
-jest-get-type@^26.3.0:
-  version "26.3.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
-  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
+jest-get-type@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-27.4.0.tgz#7503d2663fffa431638337b3998d39c5e928e9b5"
+  integrity sha512-tk9o+ld5TWq41DkK14L4wox4s2D9MtTpKaAVzXfr5CUKm5ZK2ExcaFE0qls2W71zE/6R2TxxrK9w2r6svAFDBQ==
 
-jest-haste-map@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
-  integrity sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==
+jest-haste-map@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-27.4.6.tgz#c60b5233a34ca0520f325b7e2cc0a0140ad0862a"
+  integrity sha512-0tNpgxg7BKurZeFkIOvGCkbmOHbLFf4LUQOxrQSMjvrQaQe3l6E8x6jYC1NuWkGo5WDdbr8FEzUxV2+LWNawKQ==
   dependencies:
-    "@jest/types" "^26.6.2"
+    "@jest/types" "^27.4.2"
     "@types/graceful-fs" "^4.1.2"
     "@types/node" "*"
     anymatch "^3.0.3"
     fb-watchman "^2.0.0"
     graceful-fs "^4.2.4"
-    jest-regex-util "^26.0.0"
-    jest-serializer "^26.6.2"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
-    micromatch "^4.0.2"
-    sane "^4.0.3"
+    jest-regex-util "^27.4.0"
+    jest-serializer "^27.4.0"
+    jest-util "^27.4.2"
+    jest-worker "^27.4.6"
+    micromatch "^4.0.4"
     walker "^1.0.7"
   optionalDependencies:
-    fsevents "^2.1.2"
+    fsevents "^2.3.2"
 
-jest-jasmine2@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz#adc3cf915deacb5212c93b9f3547cd12958f2edd"
-  integrity sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==
+jest-jasmine2@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-27.4.6.tgz#109e8bc036cb455950ae28a018f983f2abe50127"
+  integrity sha512-uAGNXF644I/whzhsf7/qf74gqy9OuhvJ0XYp8SDecX2ooGeaPnmJMjXjKt0mqh1Rl5dtRGxJgNrHlBQIBfS5Nw==
   dependencies:
-    "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^26.6.2"
-    "@jest/source-map" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@jest/environment" "^27.4.6"
+    "@jest/source-map" "^27.4.0"
+    "@jest/test-result" "^27.4.6"
+    "@jest/types" "^27.4.2"
     "@types/node" "*"
     chalk "^4.0.0"
     co "^4.6.0"
-    expect "^26.6.2"
+    expect "^27.4.6"
     is-generator-fn "^2.0.0"
-    jest-each "^26.6.2"
-    jest-matcher-utils "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-runtime "^26.6.3"
-    jest-snapshot "^26.6.2"
-    jest-util "^26.6.2"
-    pretty-format "^26.6.2"
-    throat "^5.0.0"
-
-jest-leak-detector@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz#7717cf118b92238f2eba65054c8a0c9c653a91af"
-  integrity sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==
-  dependencies:
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
-
-jest-matcher-utils@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz#8e6fd6e863c8b2d31ac6472eeb237bc595e53e7a"
-  integrity sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==
+    jest-each "^27.4.6"
+    jest-matcher-utils "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-runtime "^27.4.6"
+    jest-snapshot "^27.4.6"
+    jest-util "^27.4.2"
+    pretty-format "^27.4.6"
+    throat "^6.0.1"
+
+jest-leak-detector@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-27.4.6.tgz#ed9bc3ce514b4c582637088d9faf58a33bd59bf4"
+  integrity sha512-kkaGixDf9R7CjHm2pOzfTxZTQQQ2gHTIWKY/JZSiYTc90bZp8kSZnUMS3uLAfwTZwc0tcMRoEX74e14LG1WapA==
+  dependencies:
+    jest-get-type "^27.4.0"
+    pretty-format "^27.4.6"
+
+jest-matcher-utils@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.4.6.tgz#53ca7f7b58170638590e946f5363b988775509b8"
+  integrity sha512-XD4PKT3Wn1LQnRAq7ZsTI0VRuEc9OrCPFiO1XL7bftTGmfNF0DcEwMHRgqiu7NGf8ZoZDREpGrCniDkjt79WbA==
   dependencies:
     chalk "^4.0.0"
-    jest-diff "^26.6.2"
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
-
-jest-message-util@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
-  integrity sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@jest/types" "^26.6.2"
-    "@types/stack-utils" "^2.0.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    micromatch "^4.0.2"
-    pretty-format "^26.6.2"
-    slash "^3.0.0"
-    stack-utils "^2.0.2"
+    jest-diff "^27.4.6"
+    jest-get-type "^27.4.0"
+    pretty-format "^27.4.6"
 
 jest-message-util@^27.0.2:
   version "27.0.2"
@@ -4381,12 +4293,27 @@ jest-message-util@^27.0.2:
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
-jest-mock@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.6.2.tgz#d6cb712b041ed47fe0d9b6fc3474bc6543feb302"
-  integrity sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==
+jest-message-util@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-message-util/-/jest-message-util-27.4.6.tgz#9fdde41a33820ded3127465e1a5896061524da31"
+  integrity sha512-0p5szriFU0U74czRSFjH6RyS7UYIAkn/ntwMuOwTGWrQIOh5NzXXrq72LOqIkJKKvFbPq+byZKuBz78fjBERBA==
   dependencies:
-    "@jest/types" "^26.6.2"
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^27.4.2"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.4"
+    pretty-format "^27.4.6"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
+jest-mock@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-mock/-/jest-mock-27.4.6.tgz#77d1ba87fbd33ccb8ef1f061697e7341b7635195"
+  integrity sha512-kvojdYRkst8iVSZ1EJ+vc1RRD9llueBjKzXzeCytH3dMM7zvPV/ULcfI2nr0v0VUgm3Bjt3hBCQvOeaBz+ZTHw==
+  dependencies:
+    "@jest/types" "^27.4.2"
     "@types/node" "*"
 
 jest-pnp-resolver@^1.2.2:
@@ -4394,97 +4321,96 @@ jest-pnp-resolver@^1.2.2:
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
   integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
 
-jest-regex-util@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
-  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
-
 jest-regex-util@^27.0.0:
   version "27.0.1"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.0.1.tgz#69d4b1bf5b690faa3490113c47486ed85dd45b68"
   integrity sha512-6nY6QVcpTgEKQy1L41P4pr3aOddneK17kn3HJw6SdwGiKfgCGTvH02hVXL0GU8GEKtPH83eD2DIDgxHXOxVohQ==
 
-jest-resolve-dependencies@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz#6680859ee5d22ee5dcd961fe4871f59f4c784fb6"
-  integrity sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==
+jest-regex-util@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-27.4.0.tgz#e4c45b52653128843d07ad94aec34393ea14fbca"
+  integrity sha512-WeCpMpNnqJYMQoOjm1nTtsgbR4XHAk1u00qDoNBQoykM280+/TmgA5Qh5giC1ecy6a5d4hbSsHzpBtu5yvlbEg==
+
+jest-resolve-dependencies@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-27.4.6.tgz#fc50ee56a67d2c2183063f6a500cc4042b5e2327"
+  integrity sha512-W85uJZcFXEVZ7+MZqIPCscdjuctruNGXUZ3OHSXOfXR9ITgbUKeHj+uGcies+0SsvI5GtUfTw4dY7u9qjTvQOw==
   dependencies:
-    "@jest/types" "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-snapshot "^26.6.2"
+    "@jest/types" "^27.4.2"
+    jest-regex-util "^27.4.0"
+    jest-snapshot "^27.4.6"
 
-jest-resolve@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.2.tgz#a3ab1517217f469b504f1b56603c5bb541fbb507"
-  integrity sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==
+jest-resolve@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-resolve/-/jest-resolve-27.4.6.tgz#2ec3110655e86d5bfcfa992e404e22f96b0b5977"
+  integrity sha512-SFfITVApqtirbITKFAO7jOVN45UgFzcRdQanOFzjnbd+CACDoyeX7206JyU92l4cRr73+Qy/TlW51+4vHGt+zw==
   dependencies:
-    "@jest/types" "^26.6.2"
+    "@jest/types" "^27.4.2"
     chalk "^4.0.0"
     graceful-fs "^4.2.4"
+    jest-haste-map "^27.4.6"
     jest-pnp-resolver "^1.2.2"
-    jest-util "^26.6.2"
-    read-pkg-up "^7.0.1"
-    resolve "^1.18.1"
+    jest-util "^27.4.2"
+    jest-validate "^27.4.6"
+    resolve "^1.20.0"
+    resolve.exports "^1.1.0"
     slash "^3.0.0"
 
-jest-runner@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.6.3.tgz#2d1fed3d46e10f233fd1dbd3bfaa3fe8924be159"
-  integrity sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==
+jest-runner@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-runner/-/jest-runner-27.4.6.tgz#1d390d276ec417e9b4d0d081783584cbc3e24773"
+  integrity sha512-IDeFt2SG4DzqalYBZRgbbPmpwV3X0DcntjezPBERvnhwKGWTW7C5pbbA5lVkmvgteeNfdd/23gwqv3aiilpYPg==
   dependencies:
-    "@jest/console" "^26.6.2"
-    "@jest/environment" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@jest/console" "^27.4.6"
+    "@jest/environment" "^27.4.6"
+    "@jest/test-result" "^27.4.6"
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
     "@types/node" "*"
     chalk "^4.0.0"
-    emittery "^0.7.1"
+    emittery "^0.8.1"
     exit "^0.1.2"
     graceful-fs "^4.2.4"
-    jest-config "^26.6.3"
-    jest-docblock "^26.0.0"
-    jest-haste-map "^26.6.2"
-    jest-leak-detector "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-resolve "^26.6.2"
-    jest-runtime "^26.6.3"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
+    jest-docblock "^27.4.0"
+    jest-environment-jsdom "^27.4.6"
+    jest-environment-node "^27.4.6"
+    jest-haste-map "^27.4.6"
+    jest-leak-detector "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-resolve "^27.4.6"
+    jest-runtime "^27.4.6"
+    jest-util "^27.4.2"
+    jest-worker "^27.4.6"
     source-map-support "^0.5.6"
-    throat "^5.0.0"
-
-jest-runtime@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.6.3.tgz#4f64efbcfac398331b74b4b3c82d27d401b8fa2b"
-  integrity sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==
-  dependencies:
-    "@jest/console" "^26.6.2"
-    "@jest/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/globals" "^26.6.2"
-    "@jest/source-map" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/yargs" "^15.0.0"
+    throat "^6.0.1"
+
+jest-runtime@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-runtime/-/jest-runtime-27.4.6.tgz#83ae923818e3ea04463b22f3597f017bb5a1cffa"
+  integrity sha512-eXYeoR/MbIpVDrjqy5d6cGCFOYBFFDeKaNWqTp0h6E74dK0zLHzASQXJpl5a2/40euBmKnprNLJ0Kh0LCndnWQ==
+  dependencies:
+    "@jest/environment" "^27.4.6"
+    "@jest/fake-timers" "^27.4.6"
+    "@jest/globals" "^27.4.6"
+    "@jest/source-map" "^27.4.0"
+    "@jest/test-result" "^27.4.6"
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
     chalk "^4.0.0"
-    cjs-module-lexer "^0.6.0"
+    cjs-module-lexer "^1.0.0"
     collect-v8-coverage "^1.0.0"
-    exit "^0.1.2"
+    execa "^5.0.0"
     glob "^7.1.3"
     graceful-fs "^4.2.4"
-    jest-config "^26.6.3"
-    jest-haste-map "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-mock "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.6.2"
-    jest-snapshot "^26.6.2"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
+    jest-haste-map "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-mock "^27.4.6"
+    jest-regex-util "^27.4.0"
+    jest-resolve "^27.4.6"
+    jest-snapshot "^27.4.6"
+    jest-util "^27.4.2"
     slash "^3.0.0"
     strip-bom "^4.0.0"
-    yargs "^15.4.1"
 
 jest-serializer-vue@^2.0.2:
   version "2.0.2"
@@ -4493,34 +4419,40 @@ jest-serializer-vue@^2.0.2:
   dependencies:
     pretty "2.0.0"
 
-jest-serializer@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1"
-  integrity sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==
+jest-serializer@^27.4.0:
+  version "27.4.0"
+  resolved "https://registry.npmjs.org/jest-serializer/-/jest-serializer-27.4.0.tgz#34866586e1cae2388b7d12ffa2c7819edef5958a"
+  integrity sha512-RDhpcn5f1JYTX2pvJAGDcnsNTnsV9bjYPU8xcV+xPwOXnUPOQwf4ZEuiU6G9H1UztH+OapMgu/ckEVwO87PwnQ==
   dependencies:
     "@types/node" "*"
     graceful-fs "^4.2.4"
 
-jest-snapshot@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.6.2.tgz#f3b0af1acb223316850bd14e1beea9837fb39c84"
-  integrity sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==
+jest-snapshot@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-27.4.6.tgz#e2a3b4fff8bdce3033f2373b2e525d8b6871f616"
+  integrity sha512-fafUCDLQfzuNP9IRcEqaFAMzEe7u5BF7mude51wyWv7VRex60WznZIC7DfKTgSIlJa8aFzYmXclmN328aqSDmQ==
   dependencies:
+    "@babel/core" "^7.7.2"
+    "@babel/generator" "^7.7.2"
+    "@babel/plugin-syntax-typescript" "^7.7.2"
+    "@babel/traverse" "^7.7.2"
     "@babel/types" "^7.0.0"
-    "@jest/types" "^26.6.2"
+    "@jest/transform" "^27.4.6"
+    "@jest/types" "^27.4.2"
     "@types/babel__traverse" "^7.0.4"
-    "@types/prettier" "^2.0.0"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
     chalk "^4.0.0"
-    expect "^26.6.2"
+    expect "^27.4.6"
     graceful-fs "^4.2.4"
-    jest-diff "^26.6.2"
-    jest-get-type "^26.3.0"
-    jest-haste-map "^26.6.2"
-    jest-matcher-utils "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-resolve "^26.6.2"
+    jest-diff "^27.4.6"
+    jest-get-type "^27.4.0"
+    jest-haste-map "^27.4.6"
+    jest-matcher-utils "^27.4.6"
+    jest-message-util "^27.4.6"
+    jest-util "^27.4.2"
     natural-compare "^1.4.0"
-    pretty-format "^26.6.2"
+    pretty-format "^27.4.6"
     semver "^7.3.2"
 
 jest-transform-stub@^2.0.0:
@@ -4528,17 +4460,17 @@ jest-transform-stub@^2.0.0:
   resolved "https://registry.yarnpkg.com/jest-transform-stub/-/jest-transform-stub-2.0.0.tgz#19018b0851f7568972147a5d60074b55f0225a7d"
   integrity sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==
 
-jest-util@^26.1.0, jest-util@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
-  integrity sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==
+jest-util@^27.0.0, jest-util@^27.4.2:
+  version "27.4.2"
+  resolved "https://registry.npmjs.org/jest-util/-/jest-util-27.4.2.tgz#ed95b05b1adfd761e2cda47e0144c6a58e05a621"
+  integrity sha512-YuxxpXU6nlMan9qyLuxHaMMOzXAl5aGZWCSzben5DhLHemYQxCc4YK+4L3ZrCutT8GPQ+ui9k5D8rUJoDioMnA==
   dependencies:
-    "@jest/types" "^26.6.2"
+    "@jest/types" "^27.4.2"
     "@types/node" "*"
     chalk "^4.0.0"
+    ci-info "^3.2.0"
     graceful-fs "^4.2.4"
-    is-ci "^2.0.0"
-    micromatch "^4.0.2"
+    picomatch "^2.2.3"
 
 jest-util@^27.0.2:
   version "27.0.2"
@@ -4552,43 +4484,30 @@ jest-util@^27.0.2:
     is-ci "^3.0.0"
     picomatch "^2.2.3"
 
-jest-validate@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.6.2.tgz#23d380971587150467342911c3d7b4ac57ab20ec"
-  integrity sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==
+jest-validate@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-validate/-/jest-validate-27.4.6.tgz#efc000acc4697b6cf4fa68c7f3f324c92d0c4f1f"
+  integrity sha512-872mEmCPVlBqbA5dToC57vA3yJaMRfIdpCoD3cyHWJOMx+SJwLNw0I71EkWs41oza/Er9Zno9XuTkRYCPDUJXQ==
   dependencies:
-    "@jest/types" "^26.6.2"
-    camelcase "^6.0.0"
+    "@jest/types" "^27.4.2"
+    camelcase "^6.2.0"
     chalk "^4.0.0"
-    jest-get-type "^26.3.0"
+    jest-get-type "^27.4.0"
     leven "^3.1.0"
-    pretty-format "^26.6.2"
+    pretty-format "^27.4.6"
 
-jest-watch-typeahead@^0.6.1:
-  version "0.6.4"
-  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.6.4.tgz#ea70bf1bec34bd4f55b5b72d471b02d997899c3e"
-  integrity sha512-tGxriteVJqonyrDj/xZHa0E2glKMiglMLQqISLCjxLUfeueRBh9VoRF2FKQyYO2xOqrWDTg7781zUejx411ZXA==
+jest-watch-typeahead@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/jest-watch-typeahead/-/jest-watch-typeahead-1.0.0.tgz#4de2ca1eb596acb1889752afbab84b74fcd99173"
+  integrity sha512-jxoszalAb394WElmiJTFBMzie/RDCF+W7Q29n5LzOPtcoQoHWfdUtHFkbhgf5NwWe8uMOxvKb/g7ea7CshfkTw==
   dependencies:
     ansi-escapes "^4.3.1"
     chalk "^4.0.0"
     jest-regex-util "^27.0.0"
     jest-watcher "^27.0.0"
-    slash "^3.0.0"
-    string-length "^4.0.1"
-    strip-ansi "^6.0.0"
-
-jest-watcher@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.6.2.tgz#a5b683b8f9d68dbcb1d7dae32172d2cca0592975"
-  integrity sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==
-  dependencies:
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    ansi-escapes "^4.2.1"
-    chalk "^4.0.0"
-    jest-util "^26.6.2"
-    string-length "^4.0.1"
+    slash "^4.0.0"
+    string-length "^5.0.1"
+    strip-ansi "^7.0.1"
 
 jest-watcher@^27.0.0:
   version "27.0.2"
@@ -4603,23 +4522,36 @@ jest-watcher@^27.0.0:
     jest-util "^27.0.2"
     string-length "^4.0.1"
 
-jest-worker@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
-  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
+jest-watcher@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-watcher/-/jest-watcher-27.4.6.tgz#673679ebeffdd3f94338c24f399b85efc932272d"
+  integrity sha512-yKQ20OMBiCDigbD0quhQKLkBO+ObGN79MO4nT7YaCuQ5SM+dkBNWE8cZX0FjU6czwMvWw6StWbe+Wv4jJPJ+fw==
+  dependencies:
+    "@jest/test-result" "^27.4.6"
+    "@jest/types" "^27.4.2"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^27.4.2"
+    string-length "^4.0.1"
+
+jest-worker@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-27.4.6.tgz#5d2d93db419566cb680752ca0792780e71b3273e"
+  integrity sha512-gHWJF/6Xi5CTG5QCvROr6GcmpIqNYpDJyc8A1h/DyXqH1tD6SnRCM0d3U5msV31D2LB/U+E0M+W4oyvKV44oNw==
   dependencies:
     "@types/node" "*"
     merge-stream "^2.0.0"
-    supports-color "^7.0.0"
+    supports-color "^8.0.0"
 
-jest@^26.5.6, jest@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.3.tgz#40e8fdbe48f00dfa1f0ce8121ca74b88ac9148ef"
-  integrity sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==
+jest@^27.1.0, jest@^27.4.5:
+  version "27.4.7"
+  resolved "https://registry.npmjs.org/jest/-/jest-27.4.7.tgz#87f74b9026a1592f2da05b4d258e57505f28eca4"
+  integrity sha512-8heYvsx7nV/m8m24Vk26Y87g73Ba6ueUd0MWed/NXMhSZIm62U/llVbS0PJe1SHunbyXjJ/BqG1z9bFjGUIvTg==
   dependencies:
-    "@jest/core" "^26.6.3"
+    "@jest/core" "^27.4.7"
     import-local "^3.0.2"
-    jest-cli "^26.6.3"
+    jest-cli "^27.4.7"
 
 joi@^17.4.0:
   version "17.4.0"
@@ -4673,10 +4605,17 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-jsdom@^16.4.0:
-  version "16.6.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.6.0.tgz#f79b3786682065492a3da6a60a4695da983805ac"
-  integrity sha512-Ty1vmF4NHJkolaEmdjtxTfSfkdb8Ywarwf63f+F8/mDD1uLSSWDxDuMiZxiPhwunLrn9LOSVItWj4bLYsLN3Dg==
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+jsdom@^16.6.0:
+  version "16.7.0"
+  resolved "https://registry.npmjs.org/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
+  integrity sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==
   dependencies:
     abab "^2.0.5"
     acorn "^8.2.4"
@@ -4703,7 +4642,7 @@ jsdom@^16.4.0:
     whatwg-encoding "^1.0.5"
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.5.0"
-    ws "^7.4.5"
+    ws "^7.4.6"
     xml-name-validator "^3.0.0"
 
 jsesc@^2.5.1:
@@ -4721,11 +4660,6 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
-json-parse-better-errors@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
-  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
-
 json-parse-even-better-errors@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
@@ -4736,11 +4670,6 @@ json-schema-traverse@^0.4.1:
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
-json-schema-traverse@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
-  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
-
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
@@ -4770,15 +4699,6 @@ jsonc-parser@^3.0.0:
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.0.0.tgz#abdd785701c7e7eaca8a9ec8cf070ca51a745a22"
   integrity sha512-fQzRfAbIBnR0IQvftw9FJveWiHp72Fg20giDrHz6TdfB12UH/uue0D3hm57UB5KgAVuniLMCaS8P1IMj9NR7cA==
 
-jsonfile@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
-  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
-  dependencies:
-    universalify "^2.0.0"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 jstransformer@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/jstransformer/-/jstransformer-1.0.0.tgz#ed8bf0921e2f3f1ed4d5c1a44f68709ed24722c3"
@@ -4801,30 +4721,13 @@ keyv@^4.0.0:
   dependencies:
     json-buffer "3.0.1"
 
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+kind-of@^3.0.2:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
   integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
   dependencies:
     is-buffer "^1.1.5"
 
-kind-of@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
-  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
-  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
-
-kind-of@^6.0.0, kind-of@^6.0.2:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
-  integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
-
 kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@@ -4876,16 +4779,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-load-json-file@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
-  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^4.0.0"
-    pify "^3.0.0"
-    strip-bom "^3.0.0"
-
 loader-utils@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
@@ -4910,27 +4803,17 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash.clonedeep@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
-  integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
+lodash.memoize@4.x:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash.topath@^4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
-  integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=
-
-lodash.truncate@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
-  integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
-
-lodash@4.17.21, lodash@4.x, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
+lodash@4.17.21, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -5004,47 +4887,16 @@ makeerror@1.0.x:
   dependencies:
     tmpl "1.0.x"
 
-map-cache@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
-  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
-
-map-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
-  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
-  dependencies:
-    object-visit "^1.0.0"
-
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.3.0:
+merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-micromatch@^3.1.4:
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
-  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    braces "^2.3.1"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    extglob "^2.0.4"
-    fragment-cache "^0.2.1"
-    kind-of "^6.0.2"
-    nanomatch "^1.2.9"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.2"
-
 micromatch@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
@@ -5066,17 +4918,17 @@ mime-db@1.48.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.48.0.tgz#e35b31045dd7eada3aaad537ed88a33afbef2d1d"
   integrity sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==
 
-mime-db@1.49.0:
-  version "1.49.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.49.0.tgz#f3dfde60c99e9cf3bc9701d687778f537001cbed"
-  integrity sha512-CIc8j9URtOVApSFCQIF+VBkX1RwXp/oMMOrqdyXSBXq5RWNEsRfyj1kiRnQgmNXmHxPoFIxOroKA3zcU9P+nAA==
+mime-db@1.51.0:
+  version "1.51.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz#d9ff62451859b18342d960850dc3cfb77e63fb0c"
+  integrity sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==
 
-mime-types@2.1.32:
-  version "2.1.32"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.32.tgz#1d00e89e7de7fe02008db61001d9e02852670fd5"
-  integrity sha512-hJGaVS4G4c9TSMYh2n6SQAGrC4RnfU+daP8G7cSCmaqNjiOoUY0VHCMS42pxnQmVF1GWwFhbHWn3RIxCqTmZ9A==
+mime-types@2.1.34:
+  version "2.1.34"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
+  integrity sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==
   dependencies:
-    mime-db "1.49.0"
+    mime-db "1.51.0"
 
 mime-types@^2.1.12:
   version "2.1.31"
@@ -5117,24 +4969,11 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-mixin-deep@^1.2.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
-  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
-  dependencies:
-    for-in "^1.0.2"
-    is-extendable "^1.0.1"
-
-mkdirp@1.x, mkdirp@^1.0.4:
+mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-modern-normalize@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
-  integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -5160,27 +4999,10 @@ nanoid@^3.1.20:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
   integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
 
-nanoid@^3.1.23:
-  version "3.1.23"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
-  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
-
-nanomatch@^1.2.9:
-  version "1.2.13"
-  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
-  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    fragment-cache "^0.2.1"
-    is-windows "^1.0.2"
-    kind-of "^6.0.2"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
+nanoid@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
+  integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
 
 natural-compare@^1.4.0:
   version "1.4.0"
@@ -5199,13 +5021,6 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-node-emoji@^1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
-  integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
-  dependencies:
-    lodash "^4.17.21"
-
 node-fetch@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
@@ -5221,36 +5036,19 @@ node-ipc@^9.1.1:
   resolved "https://registry.yarnpkg.com/node-ipc/-/node-ipc-9.1.4.tgz#2acf962681afdac2602876d98fe6434d54d9bd3c"
   integrity sha512-A+f0mn2KxUt1uRTSd5ktxQUsn2OEhj5evo7NUi/powBzMSZ0vocdzDjlq9QN2v3LH6CJi3e5xAenpZ1QwU5A8g==
   dependencies:
-    event-pubsub "4.3.0"
-    js-message "1.0.7"
-    js-queue "2.0.2"
-
-node-modules-regexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
-  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
-
-node-notifier@^8.0.0:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-8.0.2.tgz#f3167a38ef0d2c8a866a83e318c1ba0efeb702c5"
-  integrity sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==
-  dependencies:
-    growly "^1.3.0"
-    is-wsl "^2.2.0"
-    semver "^7.3.2"
-    shellwords "^0.1.1"
-    uuid "^8.3.0"
-    which "^2.0.2"
+    event-pubsub "4.3.0"
+    js-message "1.0.7"
+    js-queue "2.0.2"
 
 node-releases@^1.1.71:
   version "1.1.73"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
   integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
 
-node-releases@^1.1.75:
-  version "1.1.75"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.75.tgz#6dd8c876b9897a1b8e5a02de26afa79bb54ebbfe"
-  integrity sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==
+node-releases@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
+  integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
 
 nopt@^5.0.0:
   version "5.0.0"
@@ -5259,7 +5057,7 @@ nopt@^5.0.0:
   dependencies:
     abbrev "1"
 
-normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
+normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
   integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
@@ -5269,13 +5067,6 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
-  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
-  dependencies:
-    remove-trailing-separator "^1.0.1"
-
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -5320,15 +5111,6 @@ object-assign@^4.1.1:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
-object-copy@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
-  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
-  dependencies:
-    copy-descriptor "^0.1.0"
-    define-property "^0.2.5"
-    kind-of "^3.0.3"
-
 object-hash@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
@@ -5349,13 +5131,6 @@ object-keys@^1.0.12, object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object-visit@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
-  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
-  dependencies:
-    isobject "^3.0.0"
-
 object.assign@^4.1.0, object.assign@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
@@ -5366,30 +5141,23 @@ object.assign@^4.1.0, object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.entries@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.4.tgz#43ccf9a50bc5fd5b649d45ab1a579f24e088cafd"
-  integrity sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==
+object.entries@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
+  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.2"
+    es-abstract "^1.19.1"
 
-object.pick@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
-  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
-  dependencies:
-    isobject "^3.0.1"
-
-object.values@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.4.tgz#0d273762833e816b693a637d30073e7051535b30"
-  integrity sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==
+object.values@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
+  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.2"
+    es-abstract "^1.19.1"
 
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
@@ -5484,11 +5252,6 @@ p-cancelable@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-2.1.1.tgz#aab7fbd416582fa32a3db49859c122487c5ed2cf"
   integrity sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==
 
-p-each-series@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.2.0.tgz#105ab0357ce72b202a8a8b94933672657b5e2a9a"
-  integrity sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==
-
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -5559,14 +5322,6 @@ parse-json@5.2.0, parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
 parse-path@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/parse-path/-/parse-path-4.0.3.tgz#82d81ec3e071dcc4ab49aa9f2c9c0b8966bb22bf"
@@ -5592,11 +5347,6 @@ parse5@6.0.1:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
-pascalcase@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
-  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
-
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -5627,18 +5377,21 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
-  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
-  dependencies:
-    pify "^3.0.0"
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
@@ -5649,24 +5402,10 @@ picomatch@^2.2.2, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
-pify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
-
-pirates@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
-  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
-  dependencies:
-    node-modules-regexp "^1.0.0"
-
-pkg-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
-  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
-  dependencies:
-    find-up "^2.1.0"
+pirates@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
+  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
 
 pkg-dir@^4.2.0:
   version "4.2.0"
@@ -5675,25 +5414,12 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-pkg-up@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
-  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
-  dependencies:
-    find-up "^2.1.0"
-
-posix-character-classes@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
-  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
-
-postcss-js@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33"
-  integrity sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==
+postcss-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
+  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
   dependencies:
     camelcase-css "^2.0.1"
-    postcss "^8.1.6"
 
 postcss-load-config@^3.1.0:
   version "3.1.0"
@@ -5711,16 +5437,6 @@ postcss-nested@5.0.6:
   dependencies:
     postcss-selector-parser "^6.0.6"
 
-postcss-selector-parser@^6.0.2:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
-  integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
-  dependencies:
-    cssesc "^3.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-    util-deprecate "^1.0.2"
-
 postcss-selector-parser@^6.0.6:
   version "6.0.6"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea"
@@ -5729,17 +5445,20 @@ postcss-selector-parser@^6.0.6:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^3.3.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+postcss-selector-parser@^6.0.9:
+  version "6.0.9"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
+  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
 
-postcss-value-parser@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
-  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.1.10, postcss@^8.1.6, postcss@^8.2.1:
+postcss@^8.1.10:
   version "8.2.7"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.7.tgz#48ed8d88b4de10afa0dfd1c3f840aa57b55c4d47"
   integrity sha512-DsVLH3xJzut+VT+rYr0mtvOtpTjSyqDwPf5EZWXcb0uAKfitGpTY9Ec+afi2+TgdN8rWS9Cs88UDYehKo/RvOw==
@@ -5748,14 +5467,14 @@ postcss@^8.1.10, postcss@^8.1.6, postcss@^8.2.1:
     nanoid "^3.1.20"
     source-map "^0.6.1"
 
-postcss@^8.3.6:
-  version "8.3.6"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea"
-  integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==
+postcss@^8.4.5:
+  version "8.4.6"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
+  integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
   dependencies:
-    colorette "^1.2.2"
-    nanoid "^3.1.23"
-    source-map-js "^0.6.2"
+    nanoid "^3.2.0"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -5772,12 +5491,12 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
   integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=
 
-prettier@^2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.4.1.tgz#671e11c89c14a4cfc876ce564106c4a6726c9f5c"
-  integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
 
-pretty-format@^26.0.0, pretty-format@^26.6.2:
+pretty-format@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
   integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
@@ -5787,6 +5506,15 @@ pretty-format@^26.0.0, pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.0.0, pretty-format@^27.4.6:
+  version "27.4.6"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-27.4.6.tgz#1b784d2f53c68db31797b2348fa39b49e31846b7"
+  integrity sha512-NblstegA1y/RJW2VyML+3LlpFjzx62cUrtBIKIWDXEDkjNeleA7Od7nrzcs/VLQvAeV4CgSYhrN39DRN88Qi/g==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-format@^27.0.2:
   version "27.0.2"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.0.2.tgz#9283ff8c4f581b186b2d4da461617143dca478a4"
@@ -5797,11 +5525,6 @@ pretty-format@^27.0.2:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-hrtime@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
-  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
-
 pretty@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pretty/-/pretty-2.0.0.tgz#adbc7960b7bbfe289a557dc5f737619a220d06a5"
@@ -5811,11 +5534,6 @@ pretty@2.0.0:
     extend-shallow "^2.0.1"
     js-beautify "^1.6.12"
 
-progress@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
-  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
-
 promise@^7.0.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
@@ -5974,16 +5692,6 @@ pupa@^2.1.1:
   dependencies:
     escape-goat "^2.0.0"
 
-purgecss@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742"
-  integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==
-  dependencies:
-    commander "^6.0.0"
-    glob "^7.0.0"
-    postcss "^8.2.1"
-    postcss-selector-parser "^6.0.2"
-
 qs@^6.9.4:
   version "6.10.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.1.tgz#4931482fa8d647a5aab799c5271d2133b981fb6a"
@@ -6026,33 +5734,7 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-read-pkg-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
-  integrity sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=
-  dependencies:
-    find-up "^2.0.0"
-    read-pkg "^3.0.0"
-
-read-pkg-up@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
-  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
-  dependencies:
-    find-up "^4.1.0"
-    read-pkg "^5.2.0"
-    type-fest "^0.8.1"
-
-read-pkg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
-  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
-  dependencies:
-    load-json-file "^4.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^3.0.0"
-
-read-pkg@^5.1.1, read-pkg@^5.2.0:
+read-pkg@^5.1.1:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
   integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
@@ -6085,31 +5767,15 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
-reduce-css-calc@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
-  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss-value-parser "^3.3.0"
-
 regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
   integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
 
-regex-not@^1.0.0, regex-not@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
-  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
-  dependencies:
-    extend-shallow "^3.0.2"
-    safe-regex "^1.1.0"
-
-regexpp@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
-  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
+regexpp@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
 registry-auth-token@^4.0.0:
   version "4.2.1"
@@ -6125,76 +5791,45 @@ registry-url@^5.0.0:
   dependencies:
     rc "^1.2.8"
 
-release-it@^14.11.6:
-  version "14.11.6"
-  resolved "https://registry.yarnpkg.com/release-it/-/release-it-14.11.6.tgz#a285eaac25f9f3a6d47e688911e539af53a74446"
-  integrity sha512-6BNcuzFZHThBUBJ/xYw/bxZ+58CAwrwf1zgmjq2Ibl3nlDZbjphHG6iqxkJu7mZ8TIWs6NjloEAhqpjeXoN//Q==
+release-it@^14.11.8:
+  version "14.12.4"
+  resolved "https://registry.npmjs.org/release-it/-/release-it-14.12.4.tgz#0fd13de85e382323c634a0697a601437e042123a"
+  integrity sha512-lqf9PMsj7ycCqFHGag8Uv7cE1hNsKa+yKUMe+Fkh9fdOfxu2F01On+YUefRCP0DuQthmr/WyLCYdrjThMEkWFQ==
   dependencies:
     "@iarna/toml" "2.2.5"
-    "@octokit/rest" "18.10.0"
+    "@octokit/rest" "18.12.0"
     async-retry "1.3.3"
     chalk "4.1.2"
     cosmiconfig "7.0.1"
-    debug "4.3.2"
-    deprecated-obj "2.0.0"
+    debug "4.3.3"
     execa "5.1.1"
     form-data "4.0.0"
     git-url-parse "11.6.0"
     globby "11.0.4"
-    got "11.8.2"
+    got "11.8.3"
     import-cwd "3.0.0"
-    inquirer "8.1.5"
-    is-ci "3.0.0"
+    inquirer "8.2.0"
+    is-ci "3.0.1"
     lodash "4.17.21"
-    mime-types "2.1.32"
+    mime-types "2.1.34"
     new-github-release-url "1.0.0"
     open "7.4.2"
     ora "5.4.1"
     os-name "4.0.1"
     parse-json "5.2.0"
     semver "7.3.5"
-    shelljs "0.8.4"
+    shelljs "0.8.5"
     update-notifier "5.1.0"
     url-join "4.0.1"
     uuid "8.3.2"
     yaml "1.10.2"
     yargs-parser "20.2.9"
 
-remove-trailing-separator@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
-  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
-
-repeat-element@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
-  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
-
-repeat-string@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
-  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
-
-request-light@^0.5.4:
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/request-light/-/request-light-0.5.4.tgz#497a98c6d8ae49536417a5e2d7f383b934f3e38c"
-  integrity sha512-t3566CMweOFlUk7Y1DJMu5OrtpoZEb6aSTsLQVT3wtrIEJ5NhcY9G/Oqxvjllzl4a15zXfFlcr9q40LbLVQJqw==
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
 
-require-from-string@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
-  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
-
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
-  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
-
 resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
@@ -6222,7 +5857,12 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.20.0:
+resolve.exports@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
+  integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
+
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -6230,6 +5870,15 @@ resolve@^1.1.6, resolve@^1.10.0, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.18
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
+resolve@^1.21.0:
+  version "1.22.0"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
@@ -6252,11 +5901,6 @@ restore-cursor@^3.1.0:
     onetime "^5.1.0"
     signal-exit "^3.0.2"
 
-ret@~0.1.10:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
-  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
-
 retry@0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
@@ -6267,16 +5911,6 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rgb-regex@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
-  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
-
-rgba-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
-  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -6284,17 +5918,12 @@ rimraf@^3.0.0, rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup@^2.38.5:
-  version "2.40.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.40.0.tgz#efc218eaede7ab590954df50f96195188999c304"
-  integrity sha512-WiOGAPbXoHu+TOz6hyYUxIksOwsY/21TRWoO593jgYt8mvYafYqQl+axaA8y1z2HFazNUUrsMSjahV2A6/2R9A==
+rollup@^2.59.0:
+  version "2.67.0"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-2.67.0.tgz#496de7e641dbe39f681c5a82419cb5013917d406"
+  integrity sha512-W83AaERwvDiHwHEF/dfAfS3z1Be5wf7n+pO3ZAO5IQadCT2lBTr7WQ2MwZZe+nodbD+n3HtC4OCOAdsOPPcKZQ==
   optionalDependencies:
-    fsevents "~2.3.1"
-
-rsvp@^4.8.4:
-  version "4.8.5"
-  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
-  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
+    fsevents "~2.3.2"
 
 run-async@^2.4.0:
   version "2.4.1"
@@ -6325,33 +5954,11 @@ safe-buffer@~5.2.0:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
-  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
-  dependencies:
-    ret "~0.1.10"
-
 "safer-buffer@>= 2.1.2 < 3":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sane@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
-  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
-  dependencies:
-    "@cnakazawa/watch" "^1.0.3"
-    anymatch "^2.0.0"
-    capture-exit "^2.0.0"
-    exec-sh "^0.3.2"
-    execa "^1.0.0"
-    fb-watchman "^2.0.0"
-    micromatch "^3.1.4"
-    minimist "^1.1.1"
-    walker "~1.0.5"
-
 saxes@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
@@ -6383,28 +5990,13 @@ semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.2.1, semver@^7.3.2:
+semver@^7.3.2:
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.4.tgz#27aaa7d2e4ca76452f98d3add093a72c943edc97"
   integrity sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==
   dependencies:
     lru-cache "^6.0.0"
 
-set-blocking@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
-
-set-value@^2.0.0, set-value@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
-  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.3"
-    split-string "^3.0.1"
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -6434,20 +6026,15 @@ shell-quote@^1.6.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
-shelljs@0.8.4:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.4.tgz#de7684feeb767f8716b326078a8a00875890e3c2"
-  integrity sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==
+shelljs@0.8.5:
+  version "0.8.5"
+  resolved "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c"
+  integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
   dependencies:
     glob "^7.0.0"
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
-shellwords@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
-  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
-
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -6472,13 +6059,6 @@ signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.4.tgz#366a4684d175b9cab2081e3681fda3747b6c51d7"
   integrity sha512-rqYhcAnZ6d/vTPGghdrw7iumdcbXpsk1b8IG/rz+VWV51DM0p7XCtMoJ3qhPLIbp3tvyt3pKRbaaEMZYpHto8Q==
 
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
-  dependencies:
-    is-arrayish "^0.3.1"
-
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -6489,51 +6069,17 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-slice-ansi@^4.0.0:
+slash@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
-  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
-  dependencies:
-    ansi-styles "^4.0.0"
-    astral-regex "^2.0.0"
-    is-fullwidth-code-point "^3.0.0"
-
-snapdragon-node@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
-  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
-  dependencies:
-    define-property "^1.0.0"
-    isobject "^3.0.0"
-    snapdragon-util "^3.0.1"
+  resolved "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
-snapdragon-util@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
-  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
-  dependencies:
-    kind-of "^3.2.0"
-
-snapdragon@^0.8.1:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
-  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
-  dependencies:
-    base "^0.11.1"
-    debug "^2.2.0"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    map-cache "^0.2.2"
-    source-map "^0.5.6"
-    source-map-resolve "^0.5.0"
-    use "^3.1.0"
-
-source-map-js@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
-  integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
-source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
+source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
   integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
@@ -6562,7 +6108,7 @@ source-map@0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
   integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
 
-source-map@^0.5.0, source-map@^0.5.6:
+source-map@^0.5.0:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -6577,9 +6123,9 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
-sourcemap-codec@^1.4.4:
+sourcemap-codec@1.4.8, sourcemap-codec@^1.4.4:
   version "1.4.8"
-  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
 spdx-correct@^3.0.0:
@@ -6613,33 +6159,18 @@ split-on-first@^1.0.0:
   resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
   integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
 
-split-string@^3.0.1, split-string@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
-  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
-  dependencies:
-    extend-shallow "^3.0.0"
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
-stack-utils@^2.0.2, stack-utils@^2.0.3:
+stack-utils@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.3.tgz#cd5f030126ff116b78ccb3c027fe302713b61277"
   integrity sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==
   dependencies:
     escape-string-regexp "^2.0.0"
 
-static-extend@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
-  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
-  dependencies:
-    define-property "^0.2.5"
-    object-copy "^0.1.0"
-
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
@@ -6653,6 +6184,14 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
+string-length@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/string-length/-/string-length-5.0.1.tgz#3d647f497b6e8e8d41e422f7e0b23bc536c8381e"
+  integrity sha512-9Ep08KAMUn0OadnVaBuRdE2l615CQ508kr0XMadjClfYpdCyvrbFp6Taebo8yyxokQ4viUd/xPPUA4FGgUa0ow==
+  dependencies:
+    char-regex "^2.0.0"
+    strip-ansi "^7.0.1"
+
 string-width@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
@@ -6708,6 +6247,20 @@ strip-ansi@^6.0.0:
   dependencies:
     ansi-regex "^5.0.0"
 
+strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
+  integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==
+  dependencies:
+    ansi-regex "^6.0.1"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
@@ -6752,6 +6305,13 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-color@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
+  dependencies:
+    has-flag "^4.0.0"
+
 supports-hyperlinks@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz#4f77b42488765891774b70c79babd87f9bd594bb"
@@ -6760,60 +6320,41 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-table@^6.0.9:
-  version "6.7.1"
-  resolved "https://registry.yarnpkg.com/table/-/table-6.7.1.tgz#ee05592b7143831a8c94f3cee6aae4c1ccef33e2"
-  integrity sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==
-  dependencies:
-    ajv "^8.0.1"
-    lodash.clonedeep "^4.5.0"
-    lodash.truncate "^4.4.2"
-    slice-ansi "^4.0.0"
-    string-width "^4.2.0"
-    strip-ansi "^6.0.0"
-
-tailwindcss@^2.2.15:
-  version "2.2.15"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.15.tgz#8bee3ebe68b988c050508ce20633f35b040dd9fe"
-  integrity sha512-WgV41xTMbnSoTNMNnJvShQZ+8GmY86DmXTrCgnsveNZJdlybfwCItV8kAqjYmU49YiFr+ofzmT1JlAKajBZboQ==
+tailwindcss@^3.0.7:
+  version "3.0.18"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.18.tgz#ea4825e6496d77dc21877b6b61c7cc56cda3add5"
+  integrity sha512-ihPTpEyA5ANgZbwKlgrbfnzOp9R5vDHFWmqxB1PT8NwOGCOFVVMl+Ps1cQQ369acaqqf1BEF77roCwK0lvNmTw==
   dependencies:
     arg "^5.0.1"
-    bytes "^3.0.0"
     chalk "^4.1.2"
-    chokidar "^3.5.2"
-    color "^4.0.1"
+    chokidar "^3.5.3"
+    color-name "^1.1.4"
     cosmiconfig "^7.0.1"
     detective "^5.2.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
-    fast-glob "^3.2.7"
-    fs-extra "^10.0.0"
-    glob-parent "^6.0.1"
-    html-tags "^3.1.0"
-    is-color-stop "^1.1.0"
-    is-glob "^4.0.1"
-    lodash "^4.17.21"
-    lodash.topath "^4.5.2"
-    modern-normalize "^1.1.0"
-    node-emoji "^1.11.0"
+    fast-glob "^3.2.11"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
     normalize-path "^3.0.0"
     object-hash "^2.2.0"
-    postcss-js "^3.0.3"
+    postcss-js "^4.0.0"
     postcss-load-config "^3.1.0"
     postcss-nested "5.0.6"
-    postcss-selector-parser "^6.0.6"
-    postcss-value-parser "^4.1.0"
-    pretty-hrtime "^1.0.3"
-    purgecss "^4.0.3"
+    postcss-selector-parser "^6.0.9"
+    postcss-value-parser "^4.2.0"
     quick-lru "^5.1.1"
-    reduce-css-calc "^2.1.8"
-    resolve "^1.20.0"
-    tmp "^0.2.1"
+    resolve "^1.21.0"
 
 terminal-link@^2.0.0:
   version "2.1.1"
@@ -6837,10 +6378,10 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-throat@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
-  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
+throat@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
+  integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
 
 through@^2.3.6:
   version "2.3.8"
@@ -6854,13 +6395,6 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
-tmp@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
-  dependencies:
-    rimraf "^3.0.0"
-
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -6871,26 +6405,11 @@ to-fast-properties@^2.0.0:
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
-to-object-path@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
-  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
-  dependencies:
-    kind-of "^3.0.2"
-
 to-readable-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/to-readable-stream/-/to-readable-stream-1.0.0.tgz#ce0aa0c2f3df6adf852efb404a783e77c0475771"
   integrity sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==
 
-to-regex-range@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
-  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
-  dependencies:
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -6898,16 +6417,6 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-to-regex@^3.0.1, to-regex@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
-  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
-  dependencies:
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    regex-not "^1.0.2"
-    safe-regex "^1.1.0"
-
 token-stream@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-1.0.0.tgz#cc200eab2613f4166d27ff9afc7ca56d49df6eb4"
@@ -6929,19 +6438,17 @@ tr46@^2.1.0:
   dependencies:
     punycode "^2.1.1"
 
-ts-jest@^26.5.6:
-  version "26.5.6"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-26.5.6.tgz#c32e0746425274e1dfe333f43cd3c800e014ec35"
-  integrity sha512-rua+rCP8DxpA8b4DQD/6X2HQS8Zy/xzViVYfEs2OQu68tkCuKLV0Md8pmX55+W24uRIyAsf/BajRfxOs+R2MKA==
+ts-jest@^27.1.2:
+  version "27.1.3"
+  resolved "https://registry.npmjs.org/ts-jest/-/ts-jest-27.1.3.tgz#1f723e7e74027c4da92c0ffbd73287e8af2b2957"
+  integrity sha512-6Nlura7s6uM9BVUAoqLH7JHyMXjz8gluryjpPXxr3IxZdAXnU6FhjvVLHFtfd1vsE1p8zD1OJfskkc0jhTSnkA==
   dependencies:
     bs-logger "0.x"
-    buffer-from "1.x"
     fast-json-stable-stringify "2.x"
-    jest-util "^26.1.0"
+    jest-util "^27.0.0"
     json5 "2.x"
-    lodash "4.x"
+    lodash.memoize "4.x"
     make-error "1.x"
-    mkdirp "1.x"
     semver "7.x"
     yargs-parser "20.x"
 
@@ -6950,10 +6457,10 @@ ts-vue-plugin@^0.1.3:
   resolved "https://registry.yarnpkg.com/ts-vue-plugin/-/ts-vue-plugin-0.1.3.tgz#f752752e64b315195bef3374d8115e741994e5a3"
   integrity sha512-FBfURLnwEMc9ynbdRHjI/X0R17mCyi/BdnyMFxIU833nMeprTsCNEIZSYdDybYx04jc+LbzkjgfYVk+GeEV+Hg==
 
-tsconfig-paths@^3.11.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.11.0.tgz#954c1fe973da6339c78e06b03ce2e48810b65f36"
-  integrity sha512-7ecdYDnIdmv639mmDwslG6KQg1Z9STTz1j7Gcz0xa+nshh/gKDAHcPxRbWOsA3SPp0tXP2leTcY9Kw+NAkfZzA==
+tsconfig-paths@^3.12.0:
+  version "3.12.0"
+  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.12.0.tgz#19769aca6ee8f6a1a341e38c8fa45dd9fb18899b"
+  integrity sha512-e5adrnOYT6zqVnWqZu7i/BQ3BnhzvGbjEjejFXO20lKIKpwTaupkCPgEfv4GZK1IBciJUEhYs3J3p75FdaTFVg==
   dependencies:
     "@types/json5" "^0.0.29"
     json5 "^1.0.1"
@@ -7026,11 +6533,6 @@ type-fest@^0.6.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
   integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
 
-type-fest@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
-  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
-
 typedarray-to-buffer@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
@@ -7038,20 +6540,10 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@^4.4.3:
-  version "4.4.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.3.tgz#bdc5407caa2b109efd4f82fe130656f977a29324"
-  integrity sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==
-
-unbox-primitive@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.0.tgz#eeacbc4affa28e9b3d36b5eaeccc50b3251b1d3f"
-  integrity sha512-P/51NX+JXyxK/aigg1/ZgyccdAxm5K1+n8+tvqSntjOivPt19gvm1VC49RWYetsiub8WViUchdxl/KWHHB0kzA==
-  dependencies:
-    function-bind "^1.1.1"
-    has-bigints "^1.0.0"
-    has-symbols "^1.0.0"
-    which-boxed-primitive "^1.0.1"
+typescript@^4.5.4:
+  version "4.5.5"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
+  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
 
 unbox-primitive@^1.0.1:
   version "1.0.1"
@@ -7063,21 +6555,6 @@ unbox-primitive@^1.0.1:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
-union-value@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
-  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
-  dependencies:
-    arr-union "^3.1.0"
-    get-value "^2.0.6"
-    is-extendable "^0.1.1"
-    set-value "^2.0.1"
-
-uniq@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
-  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
-
 unique-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
@@ -7095,19 +6572,6 @@ universalify@^0.1.2:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
-universalify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
-  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
-
-unset-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
-  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
-  dependencies:
-    has-value "^0.3.1"
-    isobject "^3.0.0"
-
 upath@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/upath/-/upath-2.0.1.tgz#50c73dea68d6f6b990f51d279ce6081665d61a8b"
@@ -7157,17 +6621,12 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
-use@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
-  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
-uuid@8.3.2, uuid@^8.3.0:
+uuid@8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
@@ -7177,10 +6636,10 @@ v8-compile-cache@^2.0.3:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
-v8-to-istanbul@^7.0.0:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-7.1.2.tgz#30898d1a7fa0c84d225a2c1434fb958f290883c1"
-  integrity sha512-TxNb7YEUwkLXCQYeudi6lgQ/SZrzNO4kMdlqVxaZPUIUjCv6iSSypUQX70kNBSERpQ8fk48+d61FXk+tgqcWow==
+v8-to-istanbul@^8.1.0:
+  version "8.1.1"
+  resolved "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed"
+  integrity sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==
   dependencies:
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^1.6.0"
@@ -7194,15 +6653,15 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-vite@^2.5.10:
-  version "2.5.10"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.10.tgz#c598e3b5a7e1956ffc52eb3b3420d177fc2ed2a5"
-  integrity sha512-0ObiHTi5AHyXdJcvZ67HMsDgVpjT5RehvVKv6+Q0jFZ7zDI28PF5zK9mYz2avxdA+4iJMdwCz6wnGNnn4WX5Gg==
+vite@^2.7.7:
+  version "2.7.13"
+  resolved "https://registry.npmjs.org/vite/-/vite-2.7.13.tgz#99b56e27dfb1e4399e407cf94648f5c7fb9d77f5"
+  integrity sha512-Mq8et7f3aK0SgSxjDNfOAimZGW9XryfHRa/uV0jseQSilg+KhYDSoNb9h1rknOy6SuMkvNDLKCYAYYUMCE+IgQ==
   dependencies:
-    esbuild "^0.12.17"
-    postcss "^8.3.6"
+    esbuild "^0.13.12"
+    postcss "^8.4.5"
     resolve "^1.20.0"
-    rollup "^2.38.5"
+    rollup "^2.59.0"
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -7211,100 +6670,100 @@ void-elements@^3.1.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
   integrity sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=
 
-vscode-css-languageservice@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-5.1.4.tgz#07e4c63f1c3bb06e6f3f329c32b490d20a601bab"
-  integrity sha512-fIJZJMXbaBsK0ifBb2RmSiLtzwn6NrZnKn7O+0ziIjwAY+rPvSK9St2qqQXFU3reZVRAt/I4GBp40dC/THcUDA==
+vscode-css-languageservice@^5.1.9:
+  version "5.1.12"
+  resolved "https://registry.npmjs.org/vscode-css-languageservice/-/vscode-css-languageservice-5.1.12.tgz#eed3a6a1bb8a7a70636ef07cd742a034c71635a1"
+  integrity sha512-293C5C2732Rbhh3opTs+nQBpC5Dd+oYrEA8lc0OWdyt40oYmJ331FV7NMF1SLFSIcOFB5XveLiWUZak2oyc49Q==
   dependencies:
     vscode-languageserver-textdocument "^1.0.1"
     vscode-languageserver-types "^3.16.0"
     vscode-nls "^5.0.0"
     vscode-uri "^3.0.2"
 
-vscode-html-languageservice@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/vscode-html-languageservice/-/vscode-html-languageservice-4.0.7.tgz#94f2ed22c821965f828222d13b5aa541b358d992"
-  integrity sha512-P5TQMYpgxAdLs+PwpC7Lm+0lXCyQAC6kZ41YuPYNHVooC4XO7Y2+ncHBcQJVK4C9LU2cTOAl0lzq4WAxuwRHYw==
+vscode-html-languageservice@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.npmjs.org/vscode-html-languageservice/-/vscode-html-languageservice-4.2.1.tgz#b95077cffd19bf187e53c7bf79e3e0dd7edbc7cf"
+  integrity sha512-PgaToZVXJ44nFWEBuSINdDgVV6EnpC3MnXBsysR3O5TKcAfywbYeRGRy+Y4dVR7YeUgDvtb+JkJoSkaYC0mxXQ==
   dependencies:
     vscode-languageserver-textdocument "^1.0.1"
     vscode-languageserver-types "^3.16.0"
     vscode-nls "^5.0.0"
     vscode-uri "^3.0.2"
 
-vscode-json-languageservice@^4.1.7:
-  version "4.1.7"
-  resolved "https://registry.yarnpkg.com/vscode-json-languageservice/-/vscode-json-languageservice-4.1.7.tgz#18244d62b115a5818c7526ef4339438b7175dfaa"
-  integrity sha512-cwG5TwZyHYthsk2aS3W1dVgVP6Vwn3o+zscwN58uMgZt/nKuyxd9vdEB1F58Ix+S5kSKAnkUCP6hvulcoImQQQ==
+vscode-json-languageservice@^4.1.10:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-4.2.0.tgz#df0693b69ba2fbf0a6add896087b6f1c9c38f06a"
+  integrity sha512-XNawv0Vdy/sUK0S+hGf7cq/qsVAbIniGJr89TvZOqMCNJmpgKTy1e8PL1aWW0uy6BfWMG7vxa5lZb3ypuFtuGQ==
   dependencies:
     jsonc-parser "^3.0.0"
-    vscode-languageserver-textdocument "^1.0.1"
+    vscode-languageserver-textdocument "^1.0.3"
     vscode-languageserver-types "^3.16.0"
     vscode-nls "^5.0.0"
-    vscode-uri "^3.0.2"
+    vscode-uri "^3.0.3"
 
-vscode-jsonrpc@8.0.0-next.2, vscode-jsonrpc@^8.0.0-next.2:
-  version "8.0.0-next.2"
-  resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-8.0.0-next.2.tgz#285fc294be586e4768acd67e5a42efc738a5cac0"
-  integrity sha512-gxUyTBAjmwGkiHW/UaRScre2s4i98P8M7gnc3VB4DrVQUm3vQ0idi2cN9nbkfcjATx+uEt8C22j+MLN/8UzsJA==
+vscode-jsonrpc@8.0.0-next.6, vscode-jsonrpc@^8.0.0-next.5:
+  version "8.0.0-next.6"
+  resolved "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.0.0-next.6.tgz#981f7c065ecc7e7e8595f9da6d073ac592b34114"
+  integrity sha512-6Ld3RYjygn5Ih7CkAtcAwiDQC+rakj2O+PnASfNyYv3sLmm44eJpEKzuPUN30Iy2UB09AZg8T6LBKWTJTEJDVw==
 
-vscode-languageserver-protocol@3.17.0-next.8:
-  version "3.17.0-next.8"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.0-next.8.tgz#ef2eb7423b474cccd11384239de24488e7fe818c"
-  integrity sha512-P89vSuJ+FA5JzFmcOoZN13Ig1yd6LsiPOig0O5m5BSGuO/rplQegCd9J0wKpaTy7trf/SYHRoypnbUBdzy14sg==
+vscode-languageserver-protocol@^3.17.0-next.12:
+  version "3.17.0-next.14"
+  resolved "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.0-next.14.tgz#d3500bef2ad2889385cda4802acfe6549842164d"
+  integrity sha512-iangobY8dL6sFZkOx4OhRPJM9gN0I1caUsOVR+MnPozsqQUtwMXmbIcfaIf0Akp0pd3KhJDPf/tdwRX68QGeeA==
   dependencies:
-    vscode-jsonrpc "8.0.0-next.2"
-    vscode-languageserver-types "3.17.0-next.3"
+    vscode-jsonrpc "8.0.0-next.6"
+    vscode-languageserver-types "3.17.0-next.7"
 
 vscode-languageserver-textdocument@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.1.tgz#178168e87efad6171b372add1dea34f53e5d330f"
   integrity sha512-UIcJDjX7IFkck7cSkNNyzIz5FyvpQfY7sdzVy+wkKN/BLaD4DQ0ppXQrKePomCxTS7RrolK1I0pey0bG9eh8dA==
 
-vscode-languageserver-types@3.17.0-next.3:
-  version "3.17.0-next.3"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.0-next.3.tgz#e1f4311e08ea3193e81126154b6a342fc1c3dba3"
-  integrity sha512-VQcXnhKYxUW6OiRMhG++SzmZYMJwusXknJGd+FfdOnS1yHAo734OHyR0e2eEHDlv0/oWc8RZPgx/VKSKyondVg==
+vscode-languageserver-textdocument@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.4.tgz#3cd56dd14cec1d09e86c4bb04b09a246cb3df157"
+  integrity sha512-/xhqXP/2A2RSs+J8JNXpiiNVvvNM0oTosNVmQnunlKvq9o4mupHOBAnnzH0lwIPKazXKvAKsVp1kr+H/K4lgoQ==
+
+vscode-languageserver-types@3.17.0-next.7, vscode-languageserver-types@^3.17.0-next.6:
+  version "3.17.0-next.7"
+  resolved "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.0-next.7.tgz#3e41ebb290c95bb38595f568a9963212626290cc"
+  integrity sha512-KH4zdG1qBXxoso61ChgpeoZYyHGJo8bV7Jv4I+fwQ1Ryy59JAxoZ9GAbhR5TeeafHctLcg6RFvY3m8Jqfu17cg==
 
 vscode-languageserver-types@^3.15.1, vscode-languageserver-types@^3.16.0:
   version "3.16.0"
   resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz#ecf393fc121ec6974b2da3efb3155644c514e247"
   integrity sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA==
 
-vscode-languageserver@^8.0.0-next.2:
-  version "8.0.0-next.2"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-8.0.0-next.2.tgz#3a3daf79ff10350ea9cec5c73b5302901a955117"
-  integrity sha512-7qCEXTeGZKkI8BGvlKh0JPXTY7BaWoiwQYKCcGaUgnMs34wt6F/yaKcxoC3XIouBBVyRxiI6Ml/JdztM3XYEaA==
-  dependencies:
-    vscode-languageserver-protocol "3.17.0-next.8"
-
 vscode-nls@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-5.0.0.tgz#99f0da0bd9ea7cda44e565a74c54b1f2bc257840"
   integrity sha512-u0Lw+IYlgbEJFF6/qAqG2d1jQmJl0eyAGJHoAJqr2HT4M2BNuQYSEiSE75f52pXHSJm8AlTjnLLbBFPrdz2hpA==
 
-vscode-pug-languageservice@^0.27.22:
-  version "0.27.22"
-  resolved "https://registry.yarnpkg.com/vscode-pug-languageservice/-/vscode-pug-languageservice-0.27.22.tgz#32e1e90dfb1db7a335709cfa77021e1705766bb2"
-  integrity sha512-6y+tSFmeyEPS8MfOW4BwCdYixLjyb9eGyarKj6jZjvsdQKb5a9Ihl3UnvqosHABwx28qi6iLwLLfQp2KQncCZw==
+vscode-pug-languageservice@0.30.6:
+  version "0.30.6"
+  resolved "https://registry.npmjs.org/vscode-pug-languageservice/-/vscode-pug-languageservice-0.30.6.tgz#be799e560fde9f4c474cfe53e3166da614faefa7"
+  integrity sha512-oHXKmHaxLxVYDY6dOmxpm0YfilGgohIMEcE/ahK9O+0lvhgZ4xjEOdP27QcZs90fv92eOWf3CU9tgg4fR6e3+w==
   dependencies:
-    "@volar/code-gen" "^0.27.22"
-    "@volar/shared" "^0.27.22"
-    "@volar/source-map" "^0.27.22"
-    "@volar/transforms" "^0.27.22"
+    "@volar/code-gen" "0.30.6"
+    "@volar/shared" "0.30.6"
+    "@volar/source-map" "0.30.6"
+    "@volar/transforms" "0.30.6"
     pug-lexer "^5.0.1"
     pug-parser "^6.0.0"
-    vscode-languageserver "^8.0.0-next.2"
+    vscode-languageserver-textdocument "^1.0.3"
+    vscode-languageserver-types "^3.17.0-next.6"
 
-vscode-typescript-languageservice@^0.27.22:
-  version "0.27.22"
-  resolved "https://registry.yarnpkg.com/vscode-typescript-languageservice/-/vscode-typescript-languageservice-0.27.22.tgz#e529c991d701ee594cae9eb7d39cb5f0097f2a5d"
-  integrity sha512-HJyjMZnjj/pX1qpek7yZHB4ey9BslIn5wNMnV3Hhb6Ip0SagLCm67+cC5eb7VJBQcDAM0+e3Rz16Lym59NnqoA==
+vscode-typescript-languageservice@0.30.6:
+  version "0.30.6"
+  resolved "https://registry.npmjs.org/vscode-typescript-languageservice/-/vscode-typescript-languageservice-0.30.6.tgz#723060ebcefc00bfbfede94c755523ab7c3fcc73"
+  integrity sha512-Dni0VnMe01QkSvO0z7yIIy+vSll6hWCNtuuWvmBNoHAnFlndgq4OibPrpabv2iv4Lmq+66p40kqGcDg/bpjx5Q==
   dependencies:
-    "@volar/shared" "^0.27.22"
+    "@volar/shared" "0.30.6"
     semver "^7.3.5"
     upath "^2.0.1"
-    vscode-languageserver "^8.0.0-next.2"
-    vscode-languageserver-textdocument "^1.0.1"
+    vscode-languageserver-protocol "^3.17.0-next.12"
+    vscode-languageserver-textdocument "^1.0.3"
+    vscode-nls "^5.0.0"
 
 vscode-uri@^2.1.2:
   version "2.1.2"
@@ -7316,54 +6775,46 @@ vscode-uri@^3.0.2:
   resolved "https://registry.yarnpkg.com/vscode-uri/-/vscode-uri-3.0.2.tgz#ecfd1d066cb8ef4c3a208decdbab9a8c23d055d0"
   integrity sha512-jkjy6pjU1fxUvI51P+gCsxg1u2n8LSt0W6KrCNQceaziKzff74GoWmjVG46KieVzybO1sttPQmYfrwSHey7GUA==
 
-vscode-vue-languageservice@^0.27.0:
-  version "0.27.22"
-  resolved "https://registry.yarnpkg.com/vscode-vue-languageservice/-/vscode-vue-languageservice-0.27.22.tgz#a618fde3ac7b9d81bb3f1ed04d23a38779eb67ed"
-  integrity sha512-XM7eaa22Q64TNUPRHZ6g2DNvfU1UW0iz4lytbPiQezqslF0Ye2/xnH6u+kYRPo7NP5fpprj/YBeEvLEUmTEMEg==
-  dependencies:
-    "@volar/code-gen" "^0.27.22"
-    "@volar/html2pug" "^0.27.13"
-    "@volar/shared" "^0.27.22"
-    "@volar/source-map" "^0.27.22"
-    "@volar/transforms" "^0.27.22"
-    "@vscode/emmet-helper" "^2.7.0"
-    "@vue/compiler-dom" "^3.2.6"
-    "@vue/reactivity" "^3.2.6"
-    "@vue/shared" "^3.2.6"
-    request-light "^0.5.4"
+vscode-uri@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.0.3.tgz#a95c1ce2e6f41b7549f86279d19f47951e4f4d84"
+  integrity sha512-EcswR2S8bpR7fD0YPeS7r2xXExrScVMxg4MedACaWHEtx9ftCF/qHG1xGkolzTPcEmjTavCQgbVzHUIdTMzFGA==
+
+vscode-vue-languageservice@0.30.6:
+  version "0.30.6"
+  resolved "https://registry.npmjs.org/vscode-vue-languageservice/-/vscode-vue-languageservice-0.30.6.tgz#827f94d4bc72319e70ba31b95d2a84cf0c5111e8"
+  integrity sha512-ZDaW6F2WK0LXt9RpwziKEvhfNxNmpx3ULLfPCGc+jIkM+u00gIB4i2K/5F99yNzbvrtxcgb3emFRH5FBlmmWDQ==
+  dependencies:
+    "@volar/code-gen" "0.30.6"
+    "@volar/html2pug" "0.30.6"
+    "@volar/shared" "0.30.6"
+    "@volar/source-map" "0.30.6"
+    "@volar/transforms" "0.30.6"
+    "@volar/vue-code-gen" "0.30.6"
+    "@vscode/emmet-helper" "^2.8.3"
+    "@vue/reactivity" "^3.2.27"
+    "@vue/shared" "^3.2.27"
     upath "^2.0.1"
-    vscode-css-languageservice "^5.1.4"
-    vscode-html-languageservice "^4.0.7"
-    vscode-json-languageservice "^4.1.7"
-    vscode-languageserver "^8.0.0-next.2"
-    vscode-languageserver-textdocument "^1.0.1"
-    vscode-pug-languageservice "^0.27.22"
-    vscode-typescript-languageservice "^0.27.22"
-
-vue-eslint-parser@^7.10.0:
-  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz#ea4e4b10fd10aa35c8a79ac783488d8abcd29be8"
-  integrity sha512-7tc/ewS9Vq9Bn741pvpg8op2fWJPH3k32aL+jcIcWGCTzh/zXSdh7pZ5FV3W2aJancP9+ftPAv292zY5T5IPCg==
+    vscode-css-languageservice "^5.1.9"
+    vscode-html-languageservice "^4.2.1"
+    vscode-json-languageservice "^4.1.10"
+    vscode-languageserver-protocol "^3.17.0-next.12"
+    vscode-languageserver-textdocument "^1.0.3"
+    vscode-pug-languageservice "0.30.6"
+    vscode-typescript-languageservice "0.30.6"
+
+vue-eslint-parser@^8.0.1:
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-8.2.0.tgz#8c3990deb901b0d528d99f4d052a831cd1d0284c"
+  integrity sha512-hvl8OVT8imlKk/lQyhkshqwQQChzHETcBd5abiO4ePw7ib7QUZLfW+2TUrJHKUvFOCFRJrDin5KJO9OHzB5bRQ==
   dependencies:
-    debug "^4.1.1"
-    eslint-scope "^5.1.1"
-    eslint-visitor-keys "^1.1.0"
-    espree "^6.2.1"
+    debug "^4.3.2"
+    eslint-scope "^7.0.0"
+    eslint-visitor-keys "^3.1.0"
+    espree "^9.0.0"
     esquery "^1.4.0"
     lodash "^4.17.21"
-    semver "^6.3.0"
-
-vue-jest@^5.0.0-alpha.10:
-  version "5.0.0-alpha.10"
-  resolved "https://registry.yarnpkg.com/vue-jest/-/vue-jest-5.0.0-alpha.10.tgz#4326977b3b0268b1def140f3b69113c2d82fb090"
-  integrity sha512-iN62cTi4AL0UsgxEyVeJtHG6qXEv+8Ci2wX1vP3b/dAZvyBRmqy5aJHQrP6VCEuio+HgHQ1LAZ+ccM2pouBmlg==
-  dependencies:
-    "@babel/plugin-transform-modules-commonjs" "^7.2.0"
-    chalk "^2.1.0"
-    convert-source-map "^1.6.0"
-    extract-from-css "^0.4.4"
-    source-map "0.5.6"
-    tsconfig "^7.0.0"
+    semver "^7.3.5"
 
 vue-loader@^16.7.0:
   version "16.7.0"
@@ -7381,21 +6832,36 @@ vue-router@4:
   dependencies:
     "@vue/devtools-api" "^6.0.0-beta.14"
 
-vue-tsc@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-0.3.0.tgz#3b3872bf4f1d2e4409b57adbd826032e253db406"
-  integrity sha512-zaDRZBxwRIz1XjhNP92FqugG71st6BUMnA2EwPeXrAyzbEYVRz6TezNFceYl3QYqqN8CtaxbqUhaQEDj/ntoCA==
+vue-tsc@^0.30.1:
+  version "0.30.6"
+  resolved "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.30.6.tgz#5faaf5c0ce13be80fb78dc5d76121e249d64cd6e"
+  integrity sha512-p+lemuubzFgwr1Az3pqQ70uvWraf36qTrKkC6C7anv5S1G3aPerc4eY5Rjz3eVDOkK94E+KeBHevvpZbmVwvHA==
+  dependencies:
+    "@volar/shared" "0.30.6"
+    vscode-vue-languageservice "0.30.6"
+
+vue3-jest@^27.0.0-alpha.1:
+  version "27.0.0-alpha.1"
+  resolved "https://registry.npmjs.org/vue3-jest/-/vue3-jest-27.0.0-alpha.1.tgz#ccc9ecd963a8ab54e43fbb4cad3c1d14c84c0613"
+  integrity sha512-F/pSFbpLcYVIv0ogNMFwT+W+r9tCRfLw84IIqqyocD1FZaW6m3RpfqwQsOXgYJVXFSdj4t3xbgj967s8WMrZjQ==
   dependencies:
-    vscode-vue-languageservice "^0.27.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.2.0"
+    chalk "^2.1.0"
+    convert-source-map "^1.6.0"
+    extract-from-css "^0.4.4"
+    source-map "0.5.6"
+    tsconfig "^7.0.0"
 
-vue@^3.1.1:
-  version "3.2.12"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.12.tgz#b44f55506fb6a7c4b65635e609deb5f9368aa2ce"
-  integrity sha512-VV14HtubmB56uuQaSvLkJZgoocPiN8CJI3zZA9y8h7q/Z5hcknDIFkbq5d8ku0ukZ6AJPQqMsZWcq0qryF0jgg==
+vue@^3.2.6:
+  version "3.2.29"
+  resolved "https://registry.npmjs.org/vue/-/vue-3.2.29.tgz#3571b65dbd796d3a6347e2fd45a8e6e11c13d56a"
+  integrity sha512-cFIwr7LkbtCRanjNvh6r7wp2yUxfxeM2yPpDQpAfaaLIGZSrUmLbNiSze9nhBJt5MrZ68Iqt0O5scwAMEVxF+Q==
   dependencies:
-    "@vue/compiler-dom" "3.2.12"
-    "@vue/runtime-dom" "3.2.12"
-    "@vue/shared" "3.2.12"
+    "@vue/compiler-dom" "3.2.29"
+    "@vue/compiler-sfc" "3.2.29"
+    "@vue/runtime-dom" "3.2.29"
+    "@vue/server-renderer" "3.2.29"
+    "@vue/shared" "3.2.29"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"
@@ -7411,7 +6877,7 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
-walker@^1.0.7, walker@~1.0.5:
+walker@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
   integrity sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=
@@ -7456,7 +6922,7 @@ whatwg-url@^8.0.0, whatwg-url@^8.5.0:
     tr46 "^2.1.0"
     webidl-conversions "^6.1.0"
 
-which-boxed-primitive@^1.0.1, which-boxed-primitive@^1.0.2:
+which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
   integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
@@ -7467,11 +6933,6 @@ which-boxed-primitive@^1.0.1, which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
-which-module@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
-  integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
-
 which@^1.2.9:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
@@ -7479,7 +6940,7 @@ which@^1.2.9:
   dependencies:
     isexe "^2.0.0"
 
-which@^2.0.1, which@^2.0.2:
+which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
@@ -7515,15 +6976,6 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
-wrap-ansi@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
-  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
@@ -7548,10 +7000,10 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
-ws@^7.4.5:
-  version "7.4.6"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
-  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
+ws@^7.4.6:
+  version "7.5.6"
+  resolved "https://registry.npmjs.org/ws/-/ws-7.5.6.tgz#e59fc509fb15ddfb65487ee9765c5a51dec5fe7b"
+  integrity sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==
 
 xdg-basedir@^4.0.0:
   version "4.0.0"
@@ -7573,10 +7025,10 @@ xtend@^4.0.2:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-y18n@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.3.tgz#b5f259c82cd6e336921efd7bfd8bf560de9eeedf"
-  integrity sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
 yallist@^2.1.2:
   version "2.1.2"
@@ -7593,32 +7045,20 @@ yaml@1.10.2, yaml@^1.10.0, yaml@^1.10.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yargs-parser@20.2.9, yargs-parser@20.x:
+yargs-parser@20.2.9, yargs-parser@20.x, yargs-parser@^20.2.2:
   version "20.2.9"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
-yargs-parser@^18.1.2:
-  version "18.1.3"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
-  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+yargs@^16.2.0:
+  version "16.2.0"
+  resolved "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
   dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
-yargs@^15.4.1:
-  version "15.4.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
-  integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
-  dependencies:
-    cliui "^6.0.0"
-    decamelize "^1.2.0"
-    find-up "^4.1.0"
-    get-caller-file "^2.0.1"
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
     require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
     string-width "^4.2.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^18.1.2"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"

From 75e1a007871961e2132d391f7765c033ed2102e7 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 4 Feb 2022 14:31:39 -0600
Subject: [PATCH 12/85] Refactor dropdown to better handle click

---
 src/components/TDropdown.vue | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/TDropdown.vue b/src/components/TDropdown.vue
index d5b6d59..11f808d 100644
--- a/src/components/TDropdown.vue
+++ b/src/components/TDropdown.vue
@@ -7,11 +7,13 @@
     :class="configuration.classesList?.trigger"
     :disabled="configuration.disabled"
     v-bind="{...attributes, ...$attrs}"
-    @click="clickHandler"
     @focus="focusHandler"
     @blur="blurHandler"
     @mouseover="mouseoverHandler"
     @mouseleave="mouseleaveHandler"
+    @mousedown="clickHandler"
+    @keydown.enter="clickHandler"
+    @keydown.space="clickHandler"
   >
     <slot
       :configuration="configuration"
@@ -199,7 +201,8 @@ export default defineComponent({
       initAsShow: (configuration as unknown as TDropdownOptions).show,
       hideTimeout: null as ReturnType<typeof setTimeout> | null,
       focusableElements: [] as Array<HTMLElement>,
-      throttledToggle: null as null | (() => void),
+      throttledShow: null as null | (() => void),
+      throttledHide: null as null | (() => void),
       adjustingPopper: false,
       popperIsAdjusted: false,
       popperAdjusterListener: null as null | DebouncedFn,
@@ -249,7 +252,8 @@ export default defineComponent({
     }
   },
   created() {
-    this.throttledToggle = throttle(this.doToggle, 200);
+    this.throttledShow = throttle(this.doShow, 200);
+    this.throttledHide = throttle(this.doHide, 200);
 
     this.popperAdjusterListener = debounce(() => {
       this.popperIsAdjusted = false;
@@ -403,6 +407,13 @@ export default defineComponent({
       const { trigger } = this.$refs;
       return trigger as HTMLButtonElement;
     },
+    throttledToggle(): void {
+      if (!this.shown) {
+        this.throttledShow!();
+      } else {
+        this.throttledHide!();
+      }
+    },
     doToggle(): void {
       if (!this.shown) {
         this.doShow();
@@ -440,7 +451,7 @@ export default defineComponent({
       if (this.configuration.toggleOnClick) {
         this.throttledToggle!();
       } else if (this.shouldShowWhenClicked) {
-        this.doShow();
+        this.throttledShow!();
       }
     },
     focusHandler(e: FocusEvent): void {
@@ -451,7 +462,7 @@ export default defineComponent({
       }
 
       if (this.configuration.toggleOnFocus) {
-        this.throttledToggle!();
+        this.throttledShow!();
       }
     },
     blurHandler(e: FocusEvent): void {
@@ -468,7 +479,7 @@ export default defineComponent({
       }
 
       if (this.configuration.toggleOnFocus && !isChild) {
-        this.doHide();
+        this.throttledHide!();
       }
     },
     targetIsChild(target: EventTarget | null): boolean {

From 3eb51f80269a9934411460024cb3fb7cb3929a22 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 4 Feb 2022 14:43:34 -0600
Subject: [PATCH 13/85] wip

---
 src/components/TDatepicker.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 395bd30..cbfa78f 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -22,6 +22,7 @@
       tag-name="input"
       type="text"
       class="border border-gray-300"
+      @blur-on-child="blurOnChildHandler"
     >
       <datepicker-dropdown />
       <!-- :classes="dropdownClasses"
@@ -144,7 +145,6 @@ import {
   DateLocale,
   buildDateFormatter,
   dateEnglishLocale,
-  DateValue,
   isSameDay,
   diffInDays,
 } from '@variantjs/core';
@@ -156,7 +156,6 @@ import {
 } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
 import TDropdown, { validDropdownPlacements } from './TDropdown.vue';
-import { sameWidthModifier } from '../utils/popper';
 import { TDatepickerSingleValue } from '../types/components/t-datepicker';
 
 // @vue/component
@@ -241,7 +240,6 @@ export default defineComponent({
               offset: [0, 8],
             },
           },
-          sameWidthModifier,
         ],
       } as Options),
     },
@@ -252,7 +250,10 @@ export default defineComponent({
     // - Reinitialize the range after the dropdown is closed
     // - Range and multiple: Consider selected dates outside of the view
     // - Disabled dates shouldn't be selectable and needs his own styling (`DatepickerViewMonthDay`)
-    
+    // - Add teleport options
+    // - Add toggle-on options from the configuration as the dropdown
+    // - In general check which dropdown options/events are usable
+
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
     const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
@@ -351,6 +352,12 @@ export default defineComponent({
       selectedDate.value = day;
     };
 
+    const blurOnChildHandler = (e: Event) => {
+      const target = e.target as HTMLButtonElement | HTMLInputElement;
+
+      target.focus();
+    };
+
     provide('activeDate', activeDate);
 
     provide('showActiveDate', showActiveDate);
@@ -368,6 +375,7 @@ export default defineComponent({
     return {
       configuration,
       attributes,
+      blurOnChildHandler,
     };
   },
 

From 1727171260fa215c296f89ef60dff9199a4a89fc Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 4 Feb 2022 14:45:27 -0600
Subject: [PATCH 14/85] Update TDatepicker.vue

---
 src/components/TDatepicker.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index cbfa78f..a3cd471 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -253,6 +253,7 @@ export default defineComponent({
     // - Add teleport options
     // - Add toggle-on options from the configuration as the dropdown
     // - In general check which dropdown options/events are usable
+    // - Add selectOnClose, closeOnSelected and see if something from the rich select can be used
 
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
@@ -352,6 +353,10 @@ export default defineComponent({
       selectedDate.value = day;
     };
 
+    // If the date field is blurred (date clicked for example) we should focus
+    // the field again
+    // @TODO: Consider the case when other elements should keep the focus
+    // like the eventual time picker
     const blurOnChildHandler = (e: Event) => {
       const target = e.target as HTMLButtonElement | HTMLInputElement;
 

From 7bf78eb46564fca7f81f00d9a1580fb94bb5a0d6 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 4 Feb 2022 15:28:21 -0600
Subject: [PATCH 15/85] keyboard navigation wip

---
 src/components/TDatepicker.vue       | 81 +++++++++++++++++++++++++++-
 src/types/components/t-datepicker.ts |  7 +++
 2 files changed, 86 insertions(+), 2 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index a3cd471..6fbb1a9 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -23,6 +23,11 @@
       type="text"
       class="border border-gray-300"
       @blur-on-child="blurOnChildHandler"
+
+      @keydown.down="keyboardNavigationHandler"
+      @keydown.up="keyboardNavigationHandler"
+      @keydown.left="keyboardNavigationHandler"
+      @keydown.right="keyboardNavigationHandler"
     >
       <datepicker-dropdown />
       <!-- :classes="dropdownClasses"
@@ -147,6 +152,9 @@ import {
   dateEnglishLocale,
   isSameDay,
   diffInDays,
+  addYears,
+  addMonths,
+  addDays,
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
@@ -156,7 +164,7 @@ import {
 } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
 import TDropdown, { validDropdownPlacements } from './TDropdown.vue';
-import { TDatepickerSingleValue } from '../types/components/t-datepicker';
+import { TDatepickerSingleValue, TDatepickerView } from '../types/components/t-datepicker';
 
 // @vue/component
 export default defineComponent({
@@ -243,7 +251,10 @@ export default defineComponent({
         ],
       } as Options),
     },
-
+    initialView: {
+      type: String as PropType<TDatepickerView>,
+      default: TDatepickerView.Day,
+    },
   },
   setup(props) {
     // @TODOS:
@@ -254,6 +265,7 @@ export default defineComponent({
     // - Add toggle-on options from the configuration as the dropdown
     // - In general check which dropdown options/events are usable
     // - Add selectOnClose, closeOnSelected and see if something from the rich select can be used
+    // - Show active date should be reset in some cases TBD
 
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
@@ -261,6 +273,8 @@ export default defineComponent({
 
     const formatDate = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
 
+    const currentView = ref<TDatepickerView>(configuration.initialView!);
+
     const getInitialSelectedDate = (): Date | Date[] | undefined => {
       let selectedDate: Date | undefined | Date[] = configuration.multiple || configuration.range ? [] : undefined;
 
@@ -363,6 +377,68 @@ export default defineComponent({
       target.focus();
     };
 
+    const keyboardNavigationHandler = (e: KeyboardEvent) => {
+      const keyCode = e.key;
+
+      enum NavitationKeyCodes {
+        ArrowLeft = 'ArrowDown',
+        ArrowUp = 'ArrowUp',
+        ArrowRight = 'ArrowLeft',
+        ArrowDown = 'ArrowRight',
+      }
+      
+      const days: {
+        [key2 in TDatepickerView]: {
+          [key in NavitationKeyCodes]: number  
+        }
+      } = {
+        // @TODO
+        year: {
+          ArrowUp: 1,
+          ArrowRight: 1,
+          ArrowDown: 1,
+          ArrowLeft: 1,
+        },
+        // @TODO
+        month: {
+          ArrowUp: 1,
+          ArrowRight: 1,
+          ArrowDown: 1,
+          ArrowLeft: 1,
+        },
+        day: {
+          ArrowUp: -7,
+          ArrowRight: 1,
+          ArrowDown: 7,
+          ArrowLeft: -1,
+        },
+      };
+
+      if (! (keyCode in NavitationKeyCodes)) {
+        return;
+      }
+
+      e.preventDefault();
+
+      const daysPerView = days[currentView.value][keyCode as NavitationKeyCodes];
+
+      // Depending of the view (year view, month view or day views the amount of days is different)
+      if (currentView.value === 'year') {
+        // @TODO: test considering the case when the year is not a leap year
+        activeDate.value = addYears(activeDate.value, daysPerView);
+      } else if (currentView.value === 'month') {
+        // @TODO: test considering the case when the month is not a leap month
+        activeDate.value = addMonths(activeDate.value, daysPerView);
+      } else if (currentView.value === 'day') {
+        // One week is the day below the current one
+        activeDate.value = addDays(activeDate.value, daysPerView);
+      }
+
+      showActiveDate.value = true;
+    };
+
+
+
     provide('activeDate', activeDate);
 
     provide('showActiveDate', showActiveDate);
@@ -381,6 +457,7 @@ export default defineComponent({
       configuration,
       attributes,
       blurOnChildHandler,
+      keyboardNavigationHandler,
     };
   },
 
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index 8af7758..b5ee28e 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -8,6 +8,12 @@ export type TDatepickerSingleValue = DateValue | undefined | null;
 
 export type TDatepickerValue = TDatepickerSingleValue | Array<TDatepickerSingleValue>;
 
+export enum TDatepickerView {
+  Day = 'day',
+  Month = 'month',
+  Year = 'year',
+}
+
 export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   modelValue?: TDatepickerValue,
   initialDate?: TDatepickerValue,
@@ -25,4 +31,5 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   dateParser?: DateParser,
   dateFormatter?: DateFormatter,
   locale?: DateLocale,
+  initialView?: TDatepickerView
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;

From 83c065be3d828f6e6364a2b003e45901ce91285c Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sun, 6 Feb 2022 15:57:16 -0600
Subject: [PATCH 16/85] Enter handler

---
 src/components/TDatepicker.vue | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 6fbb1a9..0f9da2f 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -22,12 +22,16 @@
       tag-name="input"
       type="text"
       class="border border-gray-300"
-      @blur-on-child="blurOnChildHandler"
+      :toggle-on-click="false"
 
+      @blur-on-child="blurOnChildHandler"
+      
       @keydown.down="keyboardNavigationHandler"
       @keydown.up="keyboardNavigationHandler"
       @keydown.left="keyboardNavigationHandler"
       @keydown.right="keyboardNavigationHandler"
+
+      @keydown.enter="enterHandler"
     >
       <datepicker-dropdown />
       <!-- :classes="dropdownClasses"
@@ -266,6 +270,7 @@ export default defineComponent({
     // - In general check which dropdown options/events are usable
     // - Add selectOnClose, closeOnSelected and see if something from the rich select can be used
     // - Show active date should be reset in some cases TBD
+    // - Toggle datepicker on enter accoridng to props (since its overriding the dropdown option)
 
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
@@ -365,6 +370,8 @@ export default defineComponent({
       }
 
       selectedDate.value = day;
+
+      showActiveDate.value = false;
     };
 
     // If the date field is blurred (date clicked for example) we should focus
@@ -378,7 +385,7 @@ export default defineComponent({
     };
 
     const keyboardNavigationHandler = (e: KeyboardEvent) => {
-      const keyCode = e.key;
+      const keyCode = e.key as NavitationKeyCodes;
 
       enum NavitationKeyCodes {
         ArrowLeft = 'ArrowDown',
@@ -388,8 +395,8 @@ export default defineComponent({
       }
       
       const days: {
-        [key2 in TDatepickerView]: {
-          [key in NavitationKeyCodes]: number  
+        [key in TDatepickerView]: {
+          [key2 in NavitationKeyCodes]: number  
         }
       } = {
         // @TODO
@@ -413,14 +420,10 @@ export default defineComponent({
           ArrowLeft: -1,
         },
       };
-
-      if (! (keyCode in NavitationKeyCodes)) {
-        return;
-      }
-
+      
       e.preventDefault();
 
-      const daysPerView = days[currentView.value][keyCode as NavitationKeyCodes];
+      const daysPerView = days[currentView.value][keyCode];
 
       // Depending of the view (year view, month view or day views the amount of days is different)
       if (currentView.value === 'year') {
@@ -437,7 +440,11 @@ export default defineComponent({
       showActiveDate.value = true;
     };
 
+    const selectActiveDate = () => {
+      selectDay(activeDate.value);
+    };
 
+    const enterHandler = () => selectActiveDate();
 
     provide('activeDate', activeDate);
 
@@ -457,6 +464,7 @@ export default defineComponent({
       configuration,
       attributes,
       blurOnChildHandler,
+      enterHandler,
       keyboardNavigationHandler,
     };
   },

From 9f8551af851cc7b40c926a53463ada42baa472b7 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sun, 6 Feb 2022 16:52:26 -0600
Subject: [PATCH 17/85] Month view wip

---
 package.json                                  |  2 +-
 src/components/TDatepicker.vue                | 23 +++++++----
 src/components/TDatepicker/DatepickerView.vue | 26 +++++++++++-
 .../TDatepicker/DatepickerViewControls.vue    | 41 +++++++++++++++++--
 .../TDatepicker/DatepickerViewMonth.vue       | 29 +++++++------
 .../TDatepicker/DatepickerViewYear.vue        | 37 +++++++++++++++++
 .../TDatepicker/DatepickerViewYearMonth.vue   | 34 +++++++++++++++
 yarn.lock                                     |  8 ++--
 8 files changed, 170 insertions(+), 30 deletions(-)
 create mode 100644 src/components/TDatepicker/DatepickerViewYear.vue
 create mode 100644 src/components/TDatepicker/DatepickerViewYearMonth.vue

diff --git a/package.json b/package.json
index 9ecce32..14d5e69 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,6 @@
     }
   },
   "dependencies": {
-    "@variantjs/core": "^0.0.80"
+    "@variantjs/core": "^0.0.81"
   }
 }
diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 0f9da2f..2ff819c 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -271,6 +271,7 @@ export default defineComponent({
     // - Add selectOnClose, closeOnSelected and see if something from the rich select can be used
     // - Show active date should be reset in some cases TBD
     // - Toggle datepicker on enter accoridng to props (since its overriding the dropdown option)
+    // - Check aria labels on buttons 
 
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
@@ -280,6 +281,10 @@ export default defineComponent({
 
     const currentView = ref<TDatepickerView>(configuration.initialView!);
 
+    const setCurrentView = (view: TDatepickerView) => {
+      currentView.value = view;
+    };
+
     const getInitialSelectedDate = (): Date | Date[] | undefined => {
       let selectedDate: Date | undefined | Date[] = configuration.multiple || configuration.range ? [] : undefined;
 
@@ -399,19 +404,17 @@ export default defineComponent({
           [key2 in NavitationKeyCodes]: number  
         }
       } = {
-        // @TODO
         year: {
-          ArrowUp: 1,
+          ArrowUp: -4,
           ArrowRight: 1,
-          ArrowDown: 1,
-          ArrowLeft: 1,
+          ArrowDown: 4,
+          ArrowLeft: -1,
         },
-        // @TODO
         month: {
-          ArrowUp: 1,
+          ArrowUp: -4,
           ArrowRight: 1,
-          ArrowDown: 1,
-          ArrowLeft: 1,
+          ArrowDown: 4,
+          ArrowLeft: -1,
         },
         day: {
           ArrowUp: -7,
@@ -459,6 +462,10 @@ export default defineComponent({
     provide('formatDate', formatDate);
     
     provide('selectDay', selectDay);
+    
+    provide('setCurrentView', setCurrentView);
+    
+    provide('currentView', currentView);
 
     return {
       configuration,
diff --git a/src/components/TDatepicker/DatepickerView.vue b/src/components/TDatepicker/DatepickerView.vue
index 9175f4a..502e8d2 100644
--- a/src/components/TDatepicker/DatepickerView.vue
+++ b/src/components/TDatepicker/DatepickerView.vue
@@ -2,20 +2,33 @@
   <div class="w-64">
     <datepicker-view-controls />
 
-    <datepicker-view-month :month="month" />
+    <datepicker-view-month
+      v-if="isMonthView"
+      :month="month"
+    />
+
+    <datepicker-view-year v-else-if="isYearView" />
+
+    <datepicker-view-month
+      v-else-if="isMultipleYearsView"
+      :month="month"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { computed, defineComponent, inject, Ref } from 'vue';
+import { TDatepickerView } from '../../types/components/t-datepicker';
 import DatepickerViewControls from './DatepickerViewControls.vue';
 import DatepickerViewMonth from './DatepickerViewMonth.vue';
+import DatepickerViewYear from './DatepickerViewYear.vue';
 
 export default defineComponent({
   name: 'DatepickerView',
   components: {
     DatepickerViewControls,
     DatepickerViewMonth,
+    DatepickerViewYear,
   },
   props: {
     month: {
@@ -23,5 +36,14 @@ export default defineComponent({
       required: true,
     },
   },
+  setup() {
+    const currentView = inject<Ref<TDatepickerView>>('currentView')!;
+
+    const isMonthView = computed<boolean>(() => currentView.value === TDatepickerView.Day);
+    const isYearView = computed<boolean>(() => currentView.value === TDatepickerView.Month);
+    const isMultipleYearsView = computed<boolean>(() => currentView.value === TDatepickerView.Year);
+
+    return { isMonthView, isYearView, isMultipleYearsView };
+  },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewControls.vue b/src/components/TDatepicker/DatepickerViewControls.vue
index 9e237e7..70766dc 100644
--- a/src/components/TDatepicker/DatepickerViewControls.vue
+++ b/src/components/TDatepicker/DatepickerViewControls.vue
@@ -4,8 +4,19 @@
       type="button"
       class="flex inline-flex items-center px-2 py-1 -ml-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100"
       tabindex="-1"
+      @click="toggleView"
     >
-      <span class="">October</span><span class="ml-1 text-gray-500">2021</span><svg
+      <span
+        class=""
+        v-text="monthName"
+      />
+      
+      <span
+        class="ml-1 text-gray-500"
+        v-text="year"
+      />
+      
+      <svg
         fill="currentColor"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 20 20"
@@ -15,7 +26,7 @@
     <button
       aria-label="Prev Year"
       type="button"
-      class="inline-flex p-1 ml-2 ml-auto transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      class="inline-flex p-1 ml-auto transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
       tabindex="-1"
     >
       <svg
@@ -52,9 +63,33 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { DateFormatter } from '@variantjs/core';
+import { ComputedRef, defineComponent, inject, Ref, computed } from 'vue';
+import { TDatepickerView } from '../../types/components/t-datepicker';
 
 export default defineComponent({
   name: 'DatepickerViewControls',
+
+  setup() {
+    const activeDate = inject<Ref<Date>>('activeDate')!;
+    const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
+    const setCurrentView = inject<(view: TDatepickerView) => void>('setCurrentView')!;
+    const currentView = inject<Ref<TDatepickerView>>('currentView')!;
+
+    const monthName = computed<string>(() => formatDate.value(activeDate.value, 'F')) ;
+    const year = computed<string>(() => formatDate.value(activeDate.value, 'Y')) ;
+
+    const toggleView = () => {
+      if (currentView.value === TDatepickerView.Day) {
+        setCurrentView(TDatepickerView.Month);
+      } else if (currentView.value === TDatepickerView.Month) {
+        setCurrentView(TDatepickerView.Year);
+      } else {
+        setCurrentView(TDatepickerView.Day);
+      }
+    };
+
+    return { monthName, year, toggleView };
+  },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewMonth.vue b/src/components/TDatepicker/DatepickerViewMonth.vue
index f1887c2..c0849a3 100644
--- a/src/components/TDatepicker/DatepickerViewMonth.vue
+++ b/src/components/TDatepicker/DatepickerViewMonth.vue
@@ -1,13 +1,12 @@
 <template>
   <div class="px-3 py-2">
-    <div class="grid grid-cols-7 ">
-      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Sun</span>
-      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Mon</span>
-      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Tue</span>
-      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Wed</span>
-      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Thu</span>
-      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Fri</span>
-      <span class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase">Sat</span>
+    <div class="grid grid-cols-7">
+      <span
+        v-for="weekDay in weekDays"
+        :key="weekDay"
+        class="flex items-center justify-center w-8 h-8 text-xs text-gray-500 uppercase"
+        v-text="weekDay"
+      />
     </div>
     <div class="grid grid-cols-7">
       <datepicker-view-month-day
@@ -22,10 +21,9 @@
 
 <script lang="ts">
 
-import { visibleDaysInMonthView } from '@variantjs/core';
-import { config } from '@vue/test-utils';
+import { DateFormatter, range, visibleDaysInMonthView } from '@variantjs/core';
 import {
-  defineComponent, inject, Ref, computed,
+  defineComponent, inject, computed, ComputedRef,
 } from 'vue';
 import { TDatepickerOptions } from '../../types/components/t-datepicker';
 import DatepickerViewMonthDay from './DatepickerViewMonthDay.vue';
@@ -44,11 +42,18 @@ export default defineComponent({
   setup(props) {
     const configuration = inject<TDatepickerOptions>('configuration')!;
 
+    const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
+    
     const weekStart = configuration.weekStart!;
 
     const days = computed<Date[]>(() => visibleDaysInMonthView(props.month, weekStart));
 
-    return { days, configuration };
+    const weekDays = range(0, 6).map((index) => {
+      // 1900-01-01 is a Monday
+      return formatDate.value(new Date(1900, 0, index), 'D');
+    });
+
+    return { days, configuration, weekDays };
   },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewYear.vue b/src/components/TDatepicker/DatepickerViewYear.vue
new file mode 100644
index 0000000..6b42a93
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerViewYear.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="px-3 py-2">
+    <div class="grid grid-cols-4">
+      <datepicker-view-year-month
+        v-for="month in months"
+        :key="month.toISOString()"
+        :month="month"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { range, clone } from '@variantjs/core';
+import {
+  defineComponent, inject, Ref,
+} from 'vue';
+import DatepickerViewYearMonth from './DatepickerViewYearMonth.vue';
+
+export default defineComponent({
+  name: 'DatepickerViewYear',
+  components: {
+    DatepickerViewYearMonth,
+  },
+  setup() {
+    const activeDate = inject<Ref<Date>>('activeDate')!;
+
+    const months: Date[] = range(0, 11).map((monthIndex) => {
+      const month = clone(activeDate.value);
+      month.setMonth(monthIndex);
+      return month;
+    });
+
+    return { months };
+  },
+});
+</script>
diff --git a/src/components/TDatepicker/DatepickerViewYearMonth.vue b/src/components/TDatepicker/DatepickerViewYearMonth.vue
new file mode 100644
index 0000000..b5a7420
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerViewYearMonth.vue
@@ -0,0 +1,34 @@
+<template>
+  <button
+    :aria-label="ariaLabel"
+    :data-date="dataDate"
+    type="button"
+    tabindex="-1"
+    class="text-sm rounded w-full h-12 mx-auto hover:bg-blue-100"
+    v-text="monthLabel"
+  />
+</template>
+
+<script lang="ts">
+import { DateFormatter } from '@variantjs/core';
+import { ComputedRef, defineComponent, inject } from 'vue';
+
+export default defineComponent({
+  name: 'DatepickerViewYearMonth',
+  props: {
+    month: {
+      type: Date,
+      required: true,
+    },
+  },
+  setup(props) { 
+    const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
+
+    const ariaLabel = formatDate.value(props.month, 'F, Y');
+    const dataDate = formatDate.value(props.month, 'Y-m');
+    const monthLabel = formatDate.value(props.month, 'M');
+
+    return { ariaLabel, dataDate, monthLabel };
+  },
+});
+</script>
diff --git a/yarn.lock b/yarn.lock
index 16d8ffb..852f9c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1370,10 +1370,10 @@
     "@typescript-eslint/types" "5.10.2"
     eslint-visitor-keys "^3.0.0"
 
-"@variantjs/core@^0.0.80":
-  version "0.0.80"
-  resolved "https://registry.npmjs.org/@variantjs/core/-/core-0.0.80.tgz#742be6087a73256d5b5535c0231c997a1dded2ce"
-  integrity sha512-43vcdvMlocajpfHyzxqHZmu77oMbYFsZI38/TC0E3r2vWu95UyqHS+goaDYXd9H7ES/mcPI0H6fBwkUBoZjgxQ==
+"@variantjs/core@^0.0.81":
+  version "0.0.81"
+  resolved "https://registry.npmjs.org/@variantjs/core/-/core-0.0.81.tgz#62ecb3c3838dec5e05dc49f014381258594f628e"
+  integrity sha512-vi/olPf1MH8+h1VszXMAyVKd+UNtwnCm1P7a9IRQMmVmYbpCpZn68lPJUIW5hF3aFiKVMC+gv4+AFylv990dMQ==
 
 "@vitejs/plugin-vue@^2.0.1":
   version "2.1.0"

From 5755fe265dcb855a32d6bcf0c9b9b9fd1e27b5c1 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sun, 6 Feb 2022 17:05:28 -0600
Subject: [PATCH 18/85] Multiple years view wip

---
 src/components/TDatepicker/DatepickerView.vue |  7 ++-
 .../DatepickerViewMultipleYears.vue           | 43 +++++++++++++++++++
 .../DatepickerViewMultipleYearsYear.vue       | 32 ++++++++++++++
 3 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 src/components/TDatepicker/DatepickerViewMultipleYears.vue
 create mode 100644 src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue

diff --git a/src/components/TDatepicker/DatepickerView.vue b/src/components/TDatepicker/DatepickerView.vue
index 502e8d2..7968d90 100644
--- a/src/components/TDatepicker/DatepickerView.vue
+++ b/src/components/TDatepicker/DatepickerView.vue
@@ -9,10 +9,7 @@
 
     <datepicker-view-year v-else-if="isYearView" />
 
-    <datepicker-view-month
-      v-else-if="isMultipleYearsView"
-      :month="month"
-    />
+    <DatepickerViewMultipleYears v-else-if="isMultipleYearsView" />
   </div>
 </template>
 
@@ -22,6 +19,7 @@ import { TDatepickerView } from '../../types/components/t-datepicker';
 import DatepickerViewControls from './DatepickerViewControls.vue';
 import DatepickerViewMonth from './DatepickerViewMonth.vue';
 import DatepickerViewYear from './DatepickerViewYear.vue';
+import DatepickerViewMultipleYears from './DatepickerViewMultipleYears.vue';
 
 export default defineComponent({
   name: 'DatepickerView',
@@ -29,6 +27,7 @@ export default defineComponent({
     DatepickerViewControls,
     DatepickerViewMonth,
     DatepickerViewYear,
+    DatepickerViewMultipleYears,
   },
   props: {
     month: {
diff --git a/src/components/TDatepicker/DatepickerViewMultipleYears.vue b/src/components/TDatepicker/DatepickerViewMultipleYears.vue
new file mode 100644
index 0000000..340498c
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerViewMultipleYears.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="px-3 py-2">
+    <div class="grid grid-cols-4">
+      <datepicker-view-multiple-years-year
+        v-for="year in years"
+        :key="year.toISOString()"
+        :year="year"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { range, clone } from '@variantjs/core';
+import {
+  defineComponent, inject, Ref, computed,
+} from 'vue';
+import DatepickerViewMultipleYearsYear from './DatepickerViewMultipleYearsYear.vue';
+
+export default defineComponent({
+  name: 'DatepickerViewMultipleYears',
+  components: {
+    DatepickerViewMultipleYearsYear,
+  },
+  setup() {
+    const activeDate = inject<Ref<Date>>('activeDate')!;
+
+    const years = computed<Date[]>(() => {
+      const currentYear = activeDate.value.getFullYear();
+      const from = currentYear - (currentYear % 12);
+      const to = from + 11;
+
+      return range(from, to).map((rangeYear) => {
+        const year = clone(activeDate.value);
+        year.setFullYear(rangeYear);
+        return year;
+      });
+    });
+
+    return { years };
+  },
+});
+</script>
diff --git a/src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue b/src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue
new file mode 100644
index 0000000..2dd0f72
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue
@@ -0,0 +1,32 @@
+<template>
+  <button
+    :aria-label="yearLabel"
+    :data-date="yearLabel"
+    type="button"
+    tabindex="-1"
+    class="text-sm rounded w-full h-12 mx-auto hover:bg-blue-100"
+    v-text="yearLabel"
+  />
+</template>
+
+<script lang="ts">
+import { DateFormatter } from '@variantjs/core';
+import { ComputedRef, defineComponent, inject } from 'vue';
+
+export default defineComponent({
+  name: 'DatepickerViewMultipleYearsYear',
+  props: {
+    year: {
+      type: Date,
+      required: true,
+    },
+  },
+  setup(props) { 
+    const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
+
+    const yearLabel = formatDate.value(props.year, 'Y');
+
+    return { yearLabel };
+  },
+});
+</script>

From 0ab9bdd7a46e429b5aa3f54cecaf9c2a4ad73e05 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sun, 6 Feb 2022 17:13:02 -0600
Subject: [PATCH 19/85] Controls labels

---
 src/components/TDatepicker.vue                |  3 +
 .../TDatepicker/DatepickerViewControls.vue    | 66 +++++++++++++------
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 2ff819c..b6dbe66 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -272,6 +272,9 @@ export default defineComponent({
     // - Show active date should be reset in some cases TBD
     // - Toggle datepicker on enter accoridng to props (since its overriding the dropdown option)
     // - Check aria labels on buttons 
+    // - Replace svg icons with icon component
+    // @IMMEDIATE TODO:
+    // - active & selected styling in view items for year and multiple years
 
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
diff --git a/src/components/TDatepicker/DatepickerViewControls.vue b/src/components/TDatepicker/DatepickerViewControls.vue
index 70766dc..32fe082 100644
--- a/src/components/TDatepicker/DatepickerViewControls.vue
+++ b/src/components/TDatepicker/DatepickerViewControls.vue
@@ -6,23 +6,41 @@
       tabindex="-1"
       @click="toggleView"
     >
-      <span
-        class=""
-        v-text="monthName"
-      />
-      
-      <span
-        class="ml-1 text-gray-500"
-        v-text="year"
-      />
-      
-      <svg
-        fill="currentColor"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        class="flex-shrink-0 w-5 h-5 text-gray-400 fill-current"
-      ><polygon points="12.9497475 10.7071068 13.6568542 10 8 4.34314575 6.58578644 5.75735931 10.8284271 10 6.58578644 14.2426407 8 15.6568542 12.9497475 10.7071068" /></svg>
+      <template v-if="isMonthView || isYearView">
+        <span
+          v-if="isMonthView"
+          class=""
+          v-text="monthName"
+        />
+        
+        <span
+          class="ml-1 text-gray-500"
+          v-text="year"
+        />
+        
+        <svg
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          class="flex-shrink-0 w-5 h-5 text-gray-400 fill-current"
+        ><polygon points="12.9497475 10.7071068 13.6568542 10 8 4.34314575 6.58578644 5.75735931 10.8284271 10 6.58578644 14.2426407 8 15.6568542 12.9497475 10.7071068" /></svg>
+      </template>
+
+      <template v-else>
+        <svg
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          class="flex-shrink-0 h-5 w-5 fill-current text-gray-400"
+        ><polygon points="7.05025253 9.29289322 6.34314575 10 12 15.6568542 13.4142136 14.2426407 9.17157288 10 13.4142136 5.75735931 12 4.34314575" /></svg>
+        
+        <span
+          class="ml-1 text-gray-500"
+          v-text="`${yearsRange[0]} - ${yearsRange[1]}`"
+        />
+      </template>
     </button>
+    
     <button
       aria-label="Prev Year"
       type="button"
@@ -79,17 +97,27 @@ export default defineComponent({
     const monthName = computed<string>(() => formatDate.value(activeDate.value, 'F')) ;
     const year = computed<string>(() => formatDate.value(activeDate.value, 'Y')) ;
 
+    const isMonthView = computed<boolean>(() => currentView.value === TDatepickerView.Day);
+    const isYearView = computed<boolean>(() => currentView.value === TDatepickerView.Month);
+    
+    const yearsRange = computed<[number, number]>(() => {
+      const currentYear = activeDate.value.getFullYear();
+      const from = currentYear - (currentYear % 12);
+      const to = from + 11;
+      return [from, to];
+    });
+
     const toggleView = () => {
-      if (currentView.value === TDatepickerView.Day) {
+      if (isMonthView.value) {
         setCurrentView(TDatepickerView.Month);
-      } else if (currentView.value === TDatepickerView.Month) {
+      } else if (isYearView.value) {
         setCurrentView(TDatepickerView.Year);
       } else {
         setCurrentView(TDatepickerView.Day);
       }
     };
 
-    return { monthName, year, toggleView };
+    return { monthName, year, toggleView, isMonthView, isYearView, yearsRange };
   },
 });
 </script>

From 5bce2b5e5ec94593eec3b176443132d7ad365b3f Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 9 Feb 2022 11:50:57 -0600
Subject: [PATCH 20/85] Day button attributes & label

---
 .../TDatepicker/DatepickerViewMonthDay.vue      | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index ab61aed..58a0c8c 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -1,24 +1,25 @@
 <template>
   <div :class="configuration.classesList?.calendarDaysDayWrapper">
     <button
-      aria-label="September 26, 2021"
-      data-date="2021-09-26"
+      :aria-label="ariaLabel"
+      :data-date="dataDate"
       type="button"
       tabindex="-1"
       :class="buttonClass"
       @click="daySelectedHandler"
     >
-      {{ day.getDate() }}
+      {{ dayLabel }}
     </button>
   </div>
 </template>
 
 <script lang="ts">
 import {
+  DateFormatter,
   dateIsPartOfTheRange, DateParser, dayIsPartOfTheConditions, isSameDay,
 } from '@variantjs/core';
 import {
-  defineComponent, inject, computed, Ref,
+  defineComponent, inject, computed, Ref, ComputedRef,
 } from 'vue';
 import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
@@ -40,8 +41,12 @@ export default defineComponent({
     const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
     const activeDate = inject<Ref<Date>>('activeDate')!;
     const parseDate = inject<Ref<DateParser>>('parseDate')!;
-    // @TODO: Fix class
     const selectDay = inject<(day: Date) => void>('selectDay')!;
+    const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
+
+    const ariaLabel = formatDate.value(props.day, 'F d, Y');
+    const dataDate = formatDate.value(props.day, 'Y-m-d');
+    const dayLabel = formatDate.value(props.day, 'j');
 
     const isForAnotherMonth = computed(() => props.day.getFullYear() !== props.month.getFullYear()
         || props.day.getMonth() !== props.month.getMonth());
@@ -130,7 +135,7 @@ export default defineComponent({
       selectDay(props.day);
     };
 
-    return { configuration, buttonClass, daySelectedHandler };
+    return { configuration, buttonClass, daySelectedHandler, ariaLabel, dataDate, dayLabel };
   },
 });
 </script>

From 8a1b75ffbbe01bf84db3637fea5d9a8bd4ad6b15 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 9 Feb 2022 11:52:42 -0600
Subject: [PATCH 21/85] set active day selected day

---
 src/components/TDatepicker.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index b6dbe66..f4fabf7 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -336,6 +336,9 @@ export default defineComponent({
     const showActiveDate = ref<boolean>(false);
 
     const selectDay = (day: Date) => {
+      activeDate.value = day;
+      showActiveDate.value = false;
+
       // If we are using multiple or range means that the day consists of an array
       // of dates
       if (configuration.multiple || configuration.range) {
@@ -378,8 +381,6 @@ export default defineComponent({
       }
 
       selectedDate.value = day;
-
-      showActiveDate.value = false;
     };
 
     // If the date field is blurred (date clicked for example) we should focus

From 43444631bef709f3710d64cb3bca587db5161b39 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 9 Feb 2022 12:03:49 -0600
Subject: [PATCH 22/85] Month button classes & fix month selection

---
 .../TDatepicker/DatepickerViewYear.vue        | 15 +++++---
 .../TDatepicker/DatepickerViewYearMonth.vue   | 37 +++++++++++++++++--
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/components/TDatepicker/DatepickerViewYear.vue b/src/components/TDatepicker/DatepickerViewYear.vue
index 6b42a93..9ed9196 100644
--- a/src/components/TDatepicker/DatepickerViewYear.vue
+++ b/src/components/TDatepicker/DatepickerViewYear.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { range, clone } from '@variantjs/core';
+import { range, addMonths } from '@variantjs/core';
 import {
   defineComponent, inject, Ref,
 } from 'vue';
@@ -25,11 +25,14 @@ export default defineComponent({
   setup() {
     const activeDate = inject<Ref<Date>>('activeDate')!;
 
-    const months: Date[] = range(0, 11).map((monthIndex) => {
-      const month = clone(activeDate.value);
-      month.setMonth(monthIndex);
-      return month;
-    });
+    // The `addMonths` function ensures it uses an equivalent month day in case
+    // it have different days, for example: If the active date is `2019-01-31` 
+    // (last day of january) the next month day will be `2019-02-28` (last day
+    // of february).
+    const months: Date[] = range(
+      activeDate.value.getMonth() * -1,
+      11 - activeDate.value.getMonth(),
+    ).map((monthDiff) => addMonths(activeDate.value, monthDiff));
 
     return { months };
   },
diff --git a/src/components/TDatepicker/DatepickerViewYearMonth.vue b/src/components/TDatepicker/DatepickerViewYearMonth.vue
index b5a7420..0f774e6 100644
--- a/src/components/TDatepicker/DatepickerViewYearMonth.vue
+++ b/src/components/TDatepicker/DatepickerViewYearMonth.vue
@@ -4,14 +4,15 @@
     :data-date="dataDate"
     type="button"
     tabindex="-1"
-    class="text-sm rounded w-full h-12 mx-auto hover:bg-blue-100"
+    :class="buttonClass"
     v-text="monthLabel"
   />
 </template>
 
 <script lang="ts">
-import { DateFormatter } from '@variantjs/core';
-import { ComputedRef, defineComponent, inject } from 'vue';
+import { DateFormatter, isSameMonth } from '@variantjs/core';
+import { ComputedRef, defineComponent, inject, computed, Ref } from 'vue';
+import { TDatepickerOptions } from '../..';
 
 export default defineComponent({
   name: 'DatepickerViewYearMonth',
@@ -22,13 +23,41 @@ export default defineComponent({
     },
   },
   setup(props) { 
+    const configuration = inject<TDatepickerOptions>('configuration')!;
     const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
+    const activeDate = inject<Ref<Date>>('activeDate')!;
+    const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
+    const showActiveDate = inject<Ref<boolean>>('showActiveDate')!;
 
     const ariaLabel = formatDate.value(props.month, 'F, Y');
     const dataDate = formatDate.value(props.month, 'Y-m');
     const monthLabel = formatDate.value(props.month, 'M');
 
-    return { ariaLabel, dataDate, monthLabel };
+    const isSelected = computed<boolean>(() => {
+      if (Array.isArray(selectedDate.value)) {
+        return selectedDate.value.some((date) => isSameMonth(date, props.month));
+      }
+
+      return isSameMonth(selectedDate.value, props.month);
+    });
+
+    const isActive = computed<boolean>(() => isSameMonth(activeDate.value, props.month));
+
+    const buttonClass = computed(() => {
+      if (isSelected.value) {
+        return configuration.classesList?.selectedMonth;
+      }
+
+      if (isActive.value && showActiveDate.value) {
+        return configuration.classesList?.activeMonth;
+      }
+
+      return configuration.classesList?.month;
+    });
+
+    console.log(buttonClass.value);
+
+    return { ariaLabel, dataDate, monthLabel, buttonClass };
   },
 });
 </script>

From 95d9606e4b4e8c28410a5516a5f1822ec1cecb8a Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 9 Feb 2022 12:28:42 -0600
Subject: [PATCH 23/85] Select month

---
 src/components/TDatepicker.vue                | 46 ++++++++++++++-----
 .../TDatepicker/DatepickerViewYearMonth.vue   |  8 +++-
 2 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index f4fabf7..8dd7ea0 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -273,9 +273,8 @@ export default defineComponent({
     // - Toggle datepicker on enter accoridng to props (since its overriding the dropdown option)
     // - Check aria labels on buttons 
     // - Replace svg icons with icon component
-    // @IMMEDIATE TODO:
-    // - active & selected styling in view items for year and multiple years
-
+    // - When changing the active date we should reset the active view after closing the dropdown
+    
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
     const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
@@ -335,10 +334,21 @@ export default defineComponent({
     // The active date is usually hidden but shown when navigating with the keyboard
     const showActiveDate = ref<boolean>(false);
 
-    const selectDay = (day: Date) => {
-      activeDate.value = day;
+    const setActiveDate = (date: Date) => {
+      activeDate.value = date;
+      
       showActiveDate.value = false;
 
+      if (currentView.value === TDatepickerView.Year) {
+        setCurrentView(TDatepickerView.Month);
+      } else if (currentView.value === TDatepickerView.Month) {
+        setCurrentView(TDatepickerView.Day);
+      }
+    };
+
+    const selectDay = (day: Date) => {
+      setActiveDate(day);
+
       // If we are using multiple or range means that the day consists of an array
       // of dates
       if (configuration.multiple || configuration.range) {
@@ -383,6 +393,19 @@ export default defineComponent({
       selectedDate.value = day;
     };
 
+    // Note about `selectMonth` and `selectYear` methods:
+    // In most cases selecting a month or year only changes the active date which
+    // means it doesnt trigger an input event (since day still needs to be selected).
+    // In the future we may consider allowing the user to select only month and/or
+    // year which means we should also handle the input event
+    const selectMonth = (month: Date) => {
+      setActiveDate(month);
+    };
+
+    const selectYear = (year: Date) => {
+      setActiveDate(year);
+    };
+
     // If the date field is blurred (date clicked for example) we should focus
     // the field again
     // @TODO: Consider the case when other elements should keep the focus
@@ -433,14 +456,11 @@ export default defineComponent({
       const daysPerView = days[currentView.value][keyCode];
 
       // Depending of the view (year view, month view or day views the amount of days is different)
-      if (currentView.value === 'year') {
-        // @TODO: test considering the case when the year is not a leap year
+      if (currentView.value === TDatepickerView.Year) {
         activeDate.value = addYears(activeDate.value, daysPerView);
-      } else if (currentView.value === 'month') {
-        // @TODO: test considering the case when the month is not a leap month
+      } else if (currentView.value === TDatepickerView.Month) {
         activeDate.value = addMonths(activeDate.value, daysPerView);
-      } else if (currentView.value === 'day') {
-        // One week is the day below the current one
+      } else if (currentView.value === TDatepickerView.Day) {
         activeDate.value = addDays(activeDate.value, daysPerView);
       }
 
@@ -467,6 +487,10 @@ export default defineComponent({
     
     provide('selectDay', selectDay);
     
+    provide('selectMonth', selectMonth);
+    
+    provide('selectYear', selectYear);
+    
     provide('setCurrentView', setCurrentView);
     
     provide('currentView', currentView);
diff --git a/src/components/TDatepicker/DatepickerViewYearMonth.vue b/src/components/TDatepicker/DatepickerViewYearMonth.vue
index 0f774e6..3ca26d5 100644
--- a/src/components/TDatepicker/DatepickerViewYearMonth.vue
+++ b/src/components/TDatepicker/DatepickerViewYearMonth.vue
@@ -5,6 +5,7 @@
     type="button"
     tabindex="-1"
     :class="buttonClass"
+    @click="monthSelectedHandler"
     v-text="monthLabel"
   />
 </template>
@@ -28,6 +29,7 @@ export default defineComponent({
     const activeDate = inject<Ref<Date>>('activeDate')!;
     const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
     const showActiveDate = inject<Ref<boolean>>('showActiveDate')!;
+    const selectMonth = inject<(day: Date) => void>('selectMonth')!;
 
     const ariaLabel = formatDate.value(props.month, 'F, Y');
     const dataDate = formatDate.value(props.month, 'Y-m');
@@ -55,9 +57,11 @@ export default defineComponent({
       return configuration.classesList?.month;
     });
 
-    console.log(buttonClass.value);
+    const monthSelectedHandler = ()  => {
+      selectMonth(props.month);
+    };
 
-    return { ariaLabel, dataDate, monthLabel, buttonClass };
+    return { ariaLabel, dataDate, monthLabel, buttonClass, monthSelectedHandler };
   },
 });
 </script>

From 8101a6f39e6e84b6bde6723b907551cdd3e29006 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 9 Feb 2022 12:44:35 -0600
Subject: [PATCH 24/85] Handle active date & month

---
 package.json                                  |  2 +-
 src/components/TDatepicker.vue                |  6 +--
 .../DatepickerViewMultipleYearsYear.vue       | 40 +++++++++++++++++--
 .../TDatepicker/DatepickerViewYearMonth.vue   |  3 +-
 yarn.lock                                     |  8 ++--
 5 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 14d5e69..e9c7cb2 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,6 @@
     }
   },
   "dependencies": {
-    "@variantjs/core": "^0.0.81"
+    "@variantjs/core": "^0.0.82"
   }
 }
diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 8dd7ea0..dcf1306 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -283,6 +283,9 @@ export default defineComponent({
 
     const currentView = ref<TDatepickerView>(configuration.initialView!);
 
+    // The active date is usually hidden but shown when navigating with the keyboard
+    const showActiveDate = ref<boolean>(false);
+
     const setCurrentView = (view: TDatepickerView) => {
       currentView.value = view;
     };
@@ -331,9 +334,6 @@ export default defineComponent({
 
     const activeDate = ref<Date>(getInitialActiveDate(selectedDate.value));
 
-    // The active date is usually hidden but shown when navigating with the keyboard
-    const showActiveDate = ref<boolean>(false);
-
     const setActiveDate = (date: Date) => {
       activeDate.value = date;
       
diff --git a/src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue b/src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue
index 2dd0f72..b93eab7 100644
--- a/src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue
+++ b/src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue
@@ -4,14 +4,16 @@
     :data-date="yearLabel"
     type="button"
     tabindex="-1"
-    class="text-sm rounded w-full h-12 mx-auto hover:bg-blue-100"
+    :class="buttonClass"
+    @click="yearSelectedHandler"
     v-text="yearLabel"
   />
 </template>
 
 <script lang="ts">
-import { DateFormatter } from '@variantjs/core';
-import { ComputedRef, defineComponent, inject } from 'vue';
+import { DateFormatter, isSameYear } from '@variantjs/core';
+import { computed, ComputedRef, defineComponent, inject, Ref } from 'vue';
+import { TDatepickerOptions } from '../..';
 
 export default defineComponent({
   name: 'DatepickerViewMultipleYearsYear',
@@ -22,11 +24,41 @@ export default defineComponent({
     },
   },
   setup(props) { 
+    const configuration = inject<TDatepickerOptions>('configuration')!;
     const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
+    const activeDate = inject<Ref<Date>>('activeDate')!;
+    const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
+    const selectYear = inject<(day: Date) => void>('selectYear')!;
 
     const yearLabel = formatDate.value(props.year, 'Y');
 
-    return { yearLabel };
+    const isSelected = computed<boolean>(() => {
+      if (Array.isArray(selectedDate.value)) {
+        return selectedDate.value.some((date) => isSameYear(date, props.year));
+      }
+
+      return isSameYear(selectedDate.value, props.year);
+    });
+
+    const isActive = computed<boolean>(() => isSameYear(activeDate.value, props.year));
+
+    const buttonClass = computed(() => {
+      if (isSelected.value) {
+        return configuration.classesList?.selectedYear;
+      }
+
+      if (isActive.value) {
+        return configuration.classesList?.activeYear;
+      }
+
+      return configuration.classesList?.year;
+    });
+
+    const yearSelectedHandler = ()  => {
+      selectYear(props.year);
+    };
+
+    return { yearLabel, buttonClass, yearSelectedHandler };
   },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewYearMonth.vue b/src/components/TDatepicker/DatepickerViewYearMonth.vue
index 3ca26d5..0c1b89f 100644
--- a/src/components/TDatepicker/DatepickerViewYearMonth.vue
+++ b/src/components/TDatepicker/DatepickerViewYearMonth.vue
@@ -28,7 +28,6 @@ export default defineComponent({
     const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
     const activeDate = inject<Ref<Date>>('activeDate')!;
     const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
-    const showActiveDate = inject<Ref<boolean>>('showActiveDate')!;
     const selectMonth = inject<(day: Date) => void>('selectMonth')!;
 
     const ariaLabel = formatDate.value(props.month, 'F, Y');
@@ -50,7 +49,7 @@ export default defineComponent({
         return configuration.classesList?.selectedMonth;
       }
 
-      if (isActive.value && showActiveDate.value) {
+      if (isActive.value) {
         return configuration.classesList?.activeMonth;
       }
 
diff --git a/yarn.lock b/yarn.lock
index 852f9c6..7ed4b4b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1370,10 +1370,10 @@
     "@typescript-eslint/types" "5.10.2"
     eslint-visitor-keys "^3.0.0"
 
-"@variantjs/core@^0.0.81":
-  version "0.0.81"
-  resolved "https://registry.npmjs.org/@variantjs/core/-/core-0.0.81.tgz#62ecb3c3838dec5e05dc49f014381258594f628e"
-  integrity sha512-vi/olPf1MH8+h1VszXMAyVKd+UNtwnCm1P7a9IRQMmVmYbpCpZn68lPJUIW5hF3aFiKVMC+gv4+AFylv990dMQ==
+"@variantjs/core@^0.0.82":
+  version "0.0.82"
+  resolved "https://registry.npmjs.org/@variantjs/core/-/core-0.0.82.tgz#65f9c04ff259f770ae9940c0d1bda8422818673a"
+  integrity sha512-rsIqkq4CRfRMzOyWzzsFcmSe7RjLAmxQzUux+fWEykfQe4NvkInGbRRNExYTtCar8k2VyhoxEfewpFyjOV3OAA==
 
 "@vitejs/plugin-vue@^2.0.1":
   version "2.1.0"

From 99b88aaedfc175514005428c259a33c367bc2b0c Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 9 Feb 2022 12:45:53 -0600
Subject: [PATCH 25/85] cleanup

---
 src/components/TDatepicker.vue | 81 ----------------------------------
 1 file changed, 81 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index dcf1306..2a28497 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -34,87 +34,6 @@
       @keydown.enter="enterHandler"
     >
       <datepicker-dropdown />
-      <!-- :classes="dropdownClasses"
-      :fixed-classes="undefined" -->
-
-      <!-- :toggle-on-focus="false"
-      :toggle-on-click="false"
-      :toggle-on-hover="false" -->
-      <!-- <template #trigger>
-        <rich-select-trigger ref="trigger">
-          <template #selectorIcon="props">
-            <slot
-              name="selectorIcon"
-              v-bind="props"
-            />
-          </template>
-          <template #placeholder="props">
-            <slot
-              name="placeholder"
-              v-bind="props"
-            />
-          </template>
-          <template #label="props">
-            <slot
-              name="label"
-              v-bind="props"
-            />
-          </template>
-          <template #tagCloseIcon="props">
-            <slot
-              name="tagCloseIcon"
-              v-bind="props"
-            />
-          </template>
-          <template #tagLabel="props">
-            <slot
-              name="tagLabel"
-              v-bind="props"
-            />
-          </template>
-        </rich-select-trigger>
-      </template> -->
-
-      <!-- <rich-select-dropdown
-        ref="dropdown"
-      >
-        <template #option="props">
-          <slot
-            name="option"
-            v-bind="props"
-          />
-        </template>
-        <template #optionLabel="props">
-          <slot
-            name="optionLabel"
-            v-bind="props"
-          />
-        </template>
-        <template #optionIcon="props">
-          <slot
-            name="optionIcon"
-            v-bind="props"
-          />
-        </template>
-        <template #dropdownTop="props">
-          <slot
-            name="dropdownTop"
-            v-bind="props"
-          />
-        </template>
-        <template #dropdownButton="props">
-          <slot
-            name="dropdownButton"
-            v-bind="props"
-          />
-        </template>
-        <template #stateFeedback="props">
-          <slot
-            name="stateFeedback"
-            v-bind="props"
-          />
-        </template>
-      </rich-select-dropdown> -->
     </t-dropdown>
 
     <!-- <rich-select-clear-button

From d9138fe23ea21d128328760b54b7b6daaf7cbcbe Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 9 Feb 2022 13:03:53 -0600
Subject: [PATCH 26/85] Refactor date selection to prepare for the v-model

---
 src/components/TDatepicker.vue | 45 +++++++++++++++++-----------------
 src/development/Datepicker.vue | 12 +++++++--
 2 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 2a28497..0d97ec4 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -265,16 +265,13 @@ export default defineComponent({
       }
     };
 
-    const selectDay = (day: Date) => {
-      setActiveDate(day);
-
+    const getNewSelectedDate = (day: Date): Date | Date[] => {
       // If we are using multiple or range means that the day consists of an array
       // of dates
       if (configuration.multiple || configuration.range) {
         // If not array or is empty initialize it with with the selected date
         if (!Array.isArray(selectedDate.value) || selectedDate.value.length === 0) {
-          selectedDate.value = [day];
-          return;
+          return [day];
         }
 
         // The ranges consists in a tuple of dates, we should fill the first 
@@ -283,33 +280,35 @@ export default defineComponent({
           // If the new day is before than the first element of the range we need
           // to reinitialize the range
           if (diffInDays(selectedDate.value[0], day) < 0) {
-            selectedDate.value = [day];
-            return;
+            return [day];
           }
 
           // If the range is already full we are going to replace the second date
           if (selectedDate.value.length === 2) {
-            selectedDate.value[1] = day;
-            return;
+            return [selectedDate.value[0], day];
           }
             
           // Otherwise just add the new day to the range
-          selectedDate.value.push(day);
-          return;
+          return [...selectedDate.value, day];
         }
 
         if (configuration.multiple) {
-          if (selectedDate.value.includes(day)) {
-            selectedDate.value = selectedDate.value.filter((date) => ! isSameDay(date, day));
-            return;
+          // If already selected, remove it
+          if (selectedDate.value.some(date => isSameDay(date, day))) {
+            return selectedDate.value.filter((date) => ! isSameDay(date, day));
           }
 
-          selectedDate.value.push(day);
-          return;
+          return [...selectedDate.value, day];
         }
       }
 
-      selectedDate.value = day;
+      return day;
+    };
+
+    const selectDay = (day: Date) => {
+      selectedDate.value = getNewSelectedDate(day);
+
+      setActiveDate(day);
     };
 
     // Note about `selectMonth` and `selectYear` methods:
@@ -325,6 +324,12 @@ export default defineComponent({
       setActiveDate(year);
     };
 
+    const selectActiveDate = () => {
+      selectDay(activeDate.value);
+    };
+
+    const enterHandler = () => selectActiveDate();
+
     // If the date field is blurred (date clicked for example) we should focus
     // the field again
     // @TODO: Consider the case when other elements should keep the focus
@@ -386,12 +391,6 @@ export default defineComponent({
       showActiveDate.value = true;
     };
 
-    const selectActiveDate = () => {
-      selectDay(activeDate.value);
-    };
-
-    const enterHandler = () => selectActiveDate();
-
     provide('activeDate', activeDate);
 
     provide('showActiveDate', showActiveDate);
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index e2782ef..cdcdbda 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -4,7 +4,15 @@
       label="Default Datepicker"
       class="mb-4"
     >
-      <t-datepicker />
+      <t-datepicker v-model="date" />
+
+      <p class="space-x-2 flex items-center mt-2 text-sm">
+        <span>Value:</span>
+        <span
+          class="bg-gray-200 text-gray-800 text-xs font-mono rounded py-1 px-2"
+          v-text="date"
+        />
+      </p>
     </TInputGroup>
     <TInputGroup
       label="Range"
@@ -41,7 +49,7 @@ export default defineComponent({
   },
   data() {
     return {
-
+      date: new Date(),
     };
   },
 

From c7e0ee982605bfacbcac4f6bb19425e93ee78731 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 9 Feb 2022 13:10:03 -0600
Subject: [PATCH 27/85] date picker input handling WIP

---
 src/components/TDatepicker.vue | 14 ++++++++++++--
 src/development/Datepicker.vue | 14 +++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 0d97ec4..2495729 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -179,7 +179,7 @@ export default defineComponent({
       default: TDatepickerView.Day,
     },
   },
-  setup(props) {
+  setup(props, { emit }) {
     // @TODOS:
     // - Reinitialize the range after the dropdown is closed
     // - Range and multiple: Consider selected dates outside of the view
@@ -306,7 +306,17 @@ export default defineComponent({
     };
 
     const selectDay = (day: Date) => {
-      selectedDate.value = getNewSelectedDate(day);
+      const date = getNewSelectedDate(day);
+
+      emit('input', new CustomEvent('input', {
+        detail: date,
+      }));
+      
+      emit('change', new CustomEvent('change', {
+        detail: date,
+      }));
+
+      emit('update:modelValue', date);
 
       setActiveDate(day);
     };
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index cdcdbda..9f62783 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -4,7 +4,11 @@
       label="Default Datepicker"
       class="mb-4"
     >
-      <t-datepicker v-model="date" />
+      <t-datepicker
+        v-model="date"
+        @change="dateChange"
+        @input="dateInput"
+      />
 
       <p class="space-x-2 flex items-center mt-2 text-sm">
         <span>Value:</span>
@@ -52,6 +56,14 @@ export default defineComponent({
       date: new Date(),
     };
   },
+  methods: {
+    dateChange(date: Date) {
+      console.log('Datepicker: dateChange', date);
+    },
+    dateInput(date: Date) {
+      console.log('Datepicker: dateInput', date);
+    },
+  },
 
 });
 </script>

From 522d73c3698e95b4d98a0d2645de9ca30d36bba9 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 09:55:23 -0600
Subject: [PATCH 28/85] vmodel events wip

---
 src/components/TDatepicker.vue | 29 ++++++++++++++++++++---------
 src/development/Datepicker.vue | 20 +++++++++++++-------
 2 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 2495729..bf40d4e 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -179,6 +179,12 @@ export default defineComponent({
       default: TDatepickerView.Day,
     },
   },
+  emits: {
+    change: (e: CustomEvent) => e instanceof CustomEvent,
+    input: (e: CustomEvent) => e instanceof CustomEvent,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    'update:modelValue': (value: string | string[]) => true,
+  },
   setup(props, { emit }) {
     // @TODOS:
     // - Reinitialize the range after the dropdown is closed
@@ -308,17 +314,22 @@ export default defineComponent({
     const selectDay = (day: Date) => {
       const date = getNewSelectedDate(day);
 
-      emit('input', new CustomEvent('input', {
-        detail: date,
-      }));
-      
-      emit('change', new CustomEvent('change', {
-        detail: date,
-      }));
+      setActiveDate(day);
 
-      emit('update:modelValue', date);
+      const formattedDate: string | string[] = Array.isArray(date) 
+        ? date.map((dateItem) => formatDate.value(dateItem, configuration.dateFormat))
+        : formatDate.value(date, configuration.dateFormat);
 
-      setActiveDate(day);
+      const event = new CustomEvent('input', {
+        detail: {
+          formattedDate: formattedDate,
+          date: date,
+        },
+      });
+      
+      emit('change', event);
+      emit('input', event);
+      emit('update:modelValue', formattedDate);      
     };
 
     // Note about `selectMonth` and `selectYear` methods:
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 9f62783..74254a8 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -9,7 +9,7 @@
         @change="dateChange"
         @input="dateInput"
       />
-
+      
       <p class="space-x-2 flex items-center mt-2 text-sm">
         <span>Value:</span>
         <span
@@ -18,6 +18,12 @@
         />
       </p>
     </TInputGroup>
+    <TInputGroup
+      label="VModel Sync"
+      class="mb-4"
+    >
+      <t-datepicker v-model="date" />
+    </TInputGroup>
     <TInputGroup
       label="Range"
       class="mb-4"
@@ -45,7 +51,7 @@ import TInputGroup from '../components/TInputGroup.vue';
 import TDatepicker from '../components/TDatepicker.vue';
 
 export default defineComponent({
-  name: 'Datepicker',
+  name: 'DatepickerComponent',
   components: {
     TCard,
     TInputGroup,
@@ -53,15 +59,15 @@ export default defineComponent({
   },
   data() {
     return {
-      date: new Date(),
+      date: '1987-02-18',
     };
   },
   methods: {
-    dateChange(date: Date) {
-      console.log('Datepicker: dateChange', date);
+    dateChange(e: CustomEvent) {
+      console.log('Datepicker: dateChange', e);
     },
-    dateInput(date: Date) {
-      console.log('Datepicker: dateInput', date);
+    dateInput(e: CustomEvent) {
+      console.log('Datepicker: dateInput', e);
     },
   },
 

From e2a60cd26292e521ffb63e0d611a5275bdd419c2 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 10:48:44 -0600
Subject: [PATCH 29/85] Refactor date selector trigger

---
 src/components/TDatepicker.vue                | 97 ++++++++++++-------
 .../TDatepicker/DatepickerTrigger.vue         | 41 ++++++++
 src/components/TDropdown.vue                  |  2 +
 3 files changed, 106 insertions(+), 34 deletions(-)
 create mode 100644 src/components/TDatepicker/DatepickerTrigger.vue

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index bf40d4e..a095e1a 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -1,9 +1,9 @@
 <template>
-  <div
+  <!-- <div
     :class="configuration.classesList?.wrapper"
     v-bind="attributes"
-  >
-    <!-- <t-select
+  > -->
+  <!-- <t-select
       v-model="localValue"
       :name="configuration.name"
       style="display: none"
@@ -13,30 +13,33 @@
       :options="flattenedOptions"
     /> -->
 
-    <t-dropdown
-      ref="dropdownComponent"
-      :classes="undefined"
-      :fixed-classes="undefined"
-      :popper-options="configuration.dropdownPopperOptions"
-      :placement="configuration.dropdownPlacement"
-      tag-name="input"
-      type="text"
-      class="border border-gray-300"
-      :toggle-on-click="false"
-
-      @blur-on-child="blurOnChildHandler"
+  <t-dropdown
+    ref="dropdownComponent"
+    :classes="undefined"
+    :fixed-classes="undefined"
+    :popper-options="configuration.dropdownPopperOptions"
+    :placement="configuration.dropdownPlacement"
+    tag-name="div"
+    :toggle-on-click="false"
+    @blur-on-child="blurOnChildHandler"
+    @keydown.down="keyboardNavigationHandler"
+    @keydown.up="keyboardNavigationHandler"
+    @keydown.left="keyboardNavigationHandler"
+    @keydown.right="keyboardNavigationHandler"
+
+    @keydown.enter="enterHandler"
+  >
+    <template #trigger="{ focusHandler, blurHandler }">
+      <datepicker-trigger
+        @focus="focusHandler"
+        @blur="blurHandler"
+      />
+    </template>
       
-      @keydown.down="keyboardNavigationHandler"
-      @keydown.up="keyboardNavigationHandler"
-      @keydown.left="keyboardNavigationHandler"
-      @keydown.right="keyboardNavigationHandler"
+    <datepicker-dropdown />
+  </t-dropdown>
 
-      @keydown.enter="enterHandler"
-    >
-      <datepicker-dropdown />
-    </t-dropdown>
-
-    <!-- <rich-select-clear-button
+  <!-- <rich-select-clear-button
       v-if="showClearButton"
       ref="clearButton"
       @click="clearValue"
@@ -49,7 +52,7 @@
         />
       </template>
     </rich-select-clear-button> -->
-  </div>
+  <!-- </div> -->
 </template>
 
 <script lang="ts">
@@ -86,6 +89,7 @@ import {
   TDatepickerOptions, TDatepickerValue,
 } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
+import DatepickerTrigger from './TDatepicker/DatepickerTrigger.vue';
 import TDropdown, { validDropdownPlacements } from './TDropdown.vue';
 import { TDatepickerSingleValue, TDatepickerView } from '../types/components/t-datepicker';
 
@@ -94,6 +98,7 @@ export default defineComponent({
   name: 'TDatepicker',
   components: {
     DatepickerDropdown,
+    DatepickerTrigger,
     TDropdown,
   },
   props: {
@@ -258,6 +263,21 @@ export default defineComponent({
     const selectedDate = ref<Date | Date[] | undefined>(getInitialSelectedDate());
 
     const activeDate = ref<Date>(getInitialActiveDate(selectedDate.value));
+    
+    const dateValue = computed<string | string[]>(() => {
+      return Array.isArray(selectedDate.value) 
+        ? selectedDate.value.map((dateItem) => formatDate.value(dateItem, configuration.dateFormat))
+        : formatDate.value(selectedDate.value, configuration.dateFormat);
+    });
+
+    const userDate = computed<string>(() => {
+      return Array.isArray(selectedDate.value) 
+        ? selectedDate.value
+          .map((dateItem) => formatDate.value(dateItem, configuration.userFormat))
+          // @TODO: Date separator comes from the configuration
+          .join(', ')
+        : formatDate.value(selectedDate.value, configuration.userFormat);
+    });
 
     const setActiveDate = (date: Date) => {
       activeDate.value = date;
@@ -311,25 +331,26 @@ export default defineComponent({
       return day;
     };
 
+    const setSelectedDate = (date: Date | Date[] | undefined) => {
+      selectedDate.value = date;
+    };
+
     const selectDay = (day: Date) => {
-      const date = getNewSelectedDate(day);
+      setSelectedDate(getNewSelectedDate(day));
 
       setActiveDate(day);
 
-      const formattedDate: string | string[] = Array.isArray(date) 
-        ? date.map((dateItem) => formatDate.value(dateItem, configuration.dateFormat))
-        : formatDate.value(date, configuration.dateFormat);
-
       const event = new CustomEvent('input', {
         detail: {
-          formattedDate: formattedDate,
-          date: date,
+          value: dateValue.value,
+          formattedDate: userDate.value,
+          date: selectedDate.value,
         },
       });
       
       emit('change', event);
       emit('input', event);
-      emit('update:modelValue', formattedDate);      
+      emit('update:modelValue', dateValue.value);      
     };
 
     // Note about `selectMonth` and `selectYear` methods:
@@ -412,11 +433,16 @@ export default defineComponent({
       showActiveDate.value = true;
     };
 
+
     provide('activeDate', activeDate);
 
     provide('showActiveDate', showActiveDate);
 
     provide('selectedDate', selectedDate);
+    
+    provide('setSelectedDate', setSelectedDate);
+    
+    provide('setActiveDate', setActiveDate);
 
     provide('configuration', configuration);
 
@@ -433,6 +459,8 @@ export default defineComponent({
     provide('setCurrentView', setCurrentView);
     
     provide('currentView', currentView);
+    
+    provide('userDate', userDate);
 
     return {
       configuration,
@@ -440,6 +468,7 @@ export default defineComponent({
       blurOnChildHandler,
       enterHandler,
       keyboardNavigationHandler,
+      
     };
   },
 
diff --git a/src/components/TDatepicker/DatepickerTrigger.vue b/src/components/TDatepicker/DatepickerTrigger.vue
new file mode 100644
index 0000000..0b657ee
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerTrigger.vue
@@ -0,0 +1,41 @@
+<template>
+  <input
+    class="block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed"
+    :value="userDate"
+    @change="dateUserInputHandler"
+  >
+</template>
+
+<script lang="ts">
+import { DateParser } from '@variantjs/core';
+import {
+  defineComponent, inject, PropType, Ref, 
+} from 'vue';
+import { TDatepickerOptions } from '../..';
+export default defineComponent({
+  name: 'DatepickerTrigger',
+  setup: () => {
+    const userDate = inject<Ref<string>>('userDate')!;
+    const parseDate = inject<Ref<DateParser>>('parseDate')!;
+    const configuration = inject<TDatepickerOptions>('configuration')!;
+    const setSelectedDate = inject<(date: Date | Date[] | undefined) => void>('setSelectedDate')!;
+    const setActiveDate = inject<(date: Date) => void>('setActiveDate')!;
+    
+    const dateUserInputHandler = (e: Event) => {
+      const input = e.target as HTMLInputElement;
+      
+      const parsedDate = parseDate.value(input.value, configuration.userFormat);
+      setSelectedDate(parsedDate);
+
+      if (parsedDate !== undefined) {
+        setActiveDate(parsedDate);
+      }
+    };
+
+    return {
+      userDate,
+      dateUserInputHandler,
+    };
+  },  
+});
+</script>
diff --git a/src/components/TDropdown.vue b/src/components/TDropdown.vue
index 11f808d..160af9e 100644
--- a/src/components/TDropdown.vue
+++ b/src/components/TDropdown.vue
@@ -20,6 +20,8 @@
       :is-show="shown"
       :popper="popper"
       name="trigger"
+      :focus-handler="focusHandler"
+      :blur-handler="blurHandler"
     >
       {{ configuration.text }}
     </slot>

From faf736718f14c4ab016cf194b013e10546a2561d Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 10:50:38 -0600
Subject: [PATCH 30/85] cleanup

---
 src/components/TDatepicker/DatepickerTrigger.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/TDatepicker/DatepickerTrigger.vue b/src/components/TDatepicker/DatepickerTrigger.vue
index 0b657ee..bf38a2d 100644
--- a/src/components/TDatepicker/DatepickerTrigger.vue
+++ b/src/components/TDatepicker/DatepickerTrigger.vue
@@ -1,6 +1,7 @@
 <template>
   <input
     class="block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed"
+    type="text"
     :value="userDate"
     @change="dateUserInputHandler"
   >
@@ -9,7 +10,7 @@
 <script lang="ts">
 import { DateParser } from '@variantjs/core';
 import {
-  defineComponent, inject, PropType, Ref, 
+  defineComponent, inject, Ref, 
 } from 'vue';
 import { TDatepickerOptions } from '../..';
 export default defineComponent({

From 2fb4a4ed0d5859ba6a14899faeeb64108575a3a9 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 11:01:36 -0600
Subject: [PATCH 31/85] pass dropdown toggle settings to datepicker

---
 src/components/TDatepicker.vue       | 38 ++++++++++++++++++++++----
 src/development/Datepicker.vue       | 41 ++++++++++++++++++++++++++++
 src/types/components/t-datepicker.ts |  6 +++-
 3 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index a095e1a..5b60294 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -20,20 +20,30 @@
     :popper-options="configuration.dropdownPopperOptions"
     :placement="configuration.dropdownPlacement"
     tag-name="div"
-    :toggle-on-click="false"
+    :toggle-on-click="configuration.toggleOnClick"
+    :toggle-on-hover="configuration.toggleOnHover"
+    :toggle-on-focus="configuration.toggleOnFocus"
+    :hide-on-leave-timeout="configuration.hideOnLeaveTimeout"
     @blur-on-child="blurOnChildHandler"
     @keydown.down="keyboardNavigationHandler"
     @keydown.up="keyboardNavigationHandler"
     @keydown.left="keyboardNavigationHandler"
     @keydown.right="keyboardNavigationHandler"
-
     @keydown.enter="enterHandler"
   >
     <template #trigger="{ focusHandler, blurHandler }">
-      <datepicker-trigger
-        @focus="focusHandler"
-        @blur="blurHandler"
-      />
+      <slot
+        :configuration="configuration"
+        name="trigger"
+        :focus-handler="focusHandler"
+        :blur-handler="blurHandler"
+      >
+        {{ configuration.text }}
+        <datepicker-trigger
+          @focus="focusHandler"
+          @blur="blurHandler"
+        />
+      </slot>
     </template>
       
     <datepicker-dropdown />
@@ -183,6 +193,22 @@ export default defineComponent({
       type: String as PropType<TDatepickerView>,
       default: TDatepickerView.Day,
     },
+    toggleOnFocus: {
+      type: Boolean,
+      default: true,
+    },
+    toggleOnClick: {
+      type: Boolean,
+      default: true,
+    },
+    toggleOnHover: {
+      type: Boolean,
+      default: false,
+    },
+    hideOnLeaveTimeout: {
+      type: Number,
+      default: 250,
+    },
   },
   emits: {
     change: (e: CustomEvent) => e instanceof CustomEvent,
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 74254a8..c86db5a 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -24,6 +24,44 @@
     >
       <t-datepicker v-model="date" />
     </TInputGroup>
+    <TInputGroup
+      label="Custom Selector"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+      >
+        <template #trigger="{ focusHandler, blurHandler }">
+          <div class="flex items-center space-x-2 ">
+            <span
+              class="bg-gray-200 text-gray-800 text-xs font-mono rounded py-1 px-2"
+              v-text="date"
+            />
+
+            <button
+              type="button"
+              @focus="focusHandler"
+              @blur="blurHandler"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+            </button>
+          </div>
+        </template>
+      </t-datepicker>
+    </TInputGroup>
     <TInputGroup
       label="Range"
       class="mb-4"
@@ -60,6 +98,9 @@ export default defineComponent({
   data() {
     return {
       date: '1987-02-18',
+      customDate: [
+        
+      ],
     };
   },
   methods: {
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index b5ee28e..4110b81 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -31,5 +31,9 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   dateParser?: DateParser,
   dateFormatter?: DateFormatter,
   locale?: DateLocale,
-  initialView?: TDatepickerView
+  initialView?: TDatepickerView,
+  toggleOnFocus?: boolean,
+  toggleOnClick?: boolean,
+  toggleOnHover?: boolean,
+  hideOnLeaveTimeout?: number,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;

From 974713d5b66c36906bf74e9626a72dbe9e4066fd Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 11:06:37 -0600
Subject: [PATCH 32/85] Custom selector related adjustments

---
 src/components/TDatepicker.vue                | 20 ++++++++++-------
 .../TDatepicker/DatepickerTrigger.vue         |  6 ++---
 src/development/Datepicker.vue                | 22 ++++++++++++++-----
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 5b60294..29e5e74 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -37,8 +37,10 @@
         name="trigger"
         :focus-handler="focusHandler"
         :blur-handler="blurHandler"
+        :selected-date="selectedDate"
+        :formatted-date="formattedDate"
+        :user-formatted-date="userFormattedDate"
       >
-        {{ configuration.text }}
         <datepicker-trigger
           @focus="focusHandler"
           @blur="blurHandler"
@@ -290,13 +292,13 @@ export default defineComponent({
 
     const activeDate = ref<Date>(getInitialActiveDate(selectedDate.value));
     
-    const dateValue = computed<string | string[]>(() => {
+    const formattedDate = computed<string | string[]>(() => {
       return Array.isArray(selectedDate.value) 
         ? selectedDate.value.map((dateItem) => formatDate.value(dateItem, configuration.dateFormat))
         : formatDate.value(selectedDate.value, configuration.dateFormat);
     });
 
-    const userDate = computed<string>(() => {
+    const userFormattedDate = computed<string>(() => {
       return Array.isArray(selectedDate.value) 
         ? selectedDate.value
           .map((dateItem) => formatDate.value(dateItem, configuration.userFormat))
@@ -368,15 +370,15 @@ export default defineComponent({
 
       const event = new CustomEvent('input', {
         detail: {
-          value: dateValue.value,
-          formattedDate: userDate.value,
+          value: formattedDate.value,
+          formattedDate: userFormattedDate.value,
           date: selectedDate.value,
         },
       });
       
       emit('change', event);
       emit('input', event);
-      emit('update:modelValue', dateValue.value);      
+      emit('update:modelValue', formattedDate.value);      
     };
 
     // Note about `selectMonth` and `selectYear` methods:
@@ -486,7 +488,7 @@ export default defineComponent({
     
     provide('currentView', currentView);
     
-    provide('userDate', userDate);
+    provide('userFormattedDate', userFormattedDate);
 
     return {
       configuration,
@@ -494,7 +496,9 @@ export default defineComponent({
       blurOnChildHandler,
       enterHandler,
       keyboardNavigationHandler,
-      
+      formattedDate,
+      userFormattedDate,
+      selectedDate,
     };
   },
 
diff --git a/src/components/TDatepicker/DatepickerTrigger.vue b/src/components/TDatepicker/DatepickerTrigger.vue
index bf38a2d..b8ef201 100644
--- a/src/components/TDatepicker/DatepickerTrigger.vue
+++ b/src/components/TDatepicker/DatepickerTrigger.vue
@@ -2,7 +2,7 @@
   <input
     class="block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed"
     type="text"
-    :value="userDate"
+    :value="userFormattedDate"
     @change="dateUserInputHandler"
   >
 </template>
@@ -16,7 +16,7 @@ import { TDatepickerOptions } from '../..';
 export default defineComponent({
   name: 'DatepickerTrigger',
   setup: () => {
-    const userDate = inject<Ref<string>>('userDate')!;
+    const userFormattedDate = inject<Ref<string>>('userFormattedDate')!;
     const parseDate = inject<Ref<DateParser>>('parseDate')!;
     const configuration = inject<TDatepickerOptions>('configuration')!;
     const setSelectedDate = inject<(date: Date | Date[] | undefined) => void>('setSelectedDate')!;
@@ -34,7 +34,7 @@ export default defineComponent({
     };
 
     return {
-      userDate,
+      userFormattedDate,
       dateUserInputHandler,
     };
   },  
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index c86db5a..620bbff 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -31,12 +31,22 @@
       <t-datepicker
         v-model="date"
       >
-        <template #trigger="{ focusHandler, blurHandler }">
-          <div class="flex items-center space-x-2 ">
-            <span
-              class="bg-gray-200 text-gray-800 text-xs font-mono rounded py-1 px-2"
-              v-text="date"
-            />
+        <template #trigger="{ focusHandler, blurHandler, formattedDate, userFormattedDate }">
+          <div class="flex items-center space-x-2 border-2 p-3 shadow-inner ">
+            <div class="flex items-center space-x-2">
+              <span>Value</span>
+              <span
+                class="bg-gray-200 text-gray-800 text-xs font-mono rounded py-1 px-2"
+                v-text="formattedDate"
+              />
+            </div>
+            <div class="flex items-center space-x-2">
+              <span>Formatted</span>
+              <span
+                class="bg-gray-200 text-gray-800 text-xs font-mono rounded py-1 px-2"
+                v-text="userFormattedDate"
+              />
+            </div>
 
             <button
               type="button"

From e24cda9bbb25dc0420d12a7b4f4efcd0781bf3c2 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 11:09:11 -0600
Subject: [PATCH 33/85] Allow custom input type

---
 src/components/TDatepicker.vue                   | 9 ++++-----
 src/components/TDatepicker/DatepickerTrigger.vue | 5 +++--
 src/development/Datepicker.vue                   | 9 +++++++++
 src/types/components/t-rich-select.ts            | 1 +
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 29e5e74..8101748 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -1,8 +1,4 @@
 <template>
-  <!-- <div
-    :class="configuration.classesList?.wrapper"
-    v-bind="attributes"
-  > -->
   <!-- <t-select
       v-model="localValue"
       :name="configuration.name"
@@ -64,7 +60,6 @@
         />
       </template>
     </rich-select-clear-button> -->
-  <!-- </div> -->
 </template>
 
 <script lang="ts">
@@ -143,6 +138,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    inputType: {
+      type: String,
+      default: 'text',
+    },
     monthsPerView: {
       type: Number,
       default: 1,
diff --git a/src/components/TDatepicker/DatepickerTrigger.vue b/src/components/TDatepicker/DatepickerTrigger.vue
index b8ef201..f49ab5c 100644
--- a/src/components/TDatepicker/DatepickerTrigger.vue
+++ b/src/components/TDatepicker/DatepickerTrigger.vue
@@ -1,7 +1,7 @@
 <template>
   <input
-    class="block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed"
-    type="text"
+    class="block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed text-left"
+    :type="configuration.inputType"
     :value="userFormattedDate"
     @change="dateUserInputHandler"
   >
@@ -36,6 +36,7 @@ export default defineComponent({
     return {
       userFormattedDate,
       dateUserInputHandler,
+      configuration,
     };
   },  
 });
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 620bbff..f86309f 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -24,6 +24,15 @@
     >
       <t-datepicker v-model="date" />
     </TInputGroup>
+    <TInputGroup
+      label="Button"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        input-type="button"
+      />
+    </TInputGroup>
     <TInputGroup
       label="Custom Selector"
       class="mb-4"
diff --git a/src/types/components/t-rich-select.ts b/src/types/components/t-rich-select.ts
index 6cd39fa..a28a471 100644
--- a/src/types/components/t-rich-select.ts
+++ b/src/types/components/t-rich-select.ts
@@ -41,4 +41,5 @@ export type TRichSelectOptions = WithVariantPropsAndClassesList<{
   dropdownPopperOptions?: Options,
   teleport?: boolean,
   teleportTo?: string | HTMLElement,
+  inputType?: string,
 } & HTMLAttributes & Data, TRichSelectClassesValidKeys>;

From 41fac425f7ef7c88dd143e47a6db5603458a5478 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 12:55:22 -0600
Subject: [PATCH 34/85] toggle only if applies

---
 src/components/TDropdown.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/TDropdown.vue b/src/components/TDropdown.vue
index 160af9e..3dc6126 100644
--- a/src/components/TDropdown.vue
+++ b/src/components/TDropdown.vue
@@ -222,7 +222,8 @@ export default defineComponent({
       return popperOptions;
     },
     shouldShowWhenClicked(): boolean {
-      return this.isTouchOnlyDevice
+      return !this.shown
+        && this.isTouchOnlyDevice
         && (this.configuration.toggleOnFocus === true || this.configuration.toggleOnHover === true);
     },
   },
@@ -463,7 +464,7 @@ export default defineComponent({
         return;
       }
 
-      if (this.configuration.toggleOnFocus) {
+      if (this.configuration.toggleOnFocus && !this.shown) {
         this.throttledShow!();
       }
     },
@@ -480,7 +481,7 @@ export default defineComponent({
         return;
       }
 
-      if (this.configuration.toggleOnFocus && !isChild) {
+      if (this.shown && this.configuration.toggleOnFocus && !isChild) {
         this.throttledHide!();
       }
     },
@@ -495,7 +496,7 @@ export default defineComponent({
         return;
       }
 
-      if (this.configuration.toggleOnHover) {
+      if (this.configuration.toggleOnHover && !this.shown) {
         this.doShow();
       }
     },
@@ -506,7 +507,7 @@ export default defineComponent({
         return;
       }
 
-      if (this.configuration.toggleOnHover && !this.targetIsChild(e.relatedTarget)) {
+      if (this.shown && this.configuration.toggleOnHover && !this.targetIsChild(e.relatedTarget)) {
         this.hideAfterTimeout();
       }
     },
@@ -517,7 +518,7 @@ export default defineComponent({
         return;
       }
 
-      if (this.configuration.toggleOnFocus || this.configuration.toggleOnHover) {
+      if (this.shown && (this.configuration.toggleOnFocus || this.configuration.toggleOnHover)) {
         this.doHide();
       }
     },

From d8d0b085f846acd5347583700cc9e96ecaf19415 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 12:55:30 -0600
Subject: [PATCH 35/85] Update RichSelectSearchInput.vue

---
 src/components/TRichSelect/RichSelectSearchInput.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/TRichSelect/RichSelectSearchInput.vue b/src/components/TRichSelect/RichSelectSearchInput.vue
index c8974fd..1c49a2a 100644
--- a/src/components/TRichSelect/RichSelectSearchInput.vue
+++ b/src/components/TRichSelect/RichSelectSearchInput.vue
@@ -47,7 +47,6 @@ export default defineComponent({
 
     return {
       configuration,
-      shown,
       search,
       searchQuery,
       classesList,

From 748992c7972489984bd1dc14883e4dfcaa72f414 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 12:55:39 -0600
Subject: [PATCH 36/85] close on select wip

---
 src/components/TDatepicker.vue       | 89 +++++++++++++++++++++-------
 src/types/components/t-datepicker.ts |  1 +
 2 files changed, 68 insertions(+), 22 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 8101748..794fdd0 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -26,6 +26,7 @@
     @keydown.left="keyboardNavigationHandler"
     @keydown.right="keyboardNavigationHandler"
     @keydown.enter="enterHandler"
+    @before-show="beforeShowHandler"
   >
     <template #trigger="{ focusHandler, blurHandler }">
       <slot
@@ -210,6 +211,10 @@ export default defineComponent({
       type: Number,
       default: 250,
     },
+    closeOnSelect: {
+      type: Number,
+      default: 250,
+    },
   },
   emits: {
     change: (e: CustomEvent) => e instanceof CustomEvent,
@@ -234,19 +239,21 @@ export default defineComponent({
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
+    const dropdownComponent = ref<{
+      doHide: () => Promise<void>;
+    } | undefined>(undefined);
+
     const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
 
     const formatDate = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
-
-    const currentView = ref<TDatepickerView>(configuration.initialView!);
+    
+    const dateRangeSeparator = computed<string>(() => {
+      return (configuration.locale || dateEnglishLocale).rangeSeparator || dateEnglishLocale.rangeSeparator;
+    });
 
     // The active date is usually hidden but shown when navigating with the keyboard
     const showActiveDate = ref<boolean>(false);
 
-    const setCurrentView = (view: TDatepickerView) => {
-      currentView.value = view;
-    };
-
     const getInitialSelectedDate = (): Date | Date[] | undefined => {
       let selectedDate: Date | undefined | Date[] = configuration.multiple || configuration.range ? [] : undefined;
 
@@ -261,6 +268,8 @@ export default defineComponent({
       return selectedDate;
     };
 
+    const getInitialView = (): TDatepickerView => configuration.initialView!;
+
     const getInitialActiveDate = (selectedDate: Date | Date[] | undefined): Date => {
       let activeDate: Date = new Date();
 
@@ -287,9 +296,39 @@ export default defineComponent({
       return activeDate;
     };
 
+    
+
     const selectedDate = ref<Date | Date[] | undefined>(getInitialSelectedDate());
 
     const activeDate = ref<Date>(getInitialActiveDate(selectedDate.value));
+
+    const currentView = ref<TDatepickerView>(getInitialView());
+
+    const setCurrentView = (view: TDatepickerView) => {
+      currentView.value = view;
+    };
+
+    const setActiveDate = (date: Date) => {
+      activeDate.value = date;
+      
+      showActiveDate.value = false;
+
+      if (currentView.value === TDatepickerView.Year) {
+        setCurrentView(TDatepickerView.Month);
+      } else if (currentView.value === TDatepickerView.Month) {
+        setCurrentView(TDatepickerView.Day);
+      }
+    };
+
+    const setSelectedDate = (date: Date | Date[] | undefined) => {
+      selectedDate.value = date;
+    };
+
+    const initView = () => {
+      setSelectedDate(getInitialSelectedDate());
+      setCurrentView(getInitialView());
+      setActiveDate(getInitialActiveDate(selectedDate.value));
+    };
     
     const formattedDate = computed<string | string[]>(() => {
       return Array.isArray(selectedDate.value) 
@@ -302,21 +341,11 @@ export default defineComponent({
         ? selectedDate.value
           .map((dateItem) => formatDate.value(dateItem, configuration.userFormat))
           // @TODO: Date separator comes from the configuration
-          .join(', ')
+          .join(configuration.range ? dateRangeSeparator.value : ', ')
         : formatDate.value(selectedDate.value, configuration.userFormat);
     });
 
-    const setActiveDate = (date: Date) => {
-      activeDate.value = date;
-      
-      showActiveDate.value = false;
-
-      if (currentView.value === TDatepickerView.Year) {
-        setCurrentView(TDatepickerView.Month);
-      } else if (currentView.value === TDatepickerView.Month) {
-        setCurrentView(TDatepickerView.Day);
-      }
-    };
+   
 
     const getNewSelectedDate = (day: Date): Date | Date[] => {
       // If we are using multiple or range means that the day consists of an array
@@ -358,26 +387,37 @@ export default defineComponent({
       return day;
     };
 
-    const setSelectedDate = (date: Date | Date[] | undefined) => {
-      selectedDate.value = date;
+
+    const hide = async () => {
+      await dropdownComponent.value!.doHide();
     };
 
     const selectDay = (day: Date) => {
-      setSelectedDate(getNewSelectedDate(day));
+      const newSelectedDate = getNewSelectedDate(day);
 
       setActiveDate(day);
 
+      setSelectedDate(newSelectedDate);
+      
+      if (configuration.range && !(Array.isArray(newSelectedDate) && newSelectedDate.length === 2)) {
+        return;
+      }
+
       const event = new CustomEvent('input', {
         detail: {
           value: formattedDate.value,
           formattedDate: userFormattedDate.value,
-          date: selectedDate.value,
+          date: newSelectedDate,
         },
       });
       
       emit('change', event);
       emit('input', event);
       emit('update:modelValue', formattedDate.value);      
+
+      if (configuration.closeOnSelect) {
+        hide();
+      }
     };
 
     // Note about `selectMonth` and `selectYear` methods:
@@ -460,6 +500,9 @@ export default defineComponent({
       showActiveDate.value = true;
     };
 
+    const beforeShowHandler = () => {
+      initView();
+    };
 
     provide('activeDate', activeDate);
 
@@ -490,11 +533,13 @@ export default defineComponent({
     provide('userFormattedDate', userFormattedDate);
 
     return {
+      dropdownComponent,
       configuration,
       attributes,
       blurOnChildHandler,
       enterHandler,
       keyboardNavigationHandler,
+      beforeShowHandler,
       formattedDate,
       userFormattedDate,
       selectedDate,
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index 4110b81..a2a5e1f 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -36,4 +36,5 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   toggleOnClick?: boolean,
   toggleOnHover?: boolean,
   hideOnLeaveTimeout?: number,
+  closeOnSelect?: boolean,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;

From 6607e5657ad06460b7d99253acf91de591632f35 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 12:56:58 -0600
Subject: [PATCH 37/85] pass hide & show methods

---
 src/components/TDatepicker.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 794fdd0..306eca0 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -37,6 +37,8 @@
         :selected-date="selectedDate"
         :formatted-date="formattedDate"
         :user-formatted-date="userFormattedDate"
+        :hide="hide"
+        :show="show"
       >
         <datepicker-trigger
           @focus="focusHandler"
@@ -241,6 +243,7 @@ export default defineComponent({
 
     const dropdownComponent = ref<{
       doHide: () => Promise<void>;
+      doShow: () => Promise<void>;
     } | undefined>(undefined);
 
     const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
@@ -392,6 +395,10 @@ export default defineComponent({
       await dropdownComponent.value!.doHide();
     };
 
+    const show = async () => {
+      await dropdownComponent.value!.doShow();
+    };
+
     const selectDay = (day: Date) => {
       const newSelectedDate = getNewSelectedDate(day);
 
@@ -540,6 +547,8 @@ export default defineComponent({
       enterHandler,
       keyboardNavigationHandler,
       beforeShowHandler,
+      hide,
+      show,
       formattedDate,
       userFormattedDate,
       selectedDate,

From 3739d02ebbc4b702d1f96b25f515effd780fb95d Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 14:50:31 -0600
Subject: [PATCH 38/85] refactor keyboard & click handler

---
 src/components/TDatepicker.vue       | 90 ++++++++++++++++++----------
 src/components/TDropdown.vue         |  5 +-
 src/development/Datepicker.vue       | 20 ++++++-
 src/types/components/t-datepicker.ts |  1 +
 4 files changed, 81 insertions(+), 35 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 306eca0..e5295a5 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -11,21 +11,18 @@
 
   <t-dropdown
     ref="dropdownComponent"
+    v-model:show="shown"
     :classes="undefined"
     :fixed-classes="undefined"
     :popper-options="configuration.dropdownPopperOptions"
     :placement="configuration.dropdownPlacement"
     tag-name="div"
-    :toggle-on-click="configuration.toggleOnClick"
+    :toggle-on-click="false"
     :toggle-on-hover="configuration.toggleOnHover"
     :toggle-on-focus="configuration.toggleOnFocus"
     :hide-on-leave-timeout="configuration.hideOnLeaveTimeout"
+    v-bind="attributes"
     @blur-on-child="blurOnChildHandler"
-    @keydown.down="keyboardNavigationHandler"
-    @keydown.up="keyboardNavigationHandler"
-    @keydown.left="keyboardNavigationHandler"
-    @keydown.right="keyboardNavigationHandler"
-    @keydown.enter="enterHandler"
     @before-show="beforeShowHandler"
   >
     <template #trigger="{ focusHandler, blurHandler }">
@@ -34,15 +31,23 @@
         name="trigger"
         :focus-handler="focusHandler"
         :blur-handler="blurHandler"
+        :click-handler="clickHandler"
         :selected-date="selectedDate"
         :formatted-date="formattedDate"
         :user-formatted-date="userFormattedDate"
-        :hide="hide"
-        :show="show"
+        :hide="doHide"
+        :show="doShow"
       >
         <datepicker-trigger
           @focus="focusHandler"
           @blur="blurHandler"
+          @mousedown="clickHandler"
+          @keydown.enter="clickHandler"
+          @keydown.space="() => configuration.inputType === 'button' ? clickHandler() : undefined"
+          @keydown.down="keyboardNavigationHandler"
+          @keydown.up="keyboardNavigationHandler"
+          @keydown.left="keyboardNavigationHandler"
+          @keydown.right="keyboardNavigationHandler"
         />
       </slot>
     </template>
@@ -72,6 +77,7 @@ import {
   ref,
   provide,
   computed,
+  watch,
 } from 'vue';
 
 import {
@@ -217,12 +223,17 @@ export default defineComponent({
       type: Number,
       default: 250,
     },
+    show: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
     change: (e: CustomEvent) => e instanceof CustomEvent,
     input: (e: CustomEvent) => e instanceof CustomEvent,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     'update:modelValue': (value: string | string[]) => true,
+    'update:show': (value: boolean) => typeof value === 'boolean',
   },
   setup(props, { emit }) {
     // @TODOS:
@@ -241,10 +252,7 @@ export default defineComponent({
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
-    const dropdownComponent = ref<{
-      doHide: () => Promise<void>;
-      doShow: () => Promise<void>;
-    } | undefined>(undefined);
+    const shown = ref<boolean>(configuration.show!);
 
     const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
 
@@ -257,15 +265,15 @@ export default defineComponent({
     // The active date is usually hidden but shown when navigating with the keyboard
     const showActiveDate = ref<boolean>(false);
 
-    const getInitialSelectedDate = (): Date | Date[] | undefined => {
+    const getInitialSelectedDate = (fromDate: TDatepickerValue): Date | Date[] | undefined => {
       let selectedDate: Date | undefined | Date[] = configuration.multiple || configuration.range ? [] : undefined;
 
-      if (Array.isArray(props.modelValue)) {
-        selectedDate = (props.modelValue)
+      if (Array.isArray(fromDate)) {
+        selectedDate = (fromDate)
           .map((value) => parseDate.value(value, configuration.dateFormat))
           .filter((value) => value !== undefined) as Date[];
       } else {
-        selectedDate = parseDate.value(props.modelValue, configuration.dateFormat) || selectedDate;
+        selectedDate = parseDate.value(fromDate, configuration.dateFormat) || selectedDate;
       }
 
       return selectedDate;
@@ -299,9 +307,7 @@ export default defineComponent({
       return activeDate;
     };
 
-    
-
-    const selectedDate = ref<Date | Date[] | undefined>(getInitialSelectedDate());
+    const selectedDate = ref<Date | Date[] | undefined>(getInitialSelectedDate(props.modelValue));
 
     const activeDate = ref<Date>(getInitialActiveDate(selectedDate.value));
 
@@ -328,10 +334,14 @@ export default defineComponent({
     };
 
     const initView = () => {
-      setSelectedDate(getInitialSelectedDate());
       setCurrentView(getInitialView());
       setActiveDate(getInitialActiveDate(selectedDate.value));
     };
+
+    watch(() => props.modelValue, (value: TDatepickerValue) => {
+      setSelectedDate(getInitialSelectedDate(value));
+ 
+    });
     
     const formattedDate = computed<string | string[]>(() => {
       return Array.isArray(selectedDate.value) 
@@ -348,8 +358,6 @@ export default defineComponent({
         : formatDate.value(selectedDate.value, configuration.userFormat);
     });
 
-   
-
     const getNewSelectedDate = (day: Date): Date | Date[] => {
       // If we are using multiple or range means that the day consists of an array
       // of dates
@@ -391,14 +399,22 @@ export default defineComponent({
     };
 
 
-    const hide = async () => {
-      await dropdownComponent.value!.doHide();
+    const doHide = async () => {
+      shown.value = false;
     };
 
-    const show = async () => {
-      await dropdownComponent.value!.doShow();
+    const doShow = async () => {
+      shown.value = true;
     };
 
+    watch(shown, () => {
+      emit('update:show', shown.value);
+    });
+
+    watch(() => configuration.show, () => {
+      shown.value = configuration.show!;
+    });
+
     const selectDay = (day: Date) => {
       const newSelectedDate = getNewSelectedDate(day);
 
@@ -423,7 +439,7 @@ export default defineComponent({
       emit('update:modelValue', formattedDate.value);      
 
       if (configuration.closeOnSelect) {
-        hide();
+        doHide();
       }
     };
 
@@ -444,7 +460,13 @@ export default defineComponent({
       selectDay(activeDate.value);
     };
 
-    const enterHandler = () => selectActiveDate();
+    const clickHandler = () => {
+      if (shown.value) {
+        selectActiveDate();
+      } else {
+        doShow();
+      }
+    };
 
     // If the date field is blurred (date clicked for example) we should focus
     // the field again
@@ -457,6 +479,10 @@ export default defineComponent({
     };
 
     const keyboardNavigationHandler = (e: KeyboardEvent) => {
+      if (shown.value === false) {
+        doShow(); 
+      }
+
       const keyCode = e.key as NavitationKeyCodes;
 
       enum NavitationKeyCodes {
@@ -540,15 +566,15 @@ export default defineComponent({
     provide('userFormattedDate', userFormattedDate);
 
     return {
-      dropdownComponent,
       configuration,
       attributes,
       blurOnChildHandler,
-      enterHandler,
+      clickHandler,
       keyboardNavigationHandler,
       beforeShowHandler,
-      hide,
-      show,
+      doHide,
+      doShow,
+      shown,
       formattedDate,
       userFormattedDate,
       selectedDate,
diff --git a/src/components/TDropdown.vue b/src/components/TDropdown.vue
index 3dc6126..6d2c4f9 100644
--- a/src/components/TDropdown.vue
+++ b/src/components/TDropdown.vue
@@ -22,6 +22,7 @@
       name="trigger"
       :focus-handler="focusHandler"
       :blur-handler="blurHandler"
+      :click-handler="clickHandler"
     >
       {{ configuration.text }}
     </slot>
@@ -176,7 +177,7 @@ export default defineComponent({
     focus: (e: FocusEvent) => e instanceof FocusEvent,
     blur: (e: FocusEvent) => e instanceof FocusEvent,
     'blur-on-child': (e: FocusEvent) => e instanceof FocusEvent,
-    click: (e: MouseEvent) => e instanceof MouseEvent,
+    click: (e: MouseEvent | KeyboardEvent) => e instanceof Event,
     mouseover: (e: MouseEvent) => e instanceof MouseEvent,
     mouseleave: (e: MouseEvent) => e instanceof MouseEvent,
     touchstart: (e: TouchEvent) => e instanceof TouchEvent,
@@ -448,7 +449,7 @@ export default defineComponent({
 
       this.onHidden();
     },
-    clickHandler(e: MouseEvent): void {
+    clickHandler(e: MouseEvent | KeyboardEvent): void {
       this.$emit('click', e);
 
       if (this.configuration.toggleOnClick) {
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index f86309f..cbd8bd6 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -41,7 +41,9 @@
         v-model="date"
       >
         <template #trigger="{ focusHandler, blurHandler, formattedDate, userFormattedDate }">
-          <div class="flex items-center space-x-2 border-2 p-3 shadow-inner ">
+          <div
+            class="flex items-center space-x-2 border-2 p-3 shadow-inner "
+          >
             <div class="flex items-center space-x-2">
               <span>Value</span>
               <span
@@ -98,6 +100,19 @@
         multiple
       />
     </TInputGroup>
+
+    <TInputGroup
+      label="Syncs show property"
+      class="mb-4"
+    >
+      <div>
+        <t-checkbox v-model="show" />
+      </div>
+
+      <t-datepicker
+        v-model:show="show"
+      />
+    </TInputGroup>
   </t-card>
 </template>
 
@@ -106,6 +121,7 @@ import { defineComponent } from 'vue';
 import TCard from '../components/TCard.vue';
 import TInputGroup from '../components/TInputGroup.vue';
 import TDatepicker from '../components/TDatepicker.vue';
+import TCheckbox from '../components/TCheckbox.vue';
 
 export default defineComponent({
   name: 'DatepickerComponent',
@@ -113,9 +129,11 @@ export default defineComponent({
     TCard,
     TInputGroup,
     TDatepicker,
+    TCheckbox,
   },
   data() {
     return {
+      show: false,
       date: '1987-02-18',
       customDate: [
         
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index a2a5e1f..35de525 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -37,4 +37,5 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   toggleOnHover?: boolean,
   hideOnLeaveTimeout?: number,
   closeOnSelect?: boolean,
+  show?: boolean,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;

From b4f262f6694980b21e11de1b22aa4bf1480230cb Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 19:43:44 -0600
Subject: [PATCH 39/85] Refactor dropdown to properly handle focus

---
 src/components/TDropdown.vue    | 22 +++++-----------------
 src/use/useIsTouchOnlyDevice.ts | 12 ++++++++++++
 2 files changed, 17 insertions(+), 17 deletions(-)
 create mode 100644 src/use/useIsTouchOnlyDevice.ts

diff --git a/src/components/TDropdown.vue b/src/components/TDropdown.vue
index 6d2c4f9..b4b517d 100644
--- a/src/components/TDropdown.vue
+++ b/src/components/TDropdown.vue
@@ -73,16 +73,16 @@ import {
   debounce,
   elementIsTargetOrTargetChild,
   getFocusableElements,
-  isTouchOnlyDevice as getIsTouch,
   throttle,
   TDropdownPopperDefaultOptions as defaultPopperOptions,
   DebouncedFn,
 } from '@variantjs/core';
 import {
-  defineComponent, PropType, onMounted, ref,
+  defineComponent, PropType, 
 } from 'vue';
 import { TDropdownOptions } from '../types';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
+import useIsTouchOnlyDevice from '../use/useIsTouchOnlyDevice';
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
 import Transitionable from './misc/Transitionable.vue';
 
@@ -189,11 +189,7 @@ export default defineComponent({
   setup() {
     const { configuration, attributes } = useConfigurationWithClassesList<TDropdownOptions>(TDropdownConfig, TDropdownClassesKeys);
 
-    const isTouchOnlyDevice = ref<boolean>(false);
-
-    onMounted(() => {
-      isTouchOnlyDevice.value = getIsTouch();
-    });
+    const isTouchOnlyDevice = useIsTouchOnlyDevice();
 
     return { configuration, attributes, isTouchOnlyDevice };
   },
@@ -238,9 +234,9 @@ export default defineComponent({
     },
     'configuration.show': function configurationShowWatch(show: boolean): void {
       if (show) {
-        this.doShow();
+        this.throttledShow!();
       } else {
-        this.doHide();
+        this.throttledHide!();
       }
     },
   },
@@ -461,10 +457,6 @@ export default defineComponent({
     focusHandler(e: FocusEvent): void {
       this.$emit('focus', e);
 
-      if (this.isTouchOnlyDevice) {
-        return;
-      }
-
       if (this.configuration.toggleOnFocus && !this.shown) {
         this.throttledShow!();
       }
@@ -478,10 +470,6 @@ export default defineComponent({
         this.$emit('blur-on-child', e);
       }
 
-      if (this.isTouchOnlyDevice) {
-        return;
-      }
-
       if (this.shown && this.configuration.toggleOnFocus && !isChild) {
         this.throttledHide!();
       }
diff --git a/src/use/useIsTouchOnlyDevice.ts b/src/use/useIsTouchOnlyDevice.ts
new file mode 100644
index 0000000..73585d4
--- /dev/null
+++ b/src/use/useIsTouchOnlyDevice.ts
@@ -0,0 +1,12 @@
+import { isTouchOnlyDevice as getIsTouch  } from '@variantjs/core';
+import { Ref, ref, onMounted } from 'vue';
+
+export default function useIsTouchOnlyDevice(): Ref<boolean> {
+  const isTouchOnlyDevice = ref<boolean>(false);
+
+  onMounted(() => {
+    isTouchOnlyDevice.value = getIsTouch();
+  });
+
+  return isTouchOnlyDevice;
+}

From cf2604a87865fd58e1ad0acdc507c19dce6aeefc Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 19:44:10 -0600
Subject: [PATCH 40/85] datepicker  focus behaviour

---
 src/components/TDatepicker.vue                | 58 ++++++++++++++-----
 .../TDatepicker/DatepickerTrigger.vue         | 43 --------------
 src/types/components/t-datepicker.ts          |  1 +
 3 files changed, 44 insertions(+), 58 deletions(-)
 delete mode 100644 src/components/TDatepicker/DatepickerTrigger.vue

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index e5295a5..545696c 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -38,17 +38,21 @@
         :hide="doHide"
         :show="doShow"
       >
-        <datepicker-trigger
+        <input
+          class="block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed text-left"
+          :type="configuration.inputType"
+          :value="userFormattedDate"
+          @input="userInputHandler"
           @focus="focusHandler"
           @blur="blurHandler"
-          @mousedown="clickHandler"
-          @keydown.enter="clickHandler"
-          @keydown.space="() => configuration.inputType === 'button' ? clickHandler() : undefined"
+          @mousedown.stop="clickHandler"
+          @keydown.enter.stop="clickHandler"
+          @keydown.space.stop="(e) => configuration.inputType === 'button' ? clickHandler(e) : undefined"
           @keydown.down="keyboardNavigationHandler"
           @keydown.up="keyboardNavigationHandler"
           @keydown.left="keyboardNavigationHandler"
           @keydown.right="keyboardNavigationHandler"
-        />
+        >
       </slot>
     </template>
       
@@ -105,7 +109,6 @@ import {
   TDatepickerOptions, TDatepickerValue,
 } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
-import DatepickerTrigger from './TDatepicker/DatepickerTrigger.vue';
 import TDropdown, { validDropdownPlacements } from './TDropdown.vue';
 import { TDatepickerSingleValue, TDatepickerView } from '../types/components/t-datepicker';
 
@@ -114,7 +117,6 @@ export default defineComponent({
   name: 'TDatepicker',
   components: {
     DatepickerDropdown,
-    DatepickerTrigger,
     TDropdown,
   },
   props: {
@@ -320,8 +322,6 @@ export default defineComponent({
     const setActiveDate = (date: Date) => {
       activeDate.value = date;
       
-      showActiveDate.value = false;
-
       if (currentView.value === TDatepickerView.Year) {
         setCurrentView(TDatepickerView.Month);
       } else if (currentView.value === TDatepickerView.Month) {
@@ -336,11 +336,11 @@ export default defineComponent({
     const initView = () => {
       setCurrentView(getInitialView());
       setActiveDate(getInitialActiveDate(selectedDate.value));
+      showActiveDate.value = false;
     };
 
     watch(() => props.modelValue, (value: TDatepickerValue) => {
       setSelectedDate(getInitialSelectedDate(value));
- 
     });
     
     const formattedDate = computed<string | string[]>(() => {
@@ -418,6 +418,8 @@ export default defineComponent({
     const selectDay = (day: Date) => {
       const newSelectedDate = getNewSelectedDate(day);
 
+      showActiveDate.value = false;
+     
       setActiveDate(day);
 
       setSelectedDate(newSelectedDate);
@@ -438,7 +440,7 @@ export default defineComponent({
       emit('input', event);
       emit('update:modelValue', formattedDate.value);      
 
-      if (configuration.closeOnSelect) {
+      if (configuration.closeOnSelect && shown.value === true) {
         doHide();
       }
     };
@@ -460,11 +462,23 @@ export default defineComponent({
       selectDay(activeDate.value);
     };
 
-    const clickHandler = () => {
-      if (shown.value) {
+    const clickHandler = (e: KeyboardEvent | MouseEvent) => {
+      const input = e.target as (HTMLInputElement | HTMLButtonElement | undefined);
+
+      if (shown.value === true) {
         selectActiveDate();
-      } else {
-        doShow();
+      } else if (configuration.toggleOnClick) {
+        const parsedDate = input && input.value ? parseDate.value(input.value, configuration.userFormat) : undefined;
+
+        if (parsedDate !== undefined) {
+          setActiveDate(parsedDate);
+
+          selectActiveDate();
+        }
+
+        if (configuration.toggleOnClick) {
+          doShow();
+        }
       }
     };
 
@@ -537,6 +551,19 @@ export default defineComponent({
       initView();
     };
 
+    const userInputHandler = (e: Event) => {
+
+
+      const input = e.target as HTMLInputElement;
+      
+      const parsedDate = parseDate.value(input.value, configuration.userFormat);
+      
+      if (parsedDate !== undefined) {
+        showActiveDate.value = true;
+        setActiveDate(parsedDate);
+      }
+    };
+
     provide('activeDate', activeDate);
 
     provide('showActiveDate', showActiveDate);
@@ -572,6 +599,7 @@ export default defineComponent({
       clickHandler,
       keyboardNavigationHandler,
       beforeShowHandler,
+      userInputHandler,
       doHide,
       doShow,
       shown,
diff --git a/src/components/TDatepicker/DatepickerTrigger.vue b/src/components/TDatepicker/DatepickerTrigger.vue
deleted file mode 100644
index f49ab5c..0000000
--- a/src/components/TDatepicker/DatepickerTrigger.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <input
-    class="block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed text-left"
-    :type="configuration.inputType"
-    :value="userFormattedDate"
-    @change="dateUserInputHandler"
-  >
-</template>
-
-<script lang="ts">
-import { DateParser } from '@variantjs/core';
-import {
-  defineComponent, inject, Ref, 
-} from 'vue';
-import { TDatepickerOptions } from '../..';
-export default defineComponent({
-  name: 'DatepickerTrigger',
-  setup: () => {
-    const userFormattedDate = inject<Ref<string>>('userFormattedDate')!;
-    const parseDate = inject<Ref<DateParser>>('parseDate')!;
-    const configuration = inject<TDatepickerOptions>('configuration')!;
-    const setSelectedDate = inject<(date: Date | Date[] | undefined) => void>('setSelectedDate')!;
-    const setActiveDate = inject<(date: Date) => void>('setActiveDate')!;
-    
-    const dateUserInputHandler = (e: Event) => {
-      const input = e.target as HTMLInputElement;
-      
-      const parsedDate = parseDate.value(input.value, configuration.userFormat);
-      setSelectedDate(parsedDate);
-
-      if (parsedDate !== undefined) {
-        setActiveDate(parsedDate);
-      }
-    };
-
-    return {
-      userFormattedDate,
-      dateUserInputHandler,
-      configuration,
-    };
-  },  
-});
-</script>
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index 35de525..e695266 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -38,4 +38,5 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   hideOnLeaveTimeout?: number,
   closeOnSelect?: boolean,
   show?: boolean,
+  inputType?: string,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;

From 26b485925c1f3513f318ec6d07eb465da4150132 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 10 Feb 2022 19:48:23 -0600
Subject: [PATCH 41/85] Test different toggle options

---
 src/development/Datepicker.vue | 79 ++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index cbd8bd6..8653569 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -113,6 +113,85 @@
         v-model:show="show"
       />
     </TInputGroup>
+
+    <TInputGroup
+      label="Toggle on focus"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        toggle-on-focus
+        :toggle-on-click="false"
+        :toggle-on-hover="false"
+      />
+    </TInputGroup>
+
+    <TInputGroup
+      label="Toggle on hover"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        toggle-on-hover
+        :toggle-on-click="false"
+        :toggle-on-focus="false"
+      />
+    </TInputGroup>
+    <TInputGroup
+      label="Toggle on click"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        toggle-on-click
+        :toggle-on-focus="false"
+        :toggle-on-hover="false"
+      />
+    </TInputGroup>
+    <TInputGroup
+      label="Toggle on click + focus (default)"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        toggle-on-click
+        toggle-on-focus
+        :toggle-on-hover="false"
+      />
+    </TInputGroup>
+    <TInputGroup
+      label="Toggle on click + focus + hover"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        toggle-on-click
+        toggle-on-focus
+        toggle-on-hover
+      />
+    </TInputGroup>
+    <TInputGroup
+      label="Toggle on focus + hover"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        :toggle-on-click="false"
+        toggle-on-focus
+        toggle-on-hover
+      />
+    </TInputGroup>
+    <TInputGroup
+      label="Toggle on click + hover"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        toggle-on-click
+        :toggle-on-focus="false"
+        toggle-on-hover
+      />
+    </TInputGroup>
   </t-card>
 </template>
 

From 96037251251bb2a8b6fc1854a49f06dbc75d9114 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 11 Feb 2022 15:17:14 -0600
Subject: [PATCH 42/85] Fix & limit navigation ranges

---
 package.json                                  |  2 +-
 src/components/TDatepicker.vue                | 40 ++++++++++++-------
 .../TDatepicker/DatepickerViewControls.vue    | 40 ++++++++++++++++---
 .../DatepickerViewMultipleYears.vue           |  2 +-
 .../TDatepicker/DatepickerViewYear.vue        |  6 +--
 yarn.lock                                     |  8 ++--
 6 files changed, 70 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index e9c7cb2..191da9b 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,6 @@
     }
   },
   "dependencies": {
-    "@variantjs/core": "^0.0.82"
+    "@variantjs/core": "^0.0.87"
   }
 }
diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 545696c..13ce6e8 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -101,6 +101,7 @@ import {
   addYears,
   addMonths,
   addDays,
+  dateIsValid,
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
@@ -320,20 +321,26 @@ export default defineComponent({
     };
 
     const setActiveDate = (date: Date) => {
-      activeDate.value = date;
-      
-      if (currentView.value === TDatepickerView.Year) {
-        setCurrentView(TDatepickerView.Month);
-      } else if (currentView.value === TDatepickerView.Month) {
-        setCurrentView(TDatepickerView.Day);
+      if (!dateIsValid(date)) {
+        return;
       }
+
+      activeDate.value = date;
     };
 
     const setSelectedDate = (date: Date | Date[] | undefined) => {
+      if (Array.isArray(date)) {
+        if (date.some((value) => !dateIsValid(value))) {
+          return;
+        }
+      } else if (!dateIsValid(date)) {
+        return;
+      }
+
       selectedDate.value = date;
     };
 
-    const initView = () => {
+    const initViewData = () => {
       setCurrentView(getInitialView());
       setActiveDate(getInitialActiveDate(selectedDate.value));
       showActiveDate.value = false;
@@ -452,10 +459,14 @@ export default defineComponent({
     // year which means we should also handle the input event
     const selectMonth = (month: Date) => {
       setActiveDate(month);
+
+      setCurrentView(TDatepickerView.Day);
     };
 
     const selectYear = (year: Date) => {
       setActiveDate(year);
+
+      setCurrentView(TDatepickerView.Month);
     };
 
     const selectActiveDate = () => {
@@ -537,23 +548,23 @@ export default defineComponent({
 
       // Depending of the view (year view, month view or day views the amount of days is different)
       if (currentView.value === TDatepickerView.Year) {
-        activeDate.value = addYears(activeDate.value, daysPerView);
+        setActiveDate(addYears(activeDate.value, daysPerView));
       } else if (currentView.value === TDatepickerView.Month) {
-        activeDate.value = addMonths(activeDate.value, daysPerView);
+        setActiveDate(addMonths(activeDate.value, daysPerView));
       } else if (currentView.value === TDatepickerView.Day) {
-        activeDate.value = addDays(activeDate.value, daysPerView);
+        setActiveDate(addDays(activeDate.value, daysPerView));
       }
 
       showActiveDate.value = true;
     };
 
+   
+
     const beforeShowHandler = () => {
-      initView();
+      initViewData();
     };
 
     const userInputHandler = (e: Event) => {
-
-
       const input = e.target as HTMLInputElement;
       
       const parsedDate = parseDate.value(input.value, configuration.userFormat);
@@ -573,7 +584,8 @@ export default defineComponent({
     provide('setSelectedDate', setSelectedDate);
     
     provide('setActiveDate', setActiveDate);
-
+    
+    
     provide('configuration', configuration);
 
     provide('parseDate', parseDate);
diff --git a/src/components/TDatepicker/DatepickerViewControls.vue b/src/components/TDatepicker/DatepickerViewControls.vue
index 32fe082..a7c03e8 100644
--- a/src/components/TDatepicker/DatepickerViewControls.vue
+++ b/src/components/TDatepicker/DatepickerViewControls.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="flex px-3 pt-2">
     <button
+      :aria-label="toggleViewAriaLabel"
       type="button"
-      class="flex inline-flex items-center px-2 py-1 -ml-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100"
+      class="inline-flex items-center px-2 py-1 -ml-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100"
       tabindex="-1"
       @click="toggleView"
     >
@@ -42,10 +43,11 @@
     </button>
     
     <button
-      aria-label="Prev Year"
+      :aria-label="prevAriaLabel"
       type="button"
       class="inline-flex p-1 ml-auto transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
       tabindex="-1"
+      @click="prevGroupHandler"
     >
       <svg
         fill="none"
@@ -59,11 +61,14 @@
         d="M15 19l-7-7 7-7"
       /></svg>
     </button>
+
+
     <button
-      aria-label="Next Year"
+      :aria-label="nextAriaLabel"
       type="button"
       class="inline-flex p-1 -mr-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
       tabindex="-1"
+      @click="nextGroupHandler"
     >
       <svg
         fill="none"
@@ -81,7 +86,7 @@
 </template>
 
 <script lang="ts">
-import { DateFormatter } from '@variantjs/core';
+import { addMonths, addYears, DateFormatter } from '@variantjs/core';
 import { ComputedRef, defineComponent, inject, Ref, computed } from 'vue';
 import { TDatepickerView } from '../../types/components/t-datepicker';
 
@@ -92,6 +97,7 @@ export default defineComponent({
     const activeDate = inject<Ref<Date>>('activeDate')!;
     const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
     const setCurrentView = inject<(view: TDatepickerView) => void>('setCurrentView')!;
+    const setActiveDate = inject<(date: Date) => void>('setActiveDate')!;
     const currentView = inject<Ref<TDatepickerView>>('currentView')!;
 
     const monthName = computed<string>(() => formatDate.value(activeDate.value, 'F')) ;
@@ -107,6 +113,30 @@ export default defineComponent({
       return [from, to];
     });
 
+    const prevAriaLabel = computed<string>(() => 'Prev Year') ;
+    const nextAriaLabel = computed<string>(() => 'Next Year') ;
+    const toggleViewAriaLabel = computed<string>(() => 'Toggle View') ;
+
+    const nextGroupHandler = () => {
+      if (currentView.value === TDatepickerView.Year) {
+        setActiveDate(addYears(activeDate.value, 12));
+      } else if (currentView.value === TDatepickerView.Month) {
+        setActiveDate(addYears(activeDate.value, 1));
+      } else  {
+        setActiveDate(addMonths(activeDate.value, 1));
+      }
+    };
+
+    const prevGroupHandler = () => {
+      if (currentView.value === TDatepickerView.Year) {
+        setActiveDate(addYears(activeDate.value, -12));
+      } else if (currentView.value === TDatepickerView.Month) {
+        setActiveDate(addYears(activeDate.value, -1));
+      } else {
+        setActiveDate(addMonths(activeDate.value, -1));
+      }
+    };
+
     const toggleView = () => {
       if (isMonthView.value) {
         setCurrentView(TDatepickerView.Month);
@@ -117,7 +147,7 @@ export default defineComponent({
       }
     };
 
-    return { monthName, year, toggleView, isMonthView, isYearView, yearsRange };
+    return { monthName, year, toggleView, isMonthView, isYearView, yearsRange, nextAriaLabel, prevAriaLabel, toggleViewAriaLabel, nextGroupHandler, prevGroupHandler };
   },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewMultipleYears.vue b/src/components/TDatepicker/DatepickerViewMultipleYears.vue
index 340498c..9fde7b3 100644
--- a/src/components/TDatepicker/DatepickerViewMultipleYears.vue
+++ b/src/components/TDatepicker/DatepickerViewMultipleYears.vue
@@ -28,7 +28,7 @@ export default defineComponent({
     const years = computed<Date[]>(() => {
       const currentYear = activeDate.value.getFullYear();
       const from = currentYear - (currentYear % 12);
-      const to = from + 11;
+      const to = Math.min(9999, from + 11);
 
       return range(from, to).map((rangeYear) => {
         const year = clone(activeDate.value);
diff --git a/src/components/TDatepicker/DatepickerViewYear.vue b/src/components/TDatepicker/DatepickerViewYear.vue
index 9ed9196..d9fc7c6 100644
--- a/src/components/TDatepicker/DatepickerViewYear.vue
+++ b/src/components/TDatepicker/DatepickerViewYear.vue
@@ -13,7 +13,7 @@
 <script lang="ts">
 import { range, addMonths } from '@variantjs/core';
 import {
-  defineComponent, inject, Ref,
+  defineComponent, inject, Ref, computed,
 } from 'vue';
 import DatepickerViewYearMonth from './DatepickerViewYearMonth.vue';
 
@@ -29,10 +29,10 @@ export default defineComponent({
     // it have different days, for example: If the active date is `2019-01-31` 
     // (last day of january) the next month day will be `2019-02-28` (last day
     // of february).
-    const months: Date[] = range(
+    const months = computed<Date[]>(() => range(
       activeDate.value.getMonth() * -1,
       11 - activeDate.value.getMonth(),
-    ).map((monthDiff) => addMonths(activeDate.value, monthDiff));
+    ).map((monthDiff) => addMonths(activeDate.value, monthDiff)));
 
     return { months };
   },
diff --git a/yarn.lock b/yarn.lock
index 7ed4b4b..0f50e7e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1370,10 +1370,10 @@
     "@typescript-eslint/types" "5.10.2"
     eslint-visitor-keys "^3.0.0"
 
-"@variantjs/core@^0.0.82":
-  version "0.0.82"
-  resolved "https://registry.npmjs.org/@variantjs/core/-/core-0.0.82.tgz#65f9c04ff259f770ae9940c0d1bda8422818673a"
-  integrity sha512-rsIqkq4CRfRMzOyWzzsFcmSe7RjLAmxQzUux+fWEykfQe4NvkInGbRRNExYTtCar8k2VyhoxEfewpFyjOV3OAA==
+"@variantjs/core@^0.0.87":
+  version "0.0.87"
+  resolved "https://registry.npmjs.org/@variantjs/core/-/core-0.0.87.tgz#15576fde776baab7b417434afa7d45b8e97ae756"
+  integrity sha512-sUYPr4tkpSWzISdQfkXeHeAXUPDbNjKVBv+FZfldXymQvGwVhod/7BQYhyzBeywoal3cItdROMbDSQo90xSnjw==
 
 "@vitejs/plugin-vue@^2.0.1":
   version "2.1.0"

From e9bf6776872c624f5528a498980bdbb7c4ee9910 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 11 Feb 2022 15:20:33 -0600
Subject: [PATCH 43/85] Update @TODOs

---
 src/components/TDatepicker.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 13ce6e8..de60cb0 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -243,15 +243,13 @@ export default defineComponent({
     // - Reinitialize the range after the dropdown is closed
     // - Range and multiple: Consider selected dates outside of the view
     // - Disabled dates shouldn't be selectable and needs his own styling (`DatepickerViewMonthDay`)
+    // - Disable "visible" dates in the invalid range < year 0 > year 9999
     // - Add teleport options
-    // - Add toggle-on options from the configuration as the dropdown
     // - In general check which dropdown options/events are usable
     // - Add selectOnClose, closeOnSelected and see if something from the rich select can be used
     // - Show active date should be reset in some cases TBD
-    // - Toggle datepicker on enter accoridng to props (since its overriding the dropdown option)
     // - Check aria labels on buttons 
     // - Replace svg icons with icon component
-    // - When changing the active date we should reset the active view after closing the dropdown
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 

From acddfc760c652a057a343200db8606183389317c Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 12 Feb 2022 12:15:21 -0600
Subject: [PATCH 44/85] Add form input used in regular forms

---
 src/components/TDatepicker.vue                | 43 +++++++++++--------
 .../TDatepicker/DatepickerFormInput.vue       | 33 ++++++++++++++
 src/types/components/t-datepicker.ts          |  5 ++-
 3 files changed, 63 insertions(+), 18 deletions(-)
 create mode 100644 src/components/TDatepicker/DatepickerFormInput.vue

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index de60cb0..88d58c0 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -1,14 +1,4 @@
 <template>
-  <!-- <t-select
-      v-model="localValue"
-      :name="configuration.name"
-      style="display: none"
-      :fixed-classes="undefined"
-      :classes="undefined"
-      :multiple="configuration.multiple"
-      :options="flattenedOptions"
-    /> -->
-
   <t-dropdown
     ref="dropdownComponent"
     v-model:show="shown"
@@ -40,6 +30,7 @@
       >
         <input
           class="block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed text-left"
+          v-bind="configuration.inputAttributes"
           :type="configuration.inputType"
           :value="userFormattedDate"
           @input="userInputHandler"
@@ -54,9 +45,15 @@
           @keydown.right="keyboardNavigationHandler"
         >
       </slot>
+
+      <datepicker-form-input
+        v-if="showFormInput"
+        :values="formattedDate"
+        :input-attributes="formInputAttributes"
+      />
+        
+      <datepicker-dropdown />
     </template>
-      
-    <datepicker-dropdown />
   </t-dropdown>
 
   <!-- <rich-select-clear-button
@@ -82,6 +79,7 @@ import {
   provide,
   computed,
   watch,
+  InputHTMLAttributes,
 } from 'vue';
 
 import {
@@ -102,14 +100,14 @@ import {
   addMonths,
   addDays,
   dateIsValid,
+  Data,
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
-import {
-  TDatepickerOptions, TDatepickerValue,
-} from '../types';
+import { TDatepickerOptions, TDatepickerValue } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
+import DatepickerFormInput from './TDatepicker/DatepickerFormInput.vue';
 import TDropdown, { validDropdownPlacements } from './TDropdown.vue';
 import { TDatepickerSingleValue, TDatepickerView } from '../types/components/t-datepicker';
 
@@ -119,6 +117,7 @@ export default defineComponent({
   components: {
     DatepickerDropdown,
     TDropdown,
+    DatepickerFormInput,
   },
   props: {
     ...getVariantPropsWithClassesList<TDatepickerOptions, TDatepickerClassesValidKeys>(),
@@ -154,6 +153,18 @@ export default defineComponent({
       type: String,
       default: 'text',
     },
+    inputAttributes: {
+      type: Object as PropType<InputHTMLAttributes & Data>,
+      default: () => {},
+    },
+    formInputAttributes: {
+      type: Object as PropType<InputHTMLAttributes & Data>,
+      default: () => {},
+    },
+    showFormInput: {
+      type: Boolean,
+      default: true,
+    },  
     monthsPerView: {
       type: Number,
       default: 1,
@@ -556,8 +567,6 @@ export default defineComponent({
       showActiveDate.value = true;
     };
 
-   
-
     const beforeShowHandler = () => {
       initViewData();
     };
diff --git a/src/components/TDatepicker/DatepickerFormInput.vue b/src/components/TDatepicker/DatepickerFormInput.vue
new file mode 100644
index 0000000..73930e0
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerFormInput.vue
@@ -0,0 +1,33 @@
+<template>
+  <input
+    v-for="(item, index) in valueAsArray"
+    :key="`${item}-${index}`"
+    v-bind="inputAttributes"
+    type="hidden"
+    :value="item"
+  >
+</template>
+
+<script lang="ts">
+import { Data } from '@variantjs/core';
+import { defineComponent, PropType, InputHTMLAttributes } from 'vue';
+
+export default defineComponent({
+  name: 'DatepickerFormInput',
+  props: {
+    values: {
+      type: [String, Array] as PropType<string | string[]>,
+      required: true,
+    },
+    inputAttributes: {
+      type: Object as PropType<InputHTMLAttributes & Data>,
+      default: () => {},
+    },
+  },
+  computed: {
+    valueAsArray(): string[] {
+      return Array.isArray(this.values) ? this.values : [this.values];
+    },
+  },
+});
+</script>
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index e695266..fb6e5e4 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -1,7 +1,7 @@
 import {
   Data, DateConditions, DateFormatter, DateLocale, DateParser, DateValue, TDatepickerClassesValidKeys, WithVariantPropsAndClassesList,
 } from '@variantjs/core';
-import { HTMLAttributes } from 'vue';
+import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { Placement, Options } from '@popperjs/core';
 
 export type TDatepickerSingleValue = DateValue | undefined | null;
@@ -39,4 +39,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   closeOnSelect?: boolean,
   show?: boolean,
   inputType?: string,
+  inputAttributes?: InputHTMLAttributes & Data,
+  formInputAttributes?: InputHTMLAttributes & Data,
+  showFormInput?: boolean,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;

From 3be9c41ce4b3c0e553fb9ff0652e483d9176418a Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 12 Feb 2022 12:23:35 -0600
Subject: [PATCH 45/85] Rename hidden input component for reusability

---
 src/components/TDatepicker.vue                | 26 +++++++++++++------
 .../ComponentFormInput.vue}                   | 12 ++++++++-
 src/types/components/t-datepicker.ts          |  6 +++--
 3 files changed, 33 insertions(+), 11 deletions(-)
 rename src/components/{TDatepicker/DatepickerFormInput.vue => misc/ComponentFormInput.vue} (68%)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 88d58c0..0b482f0 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -30,15 +30,16 @@
       >
         <input
           class="block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100 ease-in-out bg-white border border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed text-left"
-          v-bind="configuration.inputAttributes"
-          :type="configuration.inputType"
+          :type="configuration.userInputType"
+          :name="configuration.userInputName"
           :value="userFormattedDate"
+          v-bind="configuration.userInputAttributes"
           @input="userInputHandler"
           @focus="focusHandler"
           @blur="blurHandler"
           @mousedown.stop="clickHandler"
           @keydown.enter.stop="clickHandler"
-          @keydown.space.stop="(e) => configuration.inputType === 'button' ? clickHandler(e) : undefined"
+          @keydown.space.stop="(e) => configuration.userInputType === 'button' ? clickHandler(e) : undefined"
           @keydown.down="keyboardNavigationHandler"
           @keydown.up="keyboardNavigationHandler"
           @keydown.left="keyboardNavigationHandler"
@@ -46,10 +47,11 @@
         >
       </slot>
 
-      <datepicker-form-input
+      <component-form-input
         v-if="showFormInput"
         :values="formattedDate"
         :input-attributes="formInputAttributes"
+        :input-name="configuration.name"
       />
         
       <datepicker-dropdown />
@@ -107,7 +109,7 @@ import useConfigurationWithClassesList from '../use/useConfigurationWithClassesL
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
 import { TDatepickerOptions, TDatepickerValue } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
-import DatepickerFormInput from './TDatepicker/DatepickerFormInput.vue';
+import ComponentFormInput from './misc/ComponentFormInput.vue';
 import TDropdown, { validDropdownPlacements } from './TDropdown.vue';
 import { TDatepickerSingleValue, TDatepickerView } from '../types/components/t-datepicker';
 
@@ -117,7 +119,7 @@ export default defineComponent({
   components: {
     DatepickerDropdown,
     TDropdown,
-    DatepickerFormInput,
+    ComponentFormInput,
   },
   props: {
     ...getVariantPropsWithClassesList<TDatepickerOptions, TDatepickerClassesValidKeys>(),
@@ -149,14 +151,22 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    inputType: {
+    userInputName: {
+      type: String,
+      default: undefined,
+    },
+    userInputType: {
       type: String,
       default: 'text',
     },
-    inputAttributes: {
+    userInputAttributes: {
       type: Object as PropType<InputHTMLAttributes & Data>,
       default: () => {},
     },
+    name: {
+      type: String,
+      default: undefined,
+    },
     formInputAttributes: {
       type: Object as PropType<InputHTMLAttributes & Data>,
       default: () => {},
diff --git a/src/components/TDatepicker/DatepickerFormInput.vue b/src/components/misc/ComponentFormInput.vue
similarity index 68%
rename from src/components/TDatepicker/DatepickerFormInput.vue
rename to src/components/misc/ComponentFormInput.vue
index 73930e0..8f222f1 100644
--- a/src/components/TDatepicker/DatepickerFormInput.vue
+++ b/src/components/misc/ComponentFormInput.vue
@@ -2,6 +2,7 @@
   <input
     v-for="(item, index) in valueAsArray"
     :key="`${item}-${index}`"
+    :name="inputName"
     v-bind="inputAttributes"
     type="hidden"
     :value="item"
@@ -12,9 +13,18 @@
 import { Data } from '@variantjs/core';
 import { defineComponent, PropType, InputHTMLAttributes } from 'vue';
 
+/**
+ * Adds a hidden input or a set of hidden inputs in case of array values
+ * that can be used in form components to ensure it send the value of the
+ * component form in a regular form request
+ */
 export default defineComponent({
-  name: 'DatepickerFormInput',
+  name: 'ComponentFormInput',
   props: {
+    inputName: {
+      type: String,
+      default: undefined,
+    },
     values: {
       type: [String, Array] as PropType<string | string[]>,
       required: true,
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index fb6e5e4..f497887 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -38,8 +38,10 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   hideOnLeaveTimeout?: number,
   closeOnSelect?: boolean,
   show?: boolean,
-  inputType?: string,
-  inputAttributes?: InputHTMLAttributes & Data,
+  userInputName?: string,
+  userInputType?: string,
+  userInputAttributes?: InputHTMLAttributes & Data,
+  name?: string,
   formInputAttributes?: InputHTMLAttributes & Data,
   showFormInput?: boolean,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;

From f6cbcbbcd585c13d0bdb343931ee94366053f9d1 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 12 Feb 2022 12:25:34 -0600
Subject: [PATCH 46/85] Cleanup

---
 src/components/TDatepicker.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 0b482f0..6a013cc 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -53,9 +53,9 @@
         :input-attributes="formInputAttributes"
         :input-name="configuration.name"
       />
-        
-      <datepicker-dropdown />
     </template>
+
+    <datepicker-dropdown />
   </t-dropdown>
 
   <!-- <rich-select-clear-button
@@ -602,7 +602,6 @@ export default defineComponent({
     
     provide('setActiveDate', setActiveDate);
     
-    
     provide('configuration', configuration);
 
     provide('parseDate', parseDate);

From 1db62676ea050c14897bbce8488a28db0566910b Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 12 Feb 2022 12:37:47 -0600
Subject: [PATCH 47/85] Refactor rich select ot use the new hidden input field

---
 src/components/TDatepicker.vue             |  8 +++---
 src/components/TRichSelect.vue             | 32 +++++++++++++---------
 src/components/misc/ComponentFormInput.vue | 15 +++++++---
 src/types/components/t-datepicker.ts       |  2 +-
 src/types/components/t-rich-select.ts      |  4 ++-
 5 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 6a013cc..ec1c77e 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -48,9 +48,9 @@
       </slot>
 
       <component-form-input
-        v-if="showFormInput"
-        :values="formattedDate"
-        :input-attributes="formInputAttributes"
+        v-if="configuration.addFormInput"
+        :value="formattedDate"
+        :input-attributes="configuration.formInputAttributes"
         :input-name="configuration.name"
       />
     </template>
@@ -171,7 +171,7 @@ export default defineComponent({
       type: Object as PropType<InputHTMLAttributes & Data>,
       default: () => {},
     },
-    showFormInput: {
+    addFormInput: {
       type: Boolean,
       default: true,
     },  
diff --git a/src/components/TRichSelect.vue b/src/components/TRichSelect.vue
index 8f1665d..0b409c7 100644
--- a/src/components/TRichSelect.vue
+++ b/src/components/TRichSelect.vue
@@ -3,16 +3,6 @@
     :class="configuration.classesList?.wrapper"
     v-bind="attributes"
   >
-    <t-select
-      v-model="localValue"
-      :name="configuration.name"
-      style="display: none"
-      :fixed-classes="undefined"
-      :classes="undefined"
-      :multiple="configuration.multiple"
-      :options="flattenedOptions"
-    />
-
     <t-dropdown
       ref="dropdownComponent"
       :disabled="configuration.disabled"
@@ -78,6 +68,14 @@
             />
           </template>
         </rich-select-trigger>
+
+        <component-form-input
+          v-if="configuration.addFormInput"
+          :value="localValue"
+          :input-attributes="configuration.formInputAttributes"
+          :disabled="configuration.disabled"
+          :input-name="configuration.name"
+        />
       </template>
 
       <rich-select-dropdown ref="dropdown">
@@ -138,7 +136,7 @@
 
 <script lang="ts">
 import {
-  defineComponent, PropType, provide, ref, computed,
+  defineComponent, PropType, provide, ref, computed, InputHTMLAttributes,
 } from 'vue';
 import {
   InputOptions,
@@ -170,8 +168,8 @@ import {
 import RichSelectTrigger from './TRichSelect/RichSelectTrigger.vue';
 import RichSelectDropdown from './TRichSelect/RichSelectDropdown.vue';
 import RichSelectClearButton from './TRichSelect/RichSelectClearButton.vue';
+import ComponentFormInput from './misc/ComponentFormInput.vue';
 import TDropdown, { validDropdownPlacements } from './TDropdown.vue';
-import TSelect from './TSelect.vue';
 import { sameWidthModifier } from '../utils/popper';
 
 // @vue/component
@@ -184,8 +182,8 @@ export default defineComponent({
     RichSelectTrigger,
     RichSelectDropdown,
     RichSelectClearButton,
+    ComponentFormInput,
     TDropdown,
-    TSelect,
   },
   props: {
     ...getVariantPropsWithClassesList<
@@ -347,6 +345,14 @@ export default defineComponent({
       type: [String, Object] as PropType<string | HTMLElement>,
       default: 'body',
     },
+    formInputAttributes: {
+      type: Object as PropType<InputHTMLAttributes & Data>,
+      default: () => {},
+    },
+    addFormInput: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: {
     change: (e: CustomEvent) => e instanceof CustomEvent,
diff --git a/src/components/misc/ComponentFormInput.vue b/src/components/misc/ComponentFormInput.vue
index 8f222f1..3c46b49 100644
--- a/src/components/misc/ComponentFormInput.vue
+++ b/src/components/misc/ComponentFormInput.vue
@@ -3,9 +3,10 @@
     v-for="(item, index) in valueAsArray"
     :key="`${item}-${index}`"
     :name="inputName"
-    v-bind="inputAttributes"
+    :disabled="disabled"
     type="hidden"
     :value="item"
+    v-bind="inputAttributes"
   >
 </template>
 
@@ -25,18 +26,24 @@ export default defineComponent({
       type: String,
       default: undefined,
     },
-    values: {
-      type: [String, Array] as PropType<string | string[]>,
+    // eslint-disable-next-line vue/require-prop-types
+    value: {      
       required: true,
     },
     inputAttributes: {
       type: Object as PropType<InputHTMLAttributes & Data>,
       default: () => {},
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     valueAsArray(): string[] {
-      return Array.isArray(this.values) ? this.values : [this.values];
+      return Array.isArray(this.value)
+        ? this.value.map(v => String(v))
+        : [String(this.value)];
     },
   },
 });
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index f497887..b036c4f 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -43,5 +43,5 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   userInputAttributes?: InputHTMLAttributes & Data,
   name?: string,
   formInputAttributes?: InputHTMLAttributes & Data,
-  showFormInput?: boolean,
+  addFormInput?: boolean,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;
diff --git a/src/types/components/t-rich-select.ts b/src/types/components/t-rich-select.ts
index a28a471..bbf35d5 100644
--- a/src/types/components/t-rich-select.ts
+++ b/src/types/components/t-rich-select.ts
@@ -1,7 +1,7 @@
 import {
   Data, InputOptions, Measure, NormalizedOption, NormalizedOptions, TRichSelectClassesValidKeys, WithVariantPropsAndClassesList,
 } from '@variantjs/core';
-import { HTMLAttributes } from 'vue';
+import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { Placement, Options } from '@popperjs/core';
 import { TSelectValue } from './t-select';
 import { FetchOptionsFn, PreFetchOptionsFn } from '../misc';
@@ -42,4 +42,6 @@ export type TRichSelectOptions = WithVariantPropsAndClassesList<{
   teleport?: boolean,
   teleportTo?: string | HTMLElement,
   inputType?: string,
+  formInputAttributes?: InputHTMLAttributes & Data,
+  addFormInput?: boolean,
 } & HTMLAttributes & Data, TRichSelectClassesValidKeys>;

From 1d369612abf18e0b59a098ec3846c83b8f1e3d67 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 12 Feb 2022 12:43:33 -0600
Subject: [PATCH 48/85] Disabled date picker

---
 src/components/TDatepicker.vue       | 6 ++++++
 src/development/Datepicker.vue       | 9 +++++++++
 src/types/components/t-datepicker.ts | 1 +
 3 files changed, 16 insertions(+)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index ec1c77e..bfd8507 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -33,6 +33,7 @@
           :type="configuration.userInputType"
           :name="configuration.userInputName"
           :value="userFormattedDate"
+          :disabled="configuration.disabled"
           v-bind="configuration.userInputAttributes"
           @input="userInputHandler"
           @focus="focusHandler"
@@ -52,6 +53,7 @@
         :value="formattedDate"
         :input-attributes="configuration.formInputAttributes"
         :input-name="configuration.name"
+        :disabled="configuration.disabled"
       />
     </template>
 
@@ -183,6 +185,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     range: {
       type: Boolean,
       default: false,
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 8653569..b0b1877 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -33,6 +33,15 @@
         input-type="button"
       />
     </TInputGroup>
+    <TInputGroup
+      label="Disabled"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        disabled
+      />
+    </TInputGroup>
     <TInputGroup
       label="Custom Selector"
       class="mb-4"
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index b036c4f..e71f9fa 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -26,6 +26,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   dropdownPopperOptions?: Options,
   monthsPerView?: number,
   multiple?: boolean,
+  disabled?: boolean,
   range?: boolean,
   highlightDates?: DateConditions,
   dateParser?: DateParser,

From d270de4748bf5b72ee5ae658b6ff130078da2817 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 12 Feb 2022 12:47:58 -0600
Subject: [PATCH 49/85] datepicker readonly option

---
 src/components/TDatepicker.vue       | 5 +++++
 src/development/Datepicker.vue       | 9 +++++++++
 src/types/components/t-datepicker.ts | 1 +
 3 files changed, 15 insertions(+)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index bfd8507..f14aaaf 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -34,6 +34,7 @@
           :name="configuration.userInputName"
           :value="userFormattedDate"
           :disabled="configuration.disabled"
+          :readonly="configuration.readonly"
           v-bind="configuration.userInputAttributes"
           @input="userInputHandler"
           @focus="focusHandler"
@@ -189,6 +190,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
     range: {
       type: Boolean,
       default: false,
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index b0b1877..e93ef89 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -42,6 +42,15 @@
         disabled
       />
     </TInputGroup>
+    <TInputGroup
+      label="Read only"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        readonly
+      />
+    </TInputGroup>
     <TInputGroup
       label="Custom Selector"
       class="mb-4"
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index e71f9fa..9c5a368 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -27,6 +27,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   monthsPerView?: number,
   multiple?: boolean,
   disabled?: boolean,
+  readonly?: boolean,
   range?: boolean,
   highlightDates?: DateConditions,
   dateParser?: DateParser,

From a663df48aa0bd4077fbe11b9ef47e5bd8f7c428c Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 19 Feb 2022 13:30:17 -0600
Subject: [PATCH 50/85] Add required prop

---
 src/components/TDatepicker.vue       | 5 +++++
 src/types/components/t-datepicker.ts | 1 +
 2 files changed, 6 insertions(+)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index f14aaaf..b3b726c 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -34,6 +34,7 @@
           :name="configuration.userInputName"
           :value="userFormattedDate"
           :disabled="configuration.disabled"
+          :required="configuration.required"
           :readonly="configuration.readonly"
           v-bind="configuration.userInputAttributes"
           @input="userInputHandler"
@@ -190,6 +191,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    required: {
+      type: Boolean,
+      default: false,
+    },
     readonly: {
       type: Boolean,
       default: false,
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index 9c5a368..24b8afe 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -28,6 +28,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   multiple?: boolean,
   disabled?: boolean,
   readonly?: boolean,
+  required?: boolean,
   range?: boolean,
   highlightDates?: DateConditions,
   dateParser?: DateParser,

From ac2866c5c4c42f4cb0a9553fc52f9b1974d89590 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 19 Feb 2022 13:31:48 -0600
Subject: [PATCH 51/85] Add placeholder prop

---
 src/components/TDatepicker.vue       | 5 +++++
 src/development/Datepicker.vue       | 8 ++++++++
 src/types/components/t-datepicker.ts | 1 +
 3 files changed, 14 insertions(+)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index b3b726c..d10b573 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -36,6 +36,7 @@
           :disabled="configuration.disabled"
           :required="configuration.required"
           :readonly="configuration.readonly"
+          :placeholder="configuration.placeholder"
           v-bind="configuration.userInputAttributes"
           @input="userInputHandler"
           @focus="focusHandler"
@@ -199,6 +200,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    placeholder: {
+      type: String,
+      default: undefined,
+    },
     range: {
       type: Boolean,
       default: false,
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index e93ef89..7300bfb 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -51,6 +51,14 @@
         readonly
       />
     </TInputGroup>
+    <TInputGroup
+      label="Placeholderr"
+      class="mb-4"
+    >
+      <t-datepicker
+        placeholder="Select a date"
+      />
+    </TInputGroup>
     <TInputGroup
       label="Custom Selector"
       class="mb-4"
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index 24b8afe..c0f173d 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -29,6 +29,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   disabled?: boolean,
   readonly?: boolean,
   required?: boolean,
+  placeholder?: string,
   range?: boolean,
   highlightDates?: DateConditions,
   dateParser?: DateParser,

From 51558f8b494ad9fa5355dcd4a2e1797c744e3963 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 19 Feb 2022 13:45:10 -0600
Subject: [PATCH 52/85] Fix weekday prop

---
 src/components/TDatepicker.vue                     | 12 +++++++++---
 src/components/TDatepicker/DatepickerViewMonth.vue |  8 ++++----
 src/development/Datepicker.vue                     |  9 +++++++++
 src/types/components/t-datepicker.ts               |  4 ++--
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index d10b573..a4676fa 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -2,7 +2,11 @@
   <t-dropdown
     ref="dropdownComponent"
     v-model:show="shown"
-    :classes="undefined"
+    :classes="{
+      // @TODO: add this to the tempalte
+      trigger: undefined,
+      dropdown: 'z-10'
+    }"
     :fixed-classes="undefined"
     :popper-options="configuration.dropdownPopperOptions"
     :placement="configuration.dropdownPlacement"
@@ -108,6 +112,7 @@ import {
   addDays,
   dateIsValid,
   Data,
+  WeekDay,
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
@@ -149,8 +154,8 @@ export default defineComponent({
       default: 'F j, Y',
     },
     weekStart: {
-      type: Number,
-      default: 0,
+      type: Number as PropType<WeekDay>,
+      default: WeekDay.Sunday,
     },
     amPm: {
       type: Boolean,
@@ -292,6 +297,7 @@ export default defineComponent({
     // - Show active date should be reset in some cases TBD
     // - Check aria labels on buttons 
     // - Replace svg icons with icon component
+    // - Selecting in different view with enter closes the dropdown
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
diff --git a/src/components/TDatepicker/DatepickerViewMonth.vue b/src/components/TDatepicker/DatepickerViewMonth.vue
index c0849a3..593cf7c 100644
--- a/src/components/TDatepicker/DatepickerViewMonth.vue
+++ b/src/components/TDatepicker/DatepickerViewMonth.vue
@@ -48,10 +48,10 @@ export default defineComponent({
 
     const days = computed<Date[]>(() => visibleDaysInMonthView(props.month, weekStart));
 
-    const weekDays = range(0, 6).map((index) => {
-      // 1900-01-01 is a Monday
-      return formatDate.value(new Date(1900, 0, index), 'D');
-    });
+    const weekDays = computed<string[]>(
+      () => range(0, 6)
+        .map((index) => formatDate.value(days.value[index], 'D')),
+    );
 
     return { days, configuration, weekDays };
   },
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 7300bfb..01fab14 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -24,6 +24,15 @@
     >
       <t-datepicker v-model="date" />
     </TInputGroup>
+    <TInputGroup
+      label="Weekstart on Tuesday"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        :week-start="2"
+      />
+    </TInputGroup>
     <TInputGroup
       label="Button"
       class="mb-4"
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index c0f173d..483f310 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -1,5 +1,5 @@
 import {
-  Data, DateConditions, DateFormatter, DateLocale, DateParser, DateValue, TDatepickerClassesValidKeys, WithVariantPropsAndClassesList,
+  Data, DateConditions, DateFormatter, DateLocale, DateParser, DateValue, TDatepickerClassesValidKeys, WeekDay, WithVariantPropsAndClassesList,
 } from '@variantjs/core';
 import { HTMLAttributes, InputHTMLAttributes } from 'vue';
 import { Placement, Options } from '@popperjs/core';
@@ -21,7 +21,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   amPm?: boolean,
   dateFormat?: string,
   userFormat?: string,
-  weekStart?: number,
+  weekStart?: WeekDay,
   dropdownPlacement?: Placement,
   dropdownPopperOptions?: Options,
   monthsPerView?: number,

From 4a28ff6377f77a7677dd0ab2f2170f3a04b83849 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 19 Feb 2022 14:07:36 -0600
Subject: [PATCH 53/85] Multiple months per view wiP

---
 .../TDatepicker/DatepickerDropdown.vue        |  11 +-
 src/components/TDatepicker/DatepickerView.vue |  10 +-
 .../TDatepicker/DatepickerViewControls.vue    | 157 +++++++-----------
 .../DatepickerViewControlsLabel.vue           |  85 ++++++++++
 src/development/Datepicker.vue                |   9 +
 5 files changed, 169 insertions(+), 103 deletions(-)
 create mode 100644 src/components/TDatepicker/DatepickerViewControlsLabel.vue

diff --git a/src/components/TDatepicker/DatepickerDropdown.vue b/src/components/TDatepicker/DatepickerDropdown.vue
index 9e297b3..6ea3d42 100644
--- a/src/components/TDatepicker/DatepickerDropdown.vue
+++ b/src/components/TDatepicker/DatepickerDropdown.vue
@@ -2,9 +2,10 @@
   <div class="inline-flex flex-col mt-1 bg-white border rounded">
     <div class="inline-flex flex-wrap ">
       <datepicker-view
-        v-for="(month) in activeMonths"
+        v-for="(month, index) in activeMonths"
         :key="month.toISOString"
         :month="month"
+        :first="index === 0"
       />
     </div>
   </div>
@@ -14,7 +15,7 @@
 import {
   defineComponent, computed, inject, Ref,
 } from 'vue';
-import { addMonths } from '@variantjs/core';
+import { addMonths, range } from '@variantjs/core';
 import DatepickerView from './DatepickerView.vue';
 import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
@@ -29,9 +30,9 @@ export default defineComponent({
 
     const activeDate = inject<Ref<Date>>('activeDate')!;
 
-    const activeMonths = computed<Date[]>(() => Array
-      .from({ length: monthsPerView }, (_x, i) => i)
-      .map((i) => addMonths(activeDate.value, i)));
+    const activeMonths = computed<Date[]>(() => 
+      range(1, monthsPerView)
+        .map((i) => addMonths(activeDate.value, i)));
 
     return { activeMonths };
   },
diff --git a/src/components/TDatepicker/DatepickerView.vue b/src/components/TDatepicker/DatepickerView.vue
index 7968d90..ad3842b 100644
--- a/src/components/TDatepicker/DatepickerView.vue
+++ b/src/components/TDatepicker/DatepickerView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-64">
-    <datepicker-view-controls />
+    <datepicker-view-controls :show-controls="first" />
 
     <datepicker-view-month
       v-if="isMonthView"
@@ -34,11 +34,15 @@ export default defineComponent({
       type: Date,
       required: true,
     },
+    first: {
+      type: Boolean,
+      required: true,
+    },
   },
-  setup() {
+  setup(props) {
     const currentView = inject<Ref<TDatepickerView>>('currentView')!;
 
-    const isMonthView = computed<boolean>(() => currentView.value === TDatepickerView.Day);
+    const isMonthView = computed<boolean>(() => currentView.value === TDatepickerView.Day || !props.first);
     const isYearView = computed<boolean>(() => currentView.value === TDatepickerView.Month);
     const isMultipleYearsView = computed<boolean>(() => currentView.value === TDatepickerView.Year);
 
diff --git a/src/components/TDatepicker/DatepickerViewControls.vue b/src/components/TDatepicker/DatepickerViewControls.vue
index a7c03e8..9ba9e37 100644
--- a/src/components/TDatepicker/DatepickerViewControls.vue
+++ b/src/components/TDatepicker/DatepickerViewControls.vue
@@ -1,118 +1,85 @@
 <template>
   <div class="flex px-3 pt-2">
-    <button
-      :aria-label="toggleViewAriaLabel"
-      type="button"
-      class="inline-flex items-center px-2 py-1 -ml-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100"
-      tabindex="-1"
-      @click="toggleView"
-    >
-      <template v-if="isMonthView || isYearView">
-        <span
-          v-if="isMonthView"
-          class=""
-          v-text="monthName"
-        />
-        
-        <span
-          class="ml-1 text-gray-500"
-          v-text="year"
-        />
-        
-        <svg
-          fill="currentColor"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          class="flex-shrink-0 w-5 h-5 text-gray-400 fill-current"
-        ><polygon points="12.9497475 10.7071068 13.6568542 10 8 4.34314575 6.58578644 5.75735931 10.8284271 10 6.58578644 14.2426407 8 15.6568542 12.9497475 10.7071068" /></svg>
-      </template>
+    <template v-if="showControls">
+      <button
+        :aria-label="toggleViewAriaLabel"
+        type="button"
+        class="transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 px-2 -ml-1"
+        tabindex="-1"
+        @click="toggleView"
+      >
+        <datepicker-view-controls-label control />
+      </button>
 
-      <template v-else>
+      <button
+        :aria-label="prevAriaLabel"
+        type="button"
+        class="inline-flex p-1 ml-auto transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+        tabindex="-1"
+        @click="prevGroupHandler"
+      >
         <svg
-          fill="currentColor"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          class="flex-shrink-0 h-5 w-5 fill-current text-gray-400"
-        ><polygon points="7.05025253 9.29289322 6.34314575 10 12 15.6568542 13.4142136 14.2426407 9.17157288 10 13.4142136 5.75735931 12 4.34314575" /></svg>
-        
-        <span
-          class="ml-1 text-gray-500"
-          v-text="`${yearsRange[0]} - ${yearsRange[1]}`"
-        />
-      </template>
-    </button>
-    
-    <button
-      :aria-label="prevAriaLabel"
-      type="button"
-      class="inline-flex p-1 ml-auto transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      tabindex="-1"
-      @click="prevGroupHandler"
-    >
-      <svg
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        class="inline-flex w-6 h-6 text-gray-400"
-      ><path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M15 19l-7-7 7-7"
-      /></svg>
-    </button>
-
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          class="inline-flex w-6 h-6 text-gray-400"
+        ><path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15 19l-7-7 7-7"
+        /></svg>
+      </button>
 
-    <button
-      :aria-label="nextAriaLabel"
-      type="button"
-      class="inline-flex p-1 -mr-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
-      tabindex="-1"
-      @click="nextGroupHandler"
-    >
-      <svg
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        class="inline-flex w-6 h-6 text-gray-400"
-      ><path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M9 5l7 7-7 7"
-      /></svg>
-    </button>
+      <button
+        :aria-label="nextAriaLabel"
+        type="button"
+        class="inline-flex p-1 -mr-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+        tabindex="-1"
+        @click="nextGroupHandler"
+      >
+        <svg
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          class="inline-flex w-6 h-6 text-gray-400"
+        ><path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M9 5l7 7-7 7"
+        /></svg>
+      </button>
+    </template>
+    <datepicker-view-controls-label v-else />
   </div>
 </template>
 
 <script lang="ts">
-import { addMonths, addYears, DateFormatter } from '@variantjs/core';
-import { ComputedRef, defineComponent, inject, Ref, computed } from 'vue';
+import { addMonths, addYears } from '@variantjs/core';
+import { defineComponent, inject, Ref, computed } from 'vue';
 import { TDatepickerView } from '../../types/components/t-datepicker';
-
+import DatepickerViewControlsLabel from './DatepickerViewControlsLabel.vue';
 export default defineComponent({
   name: 'DatepickerViewControls',
-
+  components: {
+    DatepickerViewControlsLabel,
+  },
+  props: {
+    showControls: {
+      type: Boolean,
+      required: true,
+    },
+  },
   setup() {
     const activeDate = inject<Ref<Date>>('activeDate')!;
-    const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
     const setCurrentView = inject<(view: TDatepickerView) => void>('setCurrentView')!;
     const setActiveDate = inject<(date: Date) => void>('setActiveDate')!;
     const currentView = inject<Ref<TDatepickerView>>('currentView')!;
 
-    const monthName = computed<string>(() => formatDate.value(activeDate.value, 'F')) ;
-    const year = computed<string>(() => formatDate.value(activeDate.value, 'Y')) ;
-
     const isMonthView = computed<boolean>(() => currentView.value === TDatepickerView.Day);
     const isYearView = computed<boolean>(() => currentView.value === TDatepickerView.Month);
     
-    const yearsRange = computed<[number, number]>(() => {
-      const currentYear = activeDate.value.getFullYear();
-      const from = currentYear - (currentYear % 12);
-      const to = from + 11;
-      return [from, to];
-    });
-
     const prevAriaLabel = computed<string>(() => 'Prev Year') ;
     const nextAriaLabel = computed<string>(() => 'Next Year') ;
     const toggleViewAriaLabel = computed<string>(() => 'Toggle View') ;
@@ -147,7 +114,7 @@ export default defineComponent({
       }
     };
 
-    return { monthName, year, toggleView, isMonthView, isYearView, yearsRange, nextAriaLabel, prevAriaLabel, toggleViewAriaLabel, nextGroupHandler, prevGroupHandler };
+    return { toggleView, nextAriaLabel, prevAriaLabel, toggleViewAriaLabel, nextGroupHandler, prevGroupHandler };
   },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewControlsLabel.vue b/src/components/TDatepicker/DatepickerViewControlsLabel.vue
new file mode 100644
index 0000000..658123c
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerViewControlsLabel.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="inline-flex items-center py-1 space-x-1">
+    <template v-if="isMonthView || isYearView">
+      <span
+        v-if="isMonthView"
+        class=""
+        v-text="monthName"
+      />
+
+      <span
+        class="text-gray-500"
+        v-text="year"
+      />
+
+      <svg
+        v-if="control"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        class="inline-flex w-6 h-6 text-gray-400"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M9 5l7 7-7 7"
+      /></svg>
+    </template>
+
+    <template v-else>
+      <svg
+        v-if="control"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        class="inline-flex w-6 h-6 text-gray-400"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M15 19l-7-7 7-7"
+      /></svg>
+        
+      <span
+        class="text-gray-500"
+        v-text="`${yearsRange[0]} - ${yearsRange[1]}`"
+      />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { DateFormatter } from '@variantjs/core';
+import { ComputedRef, defineComponent, inject, Ref, computed } from 'vue';
+import { TDatepickerView } from '../../types/components/t-datepicker';
+
+export default defineComponent({
+  name: 'DatepickerViewControlsLabel',
+  props: {
+    control: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup() {
+    const activeDate = inject<Ref<Date>>('activeDate')!;
+    const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
+    const currentView = inject<Ref<TDatepickerView>>('currentView')!;
+
+    const monthName = computed<string>(() => formatDate.value(activeDate.value, 'F')) ;
+    const year = computed<string>(() => formatDate.value(activeDate.value, 'Y')) ;
+
+    const isMonthView = computed<boolean>(() => currentView.value === TDatepickerView.Day);
+    const isYearView = computed<boolean>(() => currentView.value === TDatepickerView.Month);
+    
+    const yearsRange = computed<[number, number]>(() => {
+      const currentYear = activeDate.value.getFullYear();
+      const from = currentYear - (currentYear % 12);
+      const to = from + 11;
+      return [from, to];
+    });
+
+    return { monthName, year, isMonthView, isYearView, yearsRange };
+  },
+});
+</script>
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 01fab14..10d4ee4 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -33,6 +33,15 @@
         :week-start="2"
       />
     </TInputGroup>
+    <TInputGroup
+      label="Multiple months per view"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="date"
+        :months-per-view="3"
+      />
+    </TInputGroup>
     <TInputGroup
       label="Button"
       class="mb-4"

From c2f64cb4cae687c20242d4427d215f111fd2a2bd Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 19 Feb 2022 14:43:25 -0600
Subject: [PATCH 54/85] Multiple montsh per view WIP

---
 .../TDatepicker/DatepickerDropdown.vue        |   9 +-
 src/components/TDatepicker/DatepickerView.vue |  40 +++++--
 .../TDatepicker/DatepickerViewControls.vue    | 106 +++++++++---------
 .../DatepickerViewControlsLabel.vue           |  37 +++---
 .../TDatepicker/DatepickerViewMonth.vue       |   4 +-
 5 files changed, 108 insertions(+), 88 deletions(-)

diff --git a/src/components/TDatepicker/DatepickerDropdown.vue b/src/components/TDatepicker/DatepickerDropdown.vue
index 6ea3d42..f7f98cb 100644
--- a/src/components/TDatepicker/DatepickerDropdown.vue
+++ b/src/components/TDatepicker/DatepickerDropdown.vue
@@ -2,10 +2,9 @@
   <div class="inline-flex flex-col mt-1 bg-white border rounded">
     <div class="inline-flex flex-wrap ">
       <datepicker-view
-        v-for="(month, index) in activeMonths"
+        v-for="month in visibleMonths"
         :key="month.toISOString"
         :month="month"
-        :first="index === 0"
       />
     </div>
   </div>
@@ -30,11 +29,11 @@ export default defineComponent({
 
     const activeDate = inject<Ref<Date>>('activeDate')!;
 
-    const activeMonths = computed<Date[]>(() => 
-      range(1, monthsPerView)
+    const visibleMonths = computed<Date[]>(() => 
+      range(0, monthsPerView - 1)
         .map((i) => addMonths(activeDate.value, i)));
 
-    return { activeMonths };
+    return { visibleMonths };
   },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerView.vue b/src/components/TDatepicker/DatepickerView.vue
index ad3842b..b4854e4 100644
--- a/src/components/TDatepicker/DatepickerView.vue
+++ b/src/components/TDatepicker/DatepickerView.vue
@@ -1,6 +1,18 @@
 <template>
   <div class="w-64">
-    <datepicker-view-controls :show-controls="first" />
+    <datepicker-view-controls
+      v-if="isActiveMonth"
+      :date="month"
+    />
+    <div
+      v-else
+      class="flex px-3 pt-2"
+    >
+      <datepicker-view-controls-label
+        :date="month"
+        hide-controls
+      />
+    </div>
 
     <datepicker-view-month
       v-if="isMonthView"
@@ -9,44 +21,48 @@
 
     <datepicker-view-year v-else-if="isYearView" />
 
-    <DatepickerViewMultipleYears v-else-if="isMultipleYearsView" />
+    <DatepickerViewMultipleYears v-else />
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, inject, Ref } from 'vue';
 import { TDatepickerView } from '../../types/components/t-datepicker';
-import DatepickerViewControls from './DatepickerViewControls.vue';
 import DatepickerViewMonth from './DatepickerViewMonth.vue';
 import DatepickerViewYear from './DatepickerViewYear.vue';
 import DatepickerViewMultipleYears from './DatepickerViewMultipleYears.vue';
+import DatepickerViewControls from './DatepickerViewControls.vue';
+import DatepickerViewControlsLabel from './DatepickerViewControlsLabel.vue';
+
+import { isSameMonth } from '@variantjs/core';
 
 export default defineComponent({
   name: 'DatepickerView',
   components: {
-    DatepickerViewControls,
     DatepickerViewMonth,
     DatepickerViewYear,
     DatepickerViewMultipleYears,
+    DatepickerViewControls,
+    DatepickerViewControlsLabel,
   },
   props: {
     month: {
       type: Date,
       required: true,
     },
-    first: {
-      type: Boolean,
-      required: true,
-    },
   },
   setup(props) {
-    const currentView = inject<Ref<TDatepickerView>>('currentView')!;
+    const activeDate = inject<Ref<Date>>('activeDate')!;
 
-    const isMonthView = computed<boolean>(() => currentView.value === TDatepickerView.Day || !props.first);
+    const currentView = inject<Ref<TDatepickerView>>('currentView')!;
+    
+    const isActiveMonth = computed<boolean>(() => isSameMonth(props.month, activeDate.value));
+    
+    const isMonthView = computed<boolean>(() => !isActiveMonth.value || currentView.value === TDatepickerView.Day);
+    
     const isYearView = computed<boolean>(() => currentView.value === TDatepickerView.Month);
-    const isMultipleYearsView = computed<boolean>(() => currentView.value === TDatepickerView.Year);
 
-    return { isMonthView, isYearView, isMultipleYearsView };
+    return { isMonthView, isYearView, isActiveMonth };
   },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewControls.vue b/src/components/TDatepicker/DatepickerViewControls.vue
index 9ba9e37..3b4d5dd 100644
--- a/src/components/TDatepicker/DatepickerViewControls.vue
+++ b/src/components/TDatepicker/DatepickerViewControls.vue
@@ -1,57 +1,57 @@
 <template>
   <div class="flex px-3 pt-2">
-    <template v-if="showControls">
-      <button
-        :aria-label="toggleViewAriaLabel"
-        type="button"
-        class="transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 px-2 -ml-1"
-        tabindex="-1"
-        @click="toggleView"
-      >
-        <datepicker-view-controls-label control />
-      </button>
+    <button
+      :aria-label="toggleViewAriaLabel"
+      type="button"
+      class="transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 px-2 -ml-1"
+      tabindex="-1"
+      @click="toggleView"
+    >
+      <datepicker-view-controls-label
+        :date="date"
+        :view="currentView"
+      />
+    </button>
 
-      <button
-        :aria-label="prevAriaLabel"
-        type="button"
-        class="inline-flex p-1 ml-auto transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
-        tabindex="-1"
-        @click="prevGroupHandler"
-      >
-        <svg
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          class="inline-flex w-6 h-6 text-gray-400"
-        ><path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M15 19l-7-7 7-7"
-        /></svg>
-      </button>
+    <button
+      :aria-label="prevAriaLabel"
+      type="button"
+      class="inline-flex p-1 ml-auto transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      tabindex="-1"
+      @click="prevGroupHandler"
+    >
+      <svg
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        class="inline-flex w-6 h-6 text-gray-400"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M15 19l-7-7 7-7"
+      /></svg>
+    </button>
 
-      <button
-        :aria-label="nextAriaLabel"
-        type="button"
-        class="inline-flex p-1 -mr-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
-        tabindex="-1"
-        @click="nextGroupHandler"
-      >
-        <svg
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          class="inline-flex w-6 h-6 text-gray-400"
-        ><path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M9 5l7 7-7 7"
-        /></svg>
-      </button>
-    </template>
-    <datepicker-view-controls-label v-else />
+    <button
+      :aria-label="nextAriaLabel"
+      type="button"
+      class="inline-flex p-1 -mr-1 transition duration-100 ease-in-out rounded-full cursor-pointer hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed"
+      tabindex="-1"
+      @click="nextGroupHandler"
+    >
+      <svg
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        class="inline-flex w-6 h-6 text-gray-400"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M9 5l7 7-7 7"
+      /></svg>
+    </button>
   </div>
 </template>
 
@@ -66,8 +66,8 @@ export default defineComponent({
     DatepickerViewControlsLabel,
   },
   props: {
-    showControls: {
-      type: Boolean,
+    date: {
+      type: Date,
       required: true,
     },
   },
@@ -114,7 +114,7 @@ export default defineComponent({
       }
     };
 
-    return { toggleView, nextAriaLabel, prevAriaLabel, toggleViewAriaLabel, nextGroupHandler, prevGroupHandler };
+    return { toggleView, nextAriaLabel, prevAriaLabel, toggleViewAriaLabel, nextGroupHandler, prevGroupHandler, currentView };
   },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewControlsLabel.vue b/src/components/TDatepicker/DatepickerViewControlsLabel.vue
index 658123c..7a51455 100644
--- a/src/components/TDatepicker/DatepickerViewControlsLabel.vue
+++ b/src/components/TDatepicker/DatepickerViewControlsLabel.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="inline-flex items-center py-1 space-x-1">
-    <template v-if="isMonthView || isYearView">
+    <template v-if="view === 'day' || view === 'month'">
       <span
-        v-if="isMonthView"
+        v-if="view === 'day'"
         class=""
         v-text="monthName"
       />
@@ -13,7 +13,7 @@
       />
 
       <svg
-        v-if="control"
+        v-if="!hideControls"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -28,7 +28,7 @@
 
     <template v-else>
       <svg
-        v-if="control"
+        v-if="!hideControls"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -50,36 +50,39 @@
 
 <script lang="ts">
 import { DateFormatter } from '@variantjs/core';
-import { ComputedRef, defineComponent, inject, Ref, computed } from 'vue';
+import { ComputedRef, defineComponent, inject, computed, PropType } from 'vue';
 import { TDatepickerView } from '../../types/components/t-datepicker';
 
 export default defineComponent({
   name: 'DatepickerViewControlsLabel',
   props: {
-    control: {
+    hideControls: {
       type: Boolean,
       default: false,
     },
+    date: {
+      type: Date,
+      required: true,
+    },
+    view: {
+      type: String as PropType<TDatepickerView>,
+      default: TDatepickerView.Day,
+    },
   },
-  setup() {
-    const activeDate = inject<Ref<Date>>('activeDate')!;
+  setup(props) {
     const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
-    const currentView = inject<Ref<TDatepickerView>>('currentView')!;
-
-    const monthName = computed<string>(() => formatDate.value(activeDate.value, 'F')) ;
-    const year = computed<string>(() => formatDate.value(activeDate.value, 'Y')) ;
-
-    const isMonthView = computed<boolean>(() => currentView.value === TDatepickerView.Day);
-    const isYearView = computed<boolean>(() => currentView.value === TDatepickerView.Month);
     
+    const monthName = computed<string>(() => formatDate.value(props.date, 'F')) ;
+    const year = computed<string>(() => formatDate.value(props.date, 'Y')) ;
+
     const yearsRange = computed<[number, number]>(() => {
-      const currentYear = activeDate.value.getFullYear();
+      const currentYear = props.date.getFullYear();
       const from = currentYear - (currentYear % 12);
       const to = from + 11;
       return [from, to];
     });
 
-    return { monthName, year, isMonthView, isYearView, yearsRange };
+    return { monthName, year, yearsRange };
   },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewMonth.vue b/src/components/TDatepicker/DatepickerViewMonth.vue
index 593cf7c..e5e81df 100644
--- a/src/components/TDatepicker/DatepickerViewMonth.vue
+++ b/src/components/TDatepicker/DatepickerViewMonth.vue
@@ -23,15 +23,17 @@
 
 import { DateFormatter, range, visibleDaysInMonthView } from '@variantjs/core';
 import {
-  defineComponent, inject, computed, ComputedRef,
+  defineComponent, inject, computed, ComputedRef, Ref,
 } from 'vue';
 import { TDatepickerOptions } from '../../types/components/t-datepicker';
 import DatepickerViewMonthDay from './DatepickerViewMonthDay.vue';
+import DatepickerViewControls from './DatepickerViewControls.vue';
 
 export default defineComponent({
   name: 'DatepickerViewMonth',
   components: {
     DatepickerViewMonthDay,
+    DatepickerViewControls,
   },
   props: {
     month: {

From 5f2a59612eb72d215897eda0f2e6204936e21417 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Sat, 19 Feb 2022 14:58:09 -0600
Subject: [PATCH 55/85] Multiple months per view adjustments

---
 src/components/TDatepicker.vue                    |  5 +++++
 .../TDatepicker/DatepickerViewMonth.vue           |  4 +---
 .../TDatepicker/DatepickerViewMonthDay.vue        | 15 ++++++++++++++-
 src/development/Datepicker.vue                    | 13 ++++++++++---
 src/types/components/t-datepicker.ts              |  1 +
 5 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index a4676fa..5efd94e 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -217,6 +217,10 @@ export default defineComponent({
       type: [Date, Array, Function, String, Number] as PropType<DateConditions>,
       default: undefined,
     },
+    showDaysForOtherMonth: {
+      type: Boolean,
+      default: true,
+    },
     dropdownPlacement: {
       type: String as PropType<Placement>,
       default: undefined,
@@ -298,6 +302,7 @@ export default defineComponent({
     // - Check aria labels on buttons 
     // - Replace svg icons with icon component
     // - Selecting in different view with enter closes the dropdown
+    // - Range is being reset when dropdown is opened
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
diff --git a/src/components/TDatepicker/DatepickerViewMonth.vue b/src/components/TDatepicker/DatepickerViewMonth.vue
index e5e81df..593cf7c 100644
--- a/src/components/TDatepicker/DatepickerViewMonth.vue
+++ b/src/components/TDatepicker/DatepickerViewMonth.vue
@@ -23,17 +23,15 @@
 
 import { DateFormatter, range, visibleDaysInMonthView } from '@variantjs/core';
 import {
-  defineComponent, inject, computed, ComputedRef, Ref,
+  defineComponent, inject, computed, ComputedRef,
 } from 'vue';
 import { TDatepickerOptions } from '../../types/components/t-datepicker';
 import DatepickerViewMonthDay from './DatepickerViewMonthDay.vue';
-import DatepickerViewControls from './DatepickerViewControls.vue';
 
 export default defineComponent({
   name: 'DatepickerViewMonth',
   components: {
     DatepickerViewMonthDay,
-    DatepickerViewControls,
   },
   props: {
     month: {
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index 58a0c8c..87a7590 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -1,6 +1,11 @@
 <template>
   <div :class="configuration.classesList?.calendarDaysDayWrapper">
+    <span
+      v-if="showEmptyPlaceholder"
+      :class="configuration.classesList?.emptyDay"
+    />
     <button
+      v-else
       :aria-label="ariaLabel"
       :data-date="dataDate"
       type="button"
@@ -135,7 +140,15 @@ export default defineComponent({
       selectDay(props.day);
     };
 
-    return { configuration, buttonClass, daySelectedHandler, ariaLabel, dataDate, dayLabel };
+    const showEmptyPlaceholder =  computed<boolean>(() => {
+      if (!isForAnotherMonth.value) {
+        return false;
+      }
+
+      return ! configuration.showDaysForOtherMonth! || configuration.monthsPerView! > 1;
+    });
+
+    return { configuration, buttonClass, daySelectedHandler, ariaLabel, dataDate, dayLabel, showEmptyPlaceholder };
   },
 });
 </script>
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 10d4ee4..ab91c67 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -42,6 +42,15 @@
         :months-per-view="3"
       />
     </TInputGroup>
+    <TInputGroup
+      label="Multiple months per view + range"
+      class="mb-4"
+    >
+      <t-datepicker
+        range
+        :months-per-view="3"
+      />
+    </TInputGroup>
     <TInputGroup
       label="Button"
       class="mb-4"
@@ -131,9 +140,7 @@
       label="Range"
       class="mb-4"
     >
-      <t-datepicker
-        range
-      />
+      <t-datepicker range />
     </TInputGroup>
 
     <TInputGroup
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index 483f310..39da66a 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -32,6 +32,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   placeholder?: string,
   range?: boolean,
   highlightDates?: DateConditions,
+  showDaysForOtherMonth?: boolean,
   dateParser?: DateParser,
   dateFormatter?: DateFormatter,
   locale?: DateLocale,

From b6309dcf3d189f3935333d124ad78ccebc7c7bce Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 11 Mar 2022 18:15:25 -0600
Subject: [PATCH 56/85] Fix issue with ranges

---
 src/components/TDatepicker.vue | 26 +++++++++++++++++---------
 src/development/Datepicker.vue | 24 +++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 5efd94e..301c150 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -303,6 +303,10 @@ export default defineComponent({
     // - Replace svg icons with icon component
     // - Selecting in different view with enter closes the dropdown
     // - Range is being reset when dropdown is opened
+    // - When press enten in month or year views it immediatly closes the dropdown and closed the field 
+    // - when using range and have a single view should highlight the dates out of the month
+    // - when using range and have a multiple view the latest date moves the active date which upadte the first month
+    // - The click handler depnds of shown consider the case when using inline
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
@@ -320,12 +324,14 @@ export default defineComponent({
     const showActiveDate = ref<boolean>(false);
 
     const getInitialSelectedDate = (fromDate: TDatepickerValue): Date | Date[] | undefined => {
+
       let selectedDate: Date | undefined | Date[] = configuration.multiple || configuration.range ? [] : undefined;
 
       if (Array.isArray(fromDate)) {
         selectedDate = (fromDate)
           .map((value) => parseDate.value(value, configuration.dateFormat))
           .filter((value) => value !== undefined) as Date[];
+
       } else {
         selectedDate = parseDate.value(fromDate, configuration.dateFormat) || selectedDate;
       }
@@ -456,7 +462,6 @@ export default defineComponent({
       return day;
     };
 
-
     const doHide = async () => {
       shown.value = false;
     };
@@ -530,17 +535,20 @@ export default defineComponent({
       if (shown.value === true) {
         selectActiveDate();
       } else if (configuration.toggleOnClick) {
-        const parsedDate = input && input.value ? parseDate.value(input.value, configuration.userFormat) : undefined;
+        doShow();
+      }
 
-        if (parsedDate !== undefined) {
-          setActiveDate(parsedDate);
+      if (configuration.multiple || configuration.range) {
+        return;
+      }
 
-          selectActiveDate();
-        }
+      // Will try to set the data by using the user manual input
+      const parsedDate = input && input.value ? parseDate.value(input.value, configuration.userFormat) : undefined;
 
-        if (configuration.toggleOnClick) {
-          doShow();
-        }
+      if (parsedDate !== undefined) {
+        setActiveDate(parsedDate);
+
+        selectActiveDate();
       }
     };
 
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index ab91c67..1604073 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -47,9 +47,18 @@
       class="mb-4"
     >
       <t-datepicker
+        v-model="range2"
         range
         :months-per-view="3"
       />
+      
+      <p class="space-x-2 flex items-center mt-2 text-sm">
+        <span>Value:</span>
+        <span
+          class="bg-gray-200 text-gray-800 text-xs font-mono rounded py-1 px-2"
+          v-text="(range2 || []).join(' - ')"
+        />
+      </p>
     </TInputGroup>
     <TInputGroup
       label="Button"
@@ -140,7 +149,18 @@
       label="Range"
       class="mb-4"
     >
-      <t-datepicker range />
+      <t-datepicker
+        v-model="range"
+        range
+      />
+
+      <p class="space-x-2 flex items-center mt-2 text-sm">
+        <span>Value:</span>
+        <span
+          class="bg-gray-200 text-gray-800 text-xs font-mono rounded py-1 px-2"
+          v-text="(range || []).join(' - ')"
+        />
+      </p>
     </TInputGroup>
 
     <TInputGroup
@@ -268,6 +288,8 @@ export default defineComponent({
       customDate: [
         
       ],
+      range: undefined,
+      range2: undefined,
     };
   },
   methods: {

From 83437e1cca51d13bd55fb96f30186b1beaeee209 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 16 Mar 2022 09:45:56 -0600
Subject: [PATCH 57/85] Reinitialize the range when dropdown is closed

---
 src/components/TDatepicker.vue | 36 ++++++++++++++++++++++++++++++----
 1 file changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 301c150..5e205e2 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -16,8 +16,11 @@
     :toggle-on-focus="configuration.toggleOnFocus"
     :hide-on-leave-timeout="configuration.hideOnLeaveTimeout"
     v-bind="attributes"
-    @blur-on-child="blurOnChildHandler"
+    @blur-on-child="blurOnChildHandler"    
+    @hidden="hiddenHandler"
+    @shown="shownHandler"
     @before-show="beforeShowHandler"
+    @before-hide="beforeHideHandler"
   >
     <template #trigger="{ focusHandler, blurHandler }">
       <slot
@@ -291,7 +294,6 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     // @TODOS:
-    // - Reinitialize the range after the dropdown is closed
     // - Range and multiple: Consider selected dates outside of the view
     // - Disabled dates shouldn't be selectable and needs his own styling (`DatepickerViewMonthDay`)
     // - Disable "visible" dates in the invalid range < year 0 > year 9999
@@ -302,7 +304,6 @@ export default defineComponent({
     // - Check aria labels on buttons 
     // - Replace svg icons with icon component
     // - Selecting in different view with enter closes the dropdown
-    // - Range is being reset when dropdown is opened
     // - When press enten in month or year views it immediatly closes the dropdown and closed the field 
     // - when using range and have a single view should highlight the dates out of the month
     // - when using range and have a multiple view the latest date moves the active date which upadte the first month
@@ -311,6 +312,8 @@ export default defineComponent({
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
     const shown = ref<boolean>(configuration.show!);
+    
+    const resetRange = ref<boolean>(false);
 
     const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
 
@@ -436,7 +439,11 @@ export default defineComponent({
         if (configuration.range) {
           // If the new day is before than the first element of the range we need
           // to reinitialize the range
-          if (diffInDays(selectedDate.value[0], day) < 0) {
+          if (resetRange.value || diffInDays(selectedDate.value[0], day) < 0) {
+            if (resetRange.value) {
+              resetRange.value = false;
+            }
+
             return [day];
           }
 
@@ -618,9 +625,27 @@ export default defineComponent({
     };
 
     const beforeShowHandler = () => {
+      console.log('before show');
+      
       initViewData();
     };
 
+    const shownHandler = () => {
+      console.log('shown');
+    };
+
+    const hiddenHandler = () => {
+      // If the range is complete we should start over again when user tries
+      // to update the value
+      if (configuration.range && Array.isArray(selectedDate.value) && selectedDate.value.length === 2) {
+        resetRange.value = true;
+      }      
+    };
+
+    const beforeHideHandler = () => {
+      console.log('before hide');
+    };
+
     const userInputHandler = (e: Event) => {
       const input = e.target as HTMLInputElement;
       
@@ -667,6 +692,9 @@ export default defineComponent({
       clickHandler,
       keyboardNavigationHandler,
       beforeShowHandler,
+      shownHandler,
+      hiddenHandler,
+      beforeHideHandler,
       userInputHandler,
       doHide,
       doShow,

From 7eeedb388bb3c92dc8268da48e6f58e5ca167ac9 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 16 Mar 2022 09:49:52 -0600
Subject: [PATCH 58/85] Show highligthed days even if they are outside of the
 month

---
 src/components/TDatepicker.vue                        | 2 --
 src/components/TDatepicker/DatepickerViewMonthDay.vue | 8 ++++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 5e205e2..c9adb04 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -294,7 +294,6 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     // @TODOS:
-    // - Range and multiple: Consider selected dates outside of the view
     // - Disabled dates shouldn't be selectable and needs his own styling (`DatepickerViewMonthDay`)
     // - Disable "visible" dates in the invalid range < year 0 > year 9999
     // - Add teleport options
@@ -305,7 +304,6 @@ export default defineComponent({
     // - Replace svg icons with icon component
     // - Selecting in different view with enter closes the dropdown
     // - When press enten in month or year views it immediatly closes the dropdown and closed the field 
-    // - when using range and have a single view should highlight the dates out of the month
     // - when using range and have a multiple view the latest date moves the active date which upadte the first month
     // - The click handler depnds of shown consider the case when using inline
     
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index 87a7590..960a4d0 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -100,10 +100,6 @@ export default defineComponent({
     const isActive = computed<boolean>(() => isSameDay(activeDate.value, props.day));
 
     const buttonClass = computed(() => {
-      if (isForAnotherMonth.value) {
-        return configuration.classesList?.otherMonthDay;
-      }
-
       if (isFirstDayOfRange.value) {
         return configuration.classesList?.inRangeFirstDay;
       }
@@ -132,6 +128,10 @@ export default defineComponent({
         return configuration.classesList?.today;
       }
 
+      if (isForAnotherMonth.value) {
+        return configuration.classesList?.otherMonthDay;
+      }
+
       return configuration.classesList?.day;
     });
 

From cebe836c4e096d64ac98eae9fb68ac20737d1f7a Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 16 Mar 2022 09:54:30 -0600
Subject: [PATCH 59/85] New @todos

---
 src/components/TDatepicker.vue |  8 ++++++--
 src/development/Datepicker.vue | 10 ++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index c9adb04..0fd3a1a 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -277,8 +277,8 @@ export default defineComponent({
       default: 250,
     },
     closeOnSelect: {
-      type: Number,
-      default: 250,
+      type: Boolean,
+      default: true,
     },
     show: {
       type: Boolean,
@@ -306,6 +306,10 @@ export default defineComponent({
     // - When press enten in month or year views it immediatly closes the dropdown and closed the field 
     // - when using range and have a multiple view the latest date moves the active date which upadte the first month
     // - The click handler depnds of shown consider the case when using inline
+    // - Consider using an undefined default value for toggling and, in cases like multiple or range keep the modal opened by default
+    // - Once a date is selected if not opening the modal again if you click or press enter
+    // - In multiple add an ok button
+    // - Add a clear button
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 1604073..004d742 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -168,8 +168,17 @@
       class="mb-4"
     >
       <t-datepicker
+        v-model="multiple"
         multiple
       />
+
+      <p class="space-x-2 flex items-center mt-2 text-sm">
+        <span>Value:</span>
+        <span
+          class="bg-gray-200 text-gray-800 text-xs font-mono rounded py-1 px-2"
+          v-text="(multiple || []).join(', ')"
+        />
+      </p>
     </TInputGroup>
 
     <TInputGroup
@@ -290,6 +299,7 @@ export default defineComponent({
       ],
       range: undefined,
       range2: undefined,
+      multiple: undefined,
     };
   },
   methods: {

From 2774c7de5f8b481f2dac149c13492fc550fe0edf Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 16 Mar 2022 09:54:56 -0600
Subject: [PATCH 60/85] Remove console.log

---
 src/components/TDatepicker.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 0fd3a1a..a25ad1a 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -627,13 +627,11 @@ export default defineComponent({
     };
 
     const beforeShowHandler = () => {
-      console.log('before show');
-      
       initViewData();
     };
 
     const shownHandler = () => {
-      console.log('shown');
+      // TBD
     };
 
     const hiddenHandler = () => {
@@ -645,7 +643,7 @@ export default defineComponent({
     };
 
     const beforeHideHandler = () => {
-      console.log('before hide');
+      // TBD
     };
 
     const userInputHandler = (e: Event) => {

From f39e73349f624b7b9b1eb5e6fcc211bc72ca5791 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 16 Mar 2022 10:07:22 -0600
Subject: [PATCH 61/85] Dont show invalid dates

---
 src/components/TDatepicker.vue                        | 1 -
 src/components/TDatepicker/DatepickerViewMonthDay.vue | 6 +++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index a25ad1a..7278935 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -295,7 +295,6 @@ export default defineComponent({
   setup(props, { emit }) {
     // @TODOS:
     // - Disabled dates shouldn't be selectable and needs his own styling (`DatepickerViewMonthDay`)
-    // - Disable "visible" dates in the invalid range < year 0 > year 9999
     // - Add teleport options
     // - In general check which dropdown options/events are usable
     // - Add selectOnClose, closeOnSelected and see if something from the rich select can be used
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index 960a4d0..367fba4 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import {
   DateFormatter,
-  dateIsPartOfTheRange, DateParser, dayIsPartOfTheConditions, isSameDay,
+  dateIsPartOfTheRange, dateIsValid, DateParser, dayIsPartOfTheConditions, isSameDay,
 } from '@variantjs/core';
 import {
   defineComponent, inject, computed, Ref, ComputedRef,
@@ -141,6 +141,10 @@ export default defineComponent({
     };
 
     const showEmptyPlaceholder =  computed<boolean>(() => {
+      if (!dateIsValid(props.day)) {
+        return true;
+      }
+      
       if (!isForAnotherMonth.value) {
         return false;
       }

From a27128878c19c4f2258cfa3ea235f1e31457d072 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 16 Mar 2022 10:56:30 -0600
Subject: [PATCH 62/85] Fix click handler

---
 src/components/TDatepicker.vue | 38 ++++++++++++++++++----------------
 src/development/Datepicker.vue | 19 +++++++++++++++++
 2 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 7278935..4bd9a6c 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -306,9 +306,9 @@ export default defineComponent({
     // - when using range and have a multiple view the latest date moves the active date which upadte the first month
     // - The click handler depnds of shown consider the case when using inline
     // - Consider using an undefined default value for toggling and, in cases like multiple or range keep the modal opened by default
-    // - Once a date is selected if not opening the modal again if you click or press enter
     // - In multiple add an ok button
     // - Add a clear button
+    // - If users type a date and blur it should reset the v-model date
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
@@ -319,6 +319,10 @@ export default defineComponent({
     const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
 
     const formatDate = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
+
+    const isMultiple = computed<boolean>(() => !! (configuration.multiple || configuration.range));
+    const isDropdownClosed = computed<boolean>(() => shown.value === false);
+    const isDropdownOpened = computed<boolean>(() => !isDropdownClosed.value);
     
     const dateRangeSeparator = computed<string>(() => {
       return (configuration.locale || dateEnglishLocale).rangeSeparator || dateEnglishLocale.rangeSeparator;
@@ -329,7 +333,7 @@ export default defineComponent({
 
     const getInitialSelectedDate = (fromDate: TDatepickerValue): Date | Date[] | undefined => {
 
-      let selectedDate: Date | undefined | Date[] = configuration.multiple || configuration.range ? [] : undefined;
+      let selectedDate: Date | undefined | Date[] = isMultiple.value ? [] : undefined;
 
       if (Array.isArray(fromDate)) {
         selectedDate = (fromDate)
@@ -429,7 +433,7 @@ export default defineComponent({
     const getNewSelectedDate = (day: Date): Date | Date[] => {
       // If we are using multiple or range means that the day consists of an array
       // of dates
-      if (configuration.multiple || configuration.range) {
+      if (isMultiple.value) {
         // If not array or is empty initialize it with with the selected date
         if (!Array.isArray(selectedDate.value) || selectedDate.value.length === 0) {
           return [day];
@@ -511,7 +515,7 @@ export default defineComponent({
       emit('input', event);
       emit('update:modelValue', formattedDate.value);      
 
-      if (configuration.closeOnSelect && shown.value === true) {
+      if (configuration.closeOnSelect && isDropdownOpened.value) {
         doHide();
       }
     };
@@ -540,23 +544,21 @@ export default defineComponent({
     const clickHandler = (e: KeyboardEvent | MouseEvent) => {
       const input = e.target as (HTMLInputElement | HTMLButtonElement | undefined);
 
-      if (shown.value === true) {
-        selectActiveDate();
-      } else if (configuration.toggleOnClick) {
-        doShow();
-      }
-
-      if (configuration.multiple || configuration.range) {
-        return;
-      }
+      if (! isMultiple.value && isDropdownClosed.value) {
+        // Will try to set the data by using the user manual input
+        const parsedDate = input && input.value ? parseDate.value(input.value, configuration.userFormat) : undefined;
 
-      // Will try to set the data by using the user manual input
-      const parsedDate = input && input.value ? parseDate.value(input.value, configuration.userFormat) : undefined;
+        if (parsedDate !== undefined) {
+          setActiveDate(parsedDate);
 
-      if (parsedDate !== undefined) {
-        setActiveDate(parsedDate);
+          selectActiveDate();
+        }
+      }
 
+      if (isDropdownOpened.value) {
         selectActiveDate();
+      } else if (configuration.toggleOnClick) {
+        doShow();
       }
     };
 
@@ -571,7 +573,7 @@ export default defineComponent({
     };
 
     const keyboardNavigationHandler = (e: KeyboardEvent) => {
-      if (shown.value === false) {
+      if (isDropdownClosed.value) {
         doShow(); 
       }
 
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 004d742..1075976 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -60,6 +60,24 @@
         />
       </p>
     </TInputGroup>
+    <TInputGroup
+      label="Multiple months per view + multiple"
+      class="mb-4"
+    >
+      <t-datepicker
+        v-model="multiple2"
+        multiple
+        :months-per-view="3"
+      />
+      
+      <p class="space-x-2 flex items-center mt-2 text-sm">
+        <span>Value:</span>
+        <span
+          class="bg-gray-200 text-gray-800 text-xs font-mono rounded py-1 px-2"
+          v-text="(multiple2 || []).join(', ')"
+        />
+      </p>
+    </TInputGroup>
     <TInputGroup
       label="Button"
       class="mb-4"
@@ -300,6 +318,7 @@ export default defineComponent({
       range: undefined,
       range2: undefined,
       multiple: undefined,
+      multiple2: undefined,
     };
   },
   methods: {

From c1358106191844e1ed0c787345c751bb81b43470 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 16 Mar 2022 13:24:50 -0600
Subject: [PATCH 63/85] Handle disabled dates

---
 package.json                                  |  2 +-
 src/components/TDatepicker.vue                | 17 +++++++++++
 .../TDatepicker/DatepickerViewMonthDay.vue    | 13 ++++++--
 src/development/Datepicker.vue                | 30 +++++++++++++++++++
 src/types/components/t-datepicker.ts          |  1 +
 yarn.lock                                     |  8 ++---
 6 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 191da9b..a19bf5a 100644
--- a/package.json
+++ b/package.json
@@ -92,6 +92,6 @@
     }
   },
   "dependencies": {
-    "@variantjs/core": "^0.0.87"
+    "@variantjs/core": "^0.0.89"
   }
 }
diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 4bd9a6c..cf495f8 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -116,6 +116,7 @@ import {
   dateIsValid,
   Data,
   WeekDay,
+  dayIsPartOfTheConditions,
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
@@ -220,6 +221,10 @@ export default defineComponent({
       type: [Date, Array, Function, String, Number] as PropType<DateConditions>,
       default: undefined,
     },
+    disabledDates: {
+      type: [Date, Array, Function, String, Number] as PropType<DateConditions>,
+      default: undefined,
+    },
     showDaysForOtherMonth: {
       type: Boolean,
       default: true,
@@ -491,6 +496,17 @@ export default defineComponent({
     });
 
     const selectDay = (day: Date) => {
+      const dayIsDisabled: boolean = dayIsPartOfTheConditions(
+        day,
+        configuration.disabledDates,
+        parseDate.value,
+        configuration.dateFormat,
+      );
+
+      if (dayIsDisabled) {
+        return;
+      }
+      
       const newSelectedDate = getNewSelectedDate(day);
 
       showActiveDate.value = false;
@@ -536,6 +552,7 @@ export default defineComponent({
 
       setCurrentView(TDatepickerView.Month);
     };
+    
 
     const selectActiveDate = () => {
       selectDay(activeDate.value);
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index 367fba4..b882430 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -11,6 +11,7 @@
       type="button"
       tabindex="-1"
       :class="buttonClass"
+      :disabled="isDisabled"
       @click="daySelectedHandler"
     >
       {{ dayLabel }}
@@ -95,6 +96,13 @@ export default defineComponent({
       configuration.dateFormat,
     ));
 
+    const isDisabled = computed<boolean>(() => dayIsPartOfTheConditions(
+      props.day,
+      configuration.disabledDates,
+      parseDate.value,
+      configuration.dateFormat,
+    ));
+
     const isToday = computed<boolean>(() => isSameDay(props.day, new Date()));
 
     const isActive = computed<boolean>(() => isSameDay(activeDate.value, props.day));
@@ -136,7 +144,6 @@ export default defineComponent({
     });
 
     const daySelectedHandler = ()  => {
-      // @TODO: Consider disabled days      
       selectDay(props.day);
     };
 
@@ -144,7 +151,7 @@ export default defineComponent({
       if (!dateIsValid(props.day)) {
         return true;
       }
-      
+
       if (!isForAnotherMonth.value) {
         return false;
       }
@@ -152,7 +159,7 @@ export default defineComponent({
       return ! configuration.showDaysForOtherMonth! || configuration.monthsPerView! > 1;
     });
 
-    return { configuration, buttonClass, daySelectedHandler, ariaLabel, dataDate, dayLabel, showEmptyPlaceholder };
+    return { configuration, buttonClass, daySelectedHandler, ariaLabel, dataDate, dayLabel, showEmptyPlaceholder, isDisabled };
   },
 });
 </script>
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index 1075976..b71d96a 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -199,6 +199,36 @@
       </p>
     </TInputGroup>
 
+    <TInputGroup
+      label="Highlight dates"
+      class="mb-4"
+    >
+      <t-datepicker
+        model-value="1987-02-01"
+        :highlight-dates="[
+          (date) => date.getDay() === 1,
+          '1987-02-12',
+          new Date(1987, 1, 25),
+          +(new Date(1987, 1, 27))
+        ]"
+      />
+    </TInputGroup>
+
+    <TInputGroup
+      label="Disable dates"
+      class="mb-4"
+    >
+      <t-datepicker
+        model-value="1987-02-01"
+        :disabled-dates="[
+          (date) => date.getDay() === 1,
+          '1987-02-12',
+          new Date(1987, 1, 25),
+          +(new Date(1987, 1, 27))
+        ]"
+      />
+    </TInputGroup>
+
     <TInputGroup
       label="Syncs show property"
       class="mb-4"
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index 39da66a..a69bf11 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -32,6 +32,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   placeholder?: string,
   range?: boolean,
   highlightDates?: DateConditions,
+  disabledDates: DateConditions,
   showDaysForOtherMonth?: boolean,
   dateParser?: DateParser,
   dateFormatter?: DateFormatter,
diff --git a/yarn.lock b/yarn.lock
index 0f50e7e..1f1a697 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1370,10 +1370,10 @@
     "@typescript-eslint/types" "5.10.2"
     eslint-visitor-keys "^3.0.0"
 
-"@variantjs/core@^0.0.87":
-  version "0.0.87"
-  resolved "https://registry.npmjs.org/@variantjs/core/-/core-0.0.87.tgz#15576fde776baab7b417434afa7d45b8e97ae756"
-  integrity sha512-sUYPr4tkpSWzISdQfkXeHeAXUPDbNjKVBv+FZfldXymQvGwVhod/7BQYhyzBeywoal3cItdROMbDSQo90xSnjw==
+"@variantjs/core@^0.0.89":
+  version "0.0.89"
+  resolved "https://registry.npmjs.org/@variantjs/core/-/core-0.0.89.tgz#2b46830505cfebc431a559c6e43d1f34d0820003"
+  integrity sha512-Xl4KqejLXQ4308EreAM6BTNhc4xCxtLvB3FmmhoCrv1qNgp6SB0qwZ8LBNhysDVByXcE3qs0oaB0pgU1q7Idww==
 
 "@vitejs/plugin-vue@^2.0.1":
   version "2.1.0"

From 501c7520f414e7281f64695a994d740cd229fa64 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 16 Mar 2022 13:25:43 -0600
Subject: [PATCH 64/85] Fix disabled dates typing

---
 src/components/TDatepicker.vue       | 3 +--
 src/types/components/t-datepicker.ts | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index cf495f8..8ee5f72 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -299,7 +299,6 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     // @TODOS:
-    // - Disabled dates shouldn't be selectable and needs his own styling (`DatepickerViewMonthDay`)
     // - Add teleport options
     // - In general check which dropdown options/events are usable
     // - Add selectOnClose, closeOnSelected and see if something from the rich select can be used
@@ -500,7 +499,7 @@ export default defineComponent({
         day,
         configuration.disabledDates,
         parseDate.value,
-        configuration.dateFormat,
+        configuration.dateFormat, f,
       );
 
       if (dayIsDisabled) {
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index a69bf11..03e8084 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -32,7 +32,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   placeholder?: string,
   range?: boolean,
   highlightDates?: DateConditions,
-  disabledDates: DateConditions,
+  disabledDates?: DateConditions,
   showDaysForOtherMonth?: boolean,
   dateParser?: DateParser,
   dateFormatter?: DateFormatter,

From 9905d428b39ad4d2085343e7408734a708441d46 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 16 Mar 2022 14:24:41 -0600
Subject: [PATCH 65/85] Fix dropdown teleportTo

---
 src/components/TDropdown.vue | 49 ++++++++++++++++++++++++++++++++----
 src/development/Dropdown.vue | 42 +++++++++++++++++++++++++++++++
 2 files changed, 86 insertions(+), 5 deletions(-)

diff --git a/src/components/TDropdown.vue b/src/components/TDropdown.vue
index b4b517d..5e0c347 100644
--- a/src/components/TDropdown.vue
+++ b/src/components/TDropdown.vue
@@ -28,10 +28,7 @@
     </slot>
   </component>
 
-  <teleport
-    :to="configuration.teleportTo"
-    :disabled="! configuration.teleport"
-  >
+  <template v-if="!usesTeleport">
     <transitionable
       :enabled="popperIsAdjusted || !initAsShow"
       :classes-list="configuration.classesList"
@@ -59,7 +56,38 @@
         />
       </component>
     </transitionable>
-  </teleport>
+  </template>
+  <template v-else-if="isMounted">
+    <teleport :to="configuration.teleportTo">
+      <transitionable
+        :enabled="popperIsAdjusted || !initAsShow"
+        :classes-list="configuration.classesList"
+        @after-leave="dropdownAfterLeave"
+      >
+        <component
+          :is="dropdownTagName"
+          v-show="shown || adjustingPopper || initAsShow"
+          ref="dropdown"
+          :style="adjustingPopper ? 'opacity:0' : undefined"
+          :class="configuration.classesList?.dropdown"
+          :aria-hidden="!shown"
+          tabindex="-1"
+          v-bind="dropdownAttributes"
+          @blur="blurHandler"
+          @mouseover="mouseoverHandler"
+          @mouseleave="mouseleaveHandler"
+        >
+          <slot
+            :show="doShow"
+            :hide="doHide"
+            :toggle="doToggle"
+            :configuration="configuration"
+            :popper="popper"
+          />
+        </component>
+      </transitionable>
+    </teleport>
+  </template>
 </template>
 
 <script lang="ts">
@@ -195,6 +223,7 @@ export default defineComponent({
   },
   data({ configuration }) {
     return {
+      isMounted: false,
       shown: (configuration as unknown as TDropdownOptions).show,
       // Disables the animation while the dropdown is being shown
       initAsShow: (configuration as unknown as TDropdownOptions).show,
@@ -209,6 +238,9 @@ export default defineComponent({
     };
   },
   computed: {
+    usesTeleport(): boolean {
+      return !! (this.configuration.teleport && this.configuration.teleportTo);
+    },
     fullPopperOptions(): Options {
       const popperOptions = this.configuration.popperOptions as Options;
 
@@ -241,6 +273,8 @@ export default defineComponent({
     },
   },
   mounted() {
+    this.isMounted = true;
+    
     if (this.isTouchOnlyDevice && this.shown) {
       window.addEventListener('touchstart', this.touchstartHandler);
     }
@@ -384,6 +418,11 @@ export default defineComponent({
           resolve(popper);
         };
 
+        if (this.configuration.teleportTo && this.configuration.teleport) {
+          console.log(':D2', document.querySelector(this.configuration.teleportTo));
+          console.log(':D3', this.getDropdownElement());
+        }
+
         popper = createPopper(this.getTriggerElement(), this.getDropdownElement(), this.fullPopperOptions);
       });
     },
diff --git a/src/development/Dropdown.vue b/src/development/Dropdown.vue
index 2aef9c6..f8ce7f1 100644
--- a/src/development/Dropdown.vue
+++ b/src/development/Dropdown.vue
@@ -223,6 +223,48 @@
         </template>
       </t-dropdown>
     </TInputGroup>
+
+    <TInputGroup
+      label="use Teleport"
+      class="mb-4"
+    >
+      <t-dropdown
+        text="Teleport to red box"
+        teleport
+        teleport-to="#teleport-here"
+      >
+        <template #default="{ hide }">
+          <div>
+            <button
+              class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
+              role="menuitem"
+            >
+              Your Profile
+            </button>
+            <button
+              class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
+              role="menuitem"
+            >
+              Settings
+            </button>
+
+            <button
+              class="block w-full px-4 py-2 text-sm leading-5 text-red-500 transition duration-150 ease-in-out border-t hover:bg-gray-100 focus:outline-none focus:bg-gray-100"
+              @click="hide"
+            >
+              Close me
+            </button>
+          </div>
+        </template>
+      </t-dropdown>
+
+      <p
+        id="teleport-here"
+        class="bg-blue-100 empty:bg-red-100 p-1"
+      />
+      
+      <small>^ If turns blue means its working</small>
+    </TInputGroup>
   </t-card>
 </template>
 

From 90e1a9560017a9273f94b54b12654b82180028bb Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 16 Mar 2022 14:24:48 -0600
Subject: [PATCH 66/85] Update core

---
 package.json |  2 +-
 yarn.lock    | 27 +++++++++++++++++++++------
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index a19bf5a..2994dc1 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,7 @@
     "jest": "^27.4.5",
     "prettier": "^2.5.1",
     "release-it": "^14.11.8",
-    "tailwindcss": "^3.0.7",
+    "tailwindcss": "^3.0.23",
     "ts-jest": "^27.1.2",
     "ts-vue-plugin": "^0.1.3",
     "typescript": "^4.5.4",
diff --git a/yarn.lock b/yarn.lock
index 1f1a697..dbc8f67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5004,6 +5004,11 @@ nanoid@^3.2.0:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
   integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
 
+nanoid@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
+  integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -5476,6 +5481,15 @@ postcss@^8.4.5:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.6:
+  version "8.4.12"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
+  integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
+  dependencies:
+    nanoid "^3.3.1"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -5870,7 +5884,7 @@ resolve@^1.1.6, resolve@^1.10.0, resolve@^1.15.1, resolve@^1.17.0, resolve@^1.20
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
-resolve@^1.21.0:
+resolve@^1.22.0:
   version "1.22.0"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -6330,10 +6344,10 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-tailwindcss@^3.0.7:
-  version "3.0.18"
-  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.18.tgz#ea4825e6496d77dc21877b6b61c7cc56cda3add5"
-  integrity sha512-ihPTpEyA5ANgZbwKlgrbfnzOp9R5vDHFWmqxB1PT8NwOGCOFVVMl+Ps1cQQ369acaqqf1BEF77roCwK0lvNmTw==
+tailwindcss@^3.0.23:
+  version "3.0.23"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.23.tgz#c620521d53a289650872a66adfcb4129d2200d10"
+  integrity sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==
   dependencies:
     arg "^5.0.1"
     chalk "^4.1.2"
@@ -6348,13 +6362,14 @@ tailwindcss@^3.0.7:
     is-glob "^4.0.3"
     normalize-path "^3.0.0"
     object-hash "^2.2.0"
+    postcss "^8.4.6"
     postcss-js "^4.0.0"
     postcss-load-config "^3.1.0"
     postcss-nested "5.0.6"
     postcss-selector-parser "^6.0.9"
     postcss-value-parser "^4.2.0"
     quick-lru "^5.1.1"
-    resolve "^1.21.0"
+    resolve "^1.22.0"
 
 terminal-link@^2.0.0:
   version "2.1.1"

From ba7379deb46b20371c72853fa95fa1ec5037f0cf Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 16 Mar 2022 14:26:05 -0600
Subject: [PATCH 67/85] Add teleport options to the datepicker

---
 src/components/TDatepicker.vue       | 14 ++++++++++++--
 src/development/Datepicker.vue       | 16 ++++++++++++++++
 src/types/components/t-datepicker.ts |  4 +++-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 8ee5f72..c86ffe7 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -16,7 +16,9 @@
     :toggle-on-focus="configuration.toggleOnFocus"
     :hide-on-leave-timeout="configuration.hideOnLeaveTimeout"
     v-bind="attributes"
-    @blur-on-child="blurOnChildHandler"    
+    :teleport="configuration.teleport"    
+    :teleport-to="configuration.teleportTo"
+    @blur-on-child="blurOnChildHandler"
     @hidden="hiddenHandler"
     @shown="shownHandler"
     @before-show="beforeShowHandler"
@@ -289,6 +291,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    teleport: {
+      type: Boolean,
+      default: false,
+    },
+    teleportTo: {
+      type: [String, Object] as PropType<string | HTMLElement>,
+      default: 'body',
+    },
   },
   emits: {
     change: (e: CustomEvent) => e instanceof CustomEvent,
@@ -299,7 +309,6 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     // @TODOS:
-    // - Add teleport options
     // - In general check which dropdown options/events are usable
     // - Add selectOnClose, closeOnSelected and see if something from the rich select can be used
     // - Show active date should be reset in some cases TBD
@@ -313,6 +322,7 @@ export default defineComponent({
     // - In multiple add an ok button
     // - Add a clear button
     // - If users type a date and blur it should reset the v-model date
+    // - Inside the dropdown refactor to reuse the dropdown view (recently duplciated with the teleport fix)
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
diff --git a/src/development/Datepicker.vue b/src/development/Datepicker.vue
index b71d96a..567fd09 100644
--- a/src/development/Datepicker.vue
+++ b/src/development/Datepicker.vue
@@ -229,6 +229,22 @@
       />
     </TInputGroup>
 
+    <TInputGroup
+      label="use Teleport"
+      class="mb-4"
+    >
+      <t-datepicker
+        teleport
+        teleport-to="#teleportHere"
+      />
+
+      <div
+        id="teleportHere"
+        class="bg-blue-100 empty:bg-red-100 p-1 "
+      />
+      <small>^ If turns blue means its working</small>
+    </TInputGroup>
+
     <TInputGroup
       label="Syncs show property"
       class="mb-4"
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index 03e8084..d3a8ea2 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -49,5 +49,7 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   userInputAttributes?: InputHTMLAttributes & Data,
   name?: string,
   formInputAttributes?: InputHTMLAttributes & Data,
-  addFormInput?: boolean,
+  addFormInput?: boolean,  
+  teleport?: boolean,
+  teleportTo?: string | HTMLElement,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;

From b944f45f59dca7c0938e4cb9e339bcd309c4b5bc Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 18 Mar 2022 09:47:09 -0600
Subject: [PATCH 68/85] Remove console.log

---
 src/components/TDropdown.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/TDropdown.vue b/src/components/TDropdown.vue
index 5e0c347..423623e 100644
--- a/src/components/TDropdown.vue
+++ b/src/components/TDropdown.vue
@@ -418,11 +418,6 @@ export default defineComponent({
           resolve(popper);
         };
 
-        if (this.configuration.teleportTo && this.configuration.teleport) {
-          console.log(':D2', document.querySelector(this.configuration.teleportTo));
-          console.log(':D3', this.getDropdownElement());
-        }
-
         popper = createPopper(this.getTriggerElement(), this.getDropdownElement(), this.fullPopperOptions);
       });
     },

From b3b497df243dce7356eb4ef6b483b5e19467c7ac Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 18 Mar 2022 09:47:51 -0600
Subject: [PATCH 69/85] Use first range date as active date after opened

---
 src/components/TDatepicker.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index c86ffe7..78099e2 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -316,13 +316,13 @@ export default defineComponent({
     // - Replace svg icons with icon component
     // - Selecting in different view with enter closes the dropdown
     // - When press enten in month or year views it immediatly closes the dropdown and closed the field 
-    // - when using range and have a multiple view the latest date moves the active date which upadte the first month
     // - The click handler depnds of shown consider the case when using inline
     // - Consider using an undefined default value for toggling and, in cases like multiple or range keep the modal opened by default
     // - In multiple add an ok button
     // - Add a clear button
     // - If users type a date and blur it should reset the v-model date
     // - Inside the dropdown refactor to reuse the dropdown view (recently duplciated with the teleport fix)
+    // - Not related to this component but passing from the modal page creates a `enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices`
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
@@ -368,7 +368,7 @@ export default defineComponent({
 
       if (Array.isArray(selectedDate)) {
         if (selectedDate.length > 0) {
-          activeDate = selectedDate[selectedDate.length - 1];
+          activeDate = selectedDate[0];
         }
       } else if (selectedDate instanceof Date) {
         activeDate = selectedDate;
@@ -509,7 +509,7 @@ export default defineComponent({
         day,
         configuration.disabledDates,
         parseDate.value,
-        configuration.dateFormat, f,
+        configuration.dateFormat,
       );
 
       if (dayIsDisabled) {

From dfd7c41922259d99d23dcd52ceaf4a5c8c3b99c5 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 18 Mar 2022 10:41:58 -0600
Subject: [PATCH 70/85] Refactor date selection to use statement

---
 src/components/TDatepicker.vue | 114 +++++++--------------------------
 src/use/useSelectedDate.ts     | 109 +++++++++++++++++++++++++++++++
 2 files changed, 132 insertions(+), 91 deletions(-)
 create mode 100644 src/use/useSelectedDate.ts

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 78099e2..18fea2a 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -110,8 +110,6 @@ import {
   DateLocale,
   buildDateFormatter,
   dateEnglishLocale,
-  isSameDay,
-  diffInDays,
   addYears,
   addMonths,
   addDays,
@@ -122,6 +120,7 @@ import {
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
+import useSelectedDate from '../use/useSelectedDate';
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
 import { TDatepickerOptions, TDatepickerValue } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
@@ -326,14 +325,14 @@ export default defineComponent({
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 
-    const shown = ref<boolean>(configuration.show!);
-    
-    const resetRange = ref<boolean>(false);
-
     const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
 
-    const formatDate = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
+    const { selectedDate, setSelectedDate, getInitialSelectedDate, getSelectDayFromSelection, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
 
+    const shown = ref<boolean>(configuration.show!);
+    
+    const formatDate = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
+    
     const isMultiple = computed<boolean>(() => !! (configuration.multiple || configuration.range));
     const isDropdownClosed = computed<boolean>(() => shown.value === false);
     const isDropdownOpened = computed<boolean>(() => !isDropdownClosed.value);
@@ -345,35 +344,20 @@ export default defineComponent({
     // The active date is usually hidden but shown when navigating with the keyboard
     const showActiveDate = ref<boolean>(false);
 
-    const getInitialSelectedDate = (fromDate: TDatepickerValue): Date | Date[] | undefined => {
-
-      let selectedDate: Date | undefined | Date[] = isMultiple.value ? [] : undefined;
-
-      if (Array.isArray(fromDate)) {
-        selectedDate = (fromDate)
-          .map((value) => parseDate.value(value, configuration.dateFormat))
-          .filter((value) => value !== undefined) as Date[];
-
-      } else {
-        selectedDate = parseDate.value(fromDate, configuration.dateFormat) || selectedDate;
-      }
-
-      return selectedDate;
-    };
 
     const getInitialView = (): TDatepickerView => configuration.initialView!;
 
-    const getInitialActiveDate = (selectedDate: Date | Date[] | undefined): Date => {
+    const getInitialActiveDate = (): Date => {
       let activeDate: Date = new Date();
 
-      if (Array.isArray(selectedDate)) {
-        if (selectedDate.length > 0) {
-          activeDate = selectedDate[0];
+      if (Array.isArray(selectedDate.value)) {
+        if (selectedDate.value.length > 0) {
+          activeDate = selectedDate.value[0];
         }
-      } else if (selectedDate instanceof Date) {
-        activeDate = selectedDate;
+      } else if (selectedDate.value instanceof Date) {
+        activeDate = selectedDate.value;
       } else {
-        activeDate = parseDate.value(selectedDate, configuration.dateFormat) || new Date();
+        activeDate = parseDate.value(selectedDate.value, configuration.dateFormat) || new Date();
       }
 
       if (configuration.initialTime) {
@@ -389,9 +373,7 @@ export default defineComponent({
       return activeDate;
     };
 
-    const selectedDate = ref<Date | Date[] | undefined>(getInitialSelectedDate(props.modelValue));
-
-    const activeDate = ref<Date>(getInitialActiveDate(selectedDate.value));
+    const activeDate = ref<Date>(getInitialActiveDate());
 
     const currentView = ref<TDatepickerView>(getInitialView());
 
@@ -407,21 +389,10 @@ export default defineComponent({
       activeDate.value = date;
     };
 
-    const setSelectedDate = (date: Date | Date[] | undefined) => {
-      if (Array.isArray(date)) {
-        if (date.some((value) => !dateIsValid(value))) {
-          return;
-        }
-      } else if (!dateIsValid(date)) {
-        return;
-      }
-
-      selectedDate.value = date;
-    };
 
     const initViewData = () => {
       setCurrentView(getInitialView());
-      setActiveDate(getInitialActiveDate(selectedDate.value));
+      setActiveDate(getInitialActiveDate());
       showActiveDate.value = false;
     };
 
@@ -444,49 +415,6 @@ export default defineComponent({
         : formatDate.value(selectedDate.value, configuration.userFormat);
     });
 
-    const getNewSelectedDate = (day: Date): Date | Date[] => {
-      // If we are using multiple or range means that the day consists of an array
-      // of dates
-      if (isMultiple.value) {
-        // If not array or is empty initialize it with with the selected date
-        if (!Array.isArray(selectedDate.value) || selectedDate.value.length === 0) {
-          return [day];
-        }
-
-        // The ranges consists in a tuple of dates, we should fill the first 
-        // or the second element depending of the current state of the selection
-        if (configuration.range) {
-          // If the new day is before than the first element of the range we need
-          // to reinitialize the range
-          if (resetRange.value || diffInDays(selectedDate.value[0], day) < 0) {
-            if (resetRange.value) {
-              resetRange.value = false;
-            }
-
-            return [day];
-          }
-
-          // If the range is already full we are going to replace the second date
-          if (selectedDate.value.length === 2) {
-            return [selectedDate.value[0], day];
-          }
-            
-          // Otherwise just add the new day to the range
-          return [...selectedDate.value, day];
-        }
-
-        if (configuration.multiple) {
-          // If already selected, remove it
-          if (selectedDate.value.some(date => isSameDay(date, day))) {
-            return selectedDate.value.filter((date) => ! isSameDay(date, day));
-          }
-
-          return [...selectedDate.value, day];
-        }
-      }
-
-      return day;
-    };
 
     const doHide = async () => {
       shown.value = false;
@@ -516,7 +444,7 @@ export default defineComponent({
         return;
       }
       
-      const newSelectedDate = getNewSelectedDate(day);
+      const newSelectedDate = getSelectDayFromSelection(day);
 
       showActiveDate.value = false;
      
@@ -561,12 +489,17 @@ export default defineComponent({
 
       setCurrentView(TDatepickerView.Month);
     };
-    
 
     const selectActiveDate = () => {
       selectDay(activeDate.value);
     };
 
+    // const isDateSelectionComplete = computed<boolean>(() => {
+    //   if (configuration.range) {
+    //     return Array.isArray(selectedDate.value) && selectedDate.value.length === 2;
+    //   }
+    // });
+
     const clickHandler = (e: KeyboardEvent | MouseEvent) => {
       const input = e.target as (HTMLInputElement | HTMLButtonElement | undefined);
 
@@ -665,7 +598,7 @@ export default defineComponent({
       // If the range is complete we should start over again when user tries
       // to update the value
       if (configuration.range && Array.isArray(selectedDate.value) && selectedDate.value.length === 2) {
-        resetRange.value = true;
+        resetRangeSelection();
       }      
     };
 
@@ -731,7 +664,6 @@ export default defineComponent({
       selectedDate,
     };
   },
-
 });
 
 </script>
diff --git a/src/use/useSelectedDate.ts b/src/use/useSelectedDate.ts
new file mode 100644
index 0000000..58e3657
--- /dev/null
+++ b/src/use/useSelectedDate.ts
@@ -0,0 +1,109 @@
+import { dateIsValid, DateParser, diffInDays, isSameDay } from '@variantjs/core';
+import { computed, ComputedRef, Ref, ref } from 'vue';
+import { TDatepickerValue } from '../types';
+
+export default function useSelectedDate<P extends {
+  modelValue?: TDatepickerValue, 
+}, C extends {
+  multiple?: boolean,
+  range?: boolean,
+  dateFormat?: string,
+}>(
+  props: P,
+  configuration: C,
+  parseDate: ComputedRef<DateParser>,
+): {
+    selectedDate: Ref<Date | Date[] | undefined>
+    setSelectedDate: ((date: Date | Date[] | undefined) => void),
+    getInitialSelectedDate: (fromDate: TDatepickerValue) => Date | Date[] | undefined,
+    getSelectDayFromSelection: (day: Date) => Date | Date[],
+    resetRangeSelection: () => void,
+  } {
+  const isMultiple = computed<boolean>(() => !! (configuration.multiple || configuration.range));
+  const resetRange = ref<boolean>(false);
+
+  const getInitialSelectedDate = (fromDate: TDatepickerValue): Date | Date[] | undefined => {
+    let selectedDate: Date | undefined | Date[] = isMultiple.value ? [] : undefined;
+
+    if (Array.isArray(fromDate)) {
+      selectedDate = (fromDate)
+        .map((value) => parseDate.value(value, configuration.dateFormat))
+        .filter((value) => value !== undefined) as Date[];
+
+    } else {
+      selectedDate = parseDate.value(fromDate, configuration.dateFormat) || selectedDate;
+    }
+
+    return selectedDate;
+  };
+
+  const selectedDate = ref<Date | Date[] | undefined>(getInitialSelectedDate(props.modelValue));
+
+  const getSelectDayFromSelection = (day: Date): Date | Date[] => {
+    // If we are using multiple or range means that the day consists of an array
+    // of dates
+    if (isMultiple.value) {
+      // If not array or is empty initialize it with with the selected date
+      if (!Array.isArray(selectedDate.value) || selectedDate.value.length === 0) {
+        return [day];
+      }
+
+      // The ranges consists in a tuple of dates, we should fill the first 
+      // or the second element depending of the current state of the selection
+      if (configuration.range) {
+        // If the new day is before than the first element of the range we need
+        // to reinitialize the range
+        if (resetRange.value || diffInDays(selectedDate.value[0], day) < 0) {
+          if (resetRange.value) {
+            resetRange.value = false;
+          }
+
+          return [day];
+        }
+
+        // If the range is already full we are going to replace the second date
+        if (selectedDate.value.length === 2) {
+          return [selectedDate.value[0], day];
+        }
+          
+        // Otherwise just add the new day to the range
+        return [...selectedDate.value, day];
+      }
+
+      if (configuration.multiple) {
+        // If already selected, remove it
+        if (selectedDate.value.some(date => isSameDay(date, day))) {
+          return selectedDate.value.filter((date) => ! isSameDay(date, day));
+        }
+
+        return [...selectedDate.value, day];
+      }
+    }
+
+    return day;
+  };
+
+  const setSelectedDate = (date: Date | Date[] | undefined) => {
+    if (Array.isArray(date)) {
+      if (date.some((value) => !dateIsValid(value))) {
+        return;
+      }
+    } else if (!dateIsValid(date)) {
+      return;
+    }
+
+    selectedDate.value = date;
+  };
+
+  const resetRangeSelection = () => {
+    resetRange.value = true;
+  };
+
+  return {
+    selectedDate,
+    setSelectedDate,
+    getInitialSelectedDate,
+    getSelectDayFromSelection,
+    resetRangeSelection,
+  };
+}

From 4afb6bf4d1d6e33bbe7e8cd8ed88ec297c1a2f03 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 18 Mar 2022 10:51:03 -0600
Subject: [PATCH 71/85] Refactor active date

---
 src/components/TDatepicker.vue | 48 ++----------------------
 src/use/useActiveDate.ts       | 68 ++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 44 deletions(-)
 create mode 100644 src/use/useActiveDate.ts

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 18fea2a..8718d47 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -113,7 +113,6 @@ import {
   addYears,
   addMonths,
   addDays,
-  dateIsValid,
   Data,
   WeekDay,
   dayIsPartOfTheConditions,
@@ -121,6 +120,7 @@ import {
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
 import useSelectedDate from '../use/useSelectedDate';
+import useActiveDate from '../use/useActiveDate';
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
 import { TDatepickerOptions, TDatepickerValue } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
@@ -328,6 +328,7 @@ export default defineComponent({
     const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
 
     const { selectedDate, setSelectedDate, getInitialSelectedDate, getSelectDayFromSelection, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
+    const { activeDate, showActiveDate, initActiveDate, setActiveDate } = useActiveDate(configuration, selectedDate, parseDate);
 
     const shown = ref<boolean>(configuration.show!);
     
@@ -341,58 +342,18 @@ export default defineComponent({
       return (configuration.locale || dateEnglishLocale).rangeSeparator || dateEnglishLocale.rangeSeparator;
     });
 
-    // The active date is usually hidden but shown when navigating with the keyboard
-    const showActiveDate = ref<boolean>(false);
-
-
+    
     const getInitialView = (): TDatepickerView => configuration.initialView!;
 
-    const getInitialActiveDate = (): Date => {
-      let activeDate: Date = new Date();
-
-      if (Array.isArray(selectedDate.value)) {
-        if (selectedDate.value.length > 0) {
-          activeDate = selectedDate.value[0];
-        }
-      } else if (selectedDate.value instanceof Date) {
-        activeDate = selectedDate.value;
-      } else {
-        activeDate = parseDate.value(selectedDate.value, configuration.dateFormat) || new Date();
-      }
-
-      if (configuration.initialTime) {
-        const parsedDateWithTime = parseDate.value(configuration.initialTime, configuration.amPm ? 'G:i:S K' : 'H:i:S');
-
-        if (parsedDateWithTime) {
-          activeDate.setHours(parsedDateWithTime.getHours());
-          activeDate.setMinutes(parsedDateWithTime.getMinutes());
-          activeDate.setSeconds(parsedDateWithTime.getSeconds());
-        }
-      }
-
-      return activeDate;
-    };
-
-    const activeDate = ref<Date>(getInitialActiveDate());
-
     const currentView = ref<TDatepickerView>(getInitialView());
 
     const setCurrentView = (view: TDatepickerView) => {
       currentView.value = view;
     };
 
-    const setActiveDate = (date: Date) => {
-      if (!dateIsValid(date)) {
-        return;
-      }
-
-      activeDate.value = date;
-    };
-
-
     const initViewData = () => {
       setCurrentView(getInitialView());
-      setActiveDate(getInitialActiveDate());
+      initActiveDate();
       showActiveDate.value = false;
     };
 
@@ -415,7 +376,6 @@ export default defineComponent({
         : formatDate.value(selectedDate.value, configuration.userFormat);
     });
 
-
     const doHide = async () => {
       shown.value = false;
     };
diff --git a/src/use/useActiveDate.ts b/src/use/useActiveDate.ts
new file mode 100644
index 0000000..7852303
--- /dev/null
+++ b/src/use/useActiveDate.ts
@@ -0,0 +1,68 @@
+import { dateIsValid, DateParser } from '@variantjs/core';
+import { ComputedRef, Ref, ref } from 'vue';
+import { TDatepickerSingleValue } from '../types/components/t-datepicker';
+
+export default function useActiveDate<C extends {
+  initialTime?: TDatepickerSingleValue,
+  dateFormat?: string,
+  amPm?: boolean,
+}>(
+  configuration: C,
+  selectedDate: Ref<Date | Date[] | undefined>,
+  parseDate: ComputedRef<DateParser>,
+): {
+    activeDate: Ref<Date>
+    showActiveDate: Ref<boolean>
+    setActiveDate: (date: Date) => void,
+    initActiveDate: () => void,
+  } {
+  // The active date is usually hidden but shown when navigating with the keyboard
+  const showActiveDate = ref<boolean>(false);
+
+  const getInitialActiveDate = (): Date => {
+    let activeDate: Date = new Date();
+
+    if (Array.isArray(selectedDate.value)) {
+      if (selectedDate.value.length > 0) {
+        activeDate = selectedDate.value[0];
+      }
+    } else if (selectedDate.value instanceof Date) {
+      activeDate = selectedDate.value;
+    } else {
+      activeDate = parseDate.value(selectedDate.value, configuration.dateFormat) || new Date();
+    }
+
+    if (configuration.initialTime) {
+      const parsedDateWithTime = parseDate.value(configuration.initialTime, configuration.amPm ? 'G:i:S K' : 'H:i:S');
+
+      if (parsedDateWithTime) {
+        activeDate.setHours(parsedDateWithTime.getHours());
+        activeDate.setMinutes(parsedDateWithTime.getMinutes());
+        activeDate.setSeconds(parsedDateWithTime.getSeconds());
+      }
+    }
+
+    return activeDate;
+  };
+
+  const activeDate = ref<Date>(getInitialActiveDate());
+
+  const setActiveDate = (date: Date) => {
+    if (!dateIsValid(date)) {
+      return;
+    }
+
+    activeDate.value = date;
+  };
+
+  const initActiveDate = () => {
+    setActiveDate(getInitialActiveDate());
+  };
+
+  return {
+    activeDate,
+    showActiveDate,
+    setActiveDate,
+    initActiveDate,
+  };
+}

From 8a8e35900267b7842647b214c1d0ed2f2a783c1f Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Fri, 18 Mar 2022 11:01:03 -0600
Subject: [PATCH 72/85] Refactor month view handling and more active date

---
 src/components/TDatepicker.vue                | 29 +++++++----------
 .../TDatepicker/DatepickerViewMonthDay.vue    |  4 +--
 src/use/useActiveDate.ts                      | 18 +++++++++--
 src/use/useCalendarView.ts                    | 32 +++++++++++++++++++
 4 files changed, 61 insertions(+), 22 deletions(-)
 create mode 100644 src/use/useCalendarView.ts

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 8718d47..92fc838 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -121,6 +121,7 @@ import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
 import useSelectedDate from '../use/useSelectedDate';
 import useActiveDate from '../use/useActiveDate';
+import useCalendarView from '../use/useCalendarView';
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
 import { TDatepickerOptions, TDatepickerValue } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
@@ -328,7 +329,8 @@ export default defineComponent({
     const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
 
     const { selectedDate, setSelectedDate, getInitialSelectedDate, getSelectDayFromSelection, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
-    const { activeDate, showActiveDate, initActiveDate, setActiveDate } = useActiveDate(configuration, selectedDate, parseDate);
+    const { activeDate, activeDateIsVisible, initActiveDate, setActiveDate, hideActiveDate, showActiveDate } = useActiveDate(configuration, selectedDate, parseDate);
+    const { currentView, initView, setCurrentView } = useCalendarView(configuration);
 
     const shown = ref<boolean>(configuration.show!);
     
@@ -342,19 +344,11 @@ export default defineComponent({
       return (configuration.locale || dateEnglishLocale).rangeSeparator || dateEnglishLocale.rangeSeparator;
     });
 
-    
-    const getInitialView = (): TDatepickerView => configuration.initialView!;
-
-    const currentView = ref<TDatepickerView>(getInitialView());
-
-    const setCurrentView = (view: TDatepickerView) => {
-      currentView.value = view;
-    };
 
-    const initViewData = () => {
-      setCurrentView(getInitialView());
+    const initAllViewData = () => {
+      initView();
       initActiveDate();
-      showActiveDate.value = false;
+      hideActiveDate();
     };
 
     watch(() => props.modelValue, (value: TDatepickerValue) => {
@@ -406,7 +400,7 @@ export default defineComponent({
       
       const newSelectedDate = getSelectDayFromSelection(day);
 
-      showActiveDate.value = false;
+      hideActiveDate();
      
       setActiveDate(day);
 
@@ -543,11 +537,11 @@ export default defineComponent({
         setActiveDate(addDays(activeDate.value, daysPerView));
       }
 
-      showActiveDate.value = true;
+      showActiveDate();
     };
 
     const beforeShowHandler = () => {
-      initViewData();
+      initAllViewData();
     };
 
     const shownHandler = () => {
@@ -572,14 +566,15 @@ export default defineComponent({
       const parsedDate = parseDate.value(input.value, configuration.userFormat);
       
       if (parsedDate !== undefined) {
-        showActiveDate.value = true;
+        showActiveDate();
+        
         setActiveDate(parsedDate);
       }
     };
 
     provide('activeDate', activeDate);
 
-    provide('showActiveDate', showActiveDate);
+    provide('activeDateIsVisible', activeDateIsVisible);
 
     provide('selectedDate', selectedDate);
     
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index b882430..14706a7 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -43,7 +43,7 @@ export default defineComponent({
   },
   setup(props) {
     const configuration = inject<TDatepickerOptions>('configuration')!;
-    const showActiveDate = inject<Ref<boolean>>('showActiveDate')!;
+    const activeDateIsVisible = inject<Ref<boolean>>('activeDateIsVisible')!;
     const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
     const activeDate = inject<Ref<Date>>('activeDate')!;
     const parseDate = inject<Ref<DateParser>>('parseDate')!;
@@ -124,7 +124,7 @@ export default defineComponent({
         return configuration.classesList?.selectedDay;
       }
 
-      if (isActive.value && showActiveDate.value) {
+      if (isActive.value && activeDateIsVisible.value) {
         return configuration.classesList?.activeDay;
       }
 
diff --git a/src/use/useActiveDate.ts b/src/use/useActiveDate.ts
index 7852303..33f8f01 100644
--- a/src/use/useActiveDate.ts
+++ b/src/use/useActiveDate.ts
@@ -12,12 +12,14 @@ export default function useActiveDate<C extends {
   parseDate: ComputedRef<DateParser>,
 ): {
     activeDate: Ref<Date>
-    showActiveDate: Ref<boolean>
+    activeDateIsVisible: Ref<boolean>
     setActiveDate: (date: Date) => void,
     initActiveDate: () => void,
+    hideActiveDate: () => void,
+    showActiveDate: () => void,
   } {
   // The active date is usually hidden but shown when navigating with the keyboard
-  const showActiveDate = ref<boolean>(false);
+  const activeDateIsVisible = ref<boolean>(false);
 
   const getInitialActiveDate = (): Date => {
     let activeDate: Date = new Date();
@@ -59,10 +61,20 @@ export default function useActiveDate<C extends {
     setActiveDate(getInitialActiveDate());
   };
 
+  const hideActiveDate = () => {
+    activeDateIsVisible.value = false;
+  };
+  
+  const showActiveDate = () => {
+    activeDateIsVisible.value = true;
+  };
+
   return {
     activeDate,
-    showActiveDate,
+    activeDateIsVisible,
     setActiveDate,
     initActiveDate,
+    hideActiveDate,
+    showActiveDate,
   };
 }
diff --git a/src/use/useCalendarView.ts b/src/use/useCalendarView.ts
new file mode 100644
index 0000000..71908f6
--- /dev/null
+++ b/src/use/useCalendarView.ts
@@ -0,0 +1,32 @@
+import { Ref, ref } from 'vue';
+import { TDatepickerView } from '../types/components/t-datepicker';
+
+export default function useCalendarView<C extends {
+  initialView?: TDatepickerView,
+  dateFormat?: string,
+  amPm?: boolean,
+}>(
+  configuration: C,
+): {
+    currentView: Ref<TDatepickerView>
+    initView: () => void
+    setCurrentView: (view: TDatepickerView) => void
+  } {
+  const getInitialView = (): TDatepickerView => configuration.initialView!;
+
+  const currentView = ref<TDatepickerView>(getInitialView());
+
+  const setCurrentView = (view: TDatepickerView) => {
+    currentView.value = view;
+  };
+
+  const initView = () => {
+    setCurrentView(getInitialView());
+  };
+
+  return {
+    currentView,
+    initView,
+    setCurrentView,
+  };
+}

From e1687fd449b68f6b265eb3fad86f65adcc1f2fea Mon Sep 17 00:00:00 2001
From: Alfonso Bribiesca <alfonsobries@gmail.com>
Date: Fri, 18 Mar 2022 17:36:49 -0600
Subject: [PATCH 73/85] Modal was fixed

---
 src/components/TDatepicker.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 92fc838..83f217b 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -322,7 +322,6 @@ export default defineComponent({
     // - Add a clear button
     // - If users type a date and blur it should reset the v-model date
     // - Inside the dropdown refactor to reuse the dropdown view (recently duplciated with the teleport fix)
-    // - Not related to this component but passing from the modal page creates a `enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices`
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
 

From f6b140dcc5f26a58c39b22e30d59ad229510e778 Mon Sep 17 00:00:00 2001
From: Alfonso Bribiesca <alfonsobries@gmail.com>
Date: Fri, 18 Mar 2022 18:21:03 -0600
Subject: [PATCH 74/85] Refactor more of the calendar logic to use statements

---
 src/components/TDatepicker.vue              | 47 ++-------------------
 src/use/datepicker/index.ts                 |  8 ++++
 src/use/{ => datepicker}/useActiveDate.ts   |  0
 src/use/datepicker/useCalendarState.ts      | 26 ++++++++++++
 src/use/{ => datepicker}/useCalendarView.ts |  0
 src/use/datepicker/useDateFormatting.ts     | 40 ++++++++++++++++++
 src/use/datepicker/useDateParsing.ts        | 11 +++++
 src/use/{ => datepicker}/useSelectedDate.ts |  0
 8 files changed, 89 insertions(+), 43 deletions(-)
 create mode 100644 src/use/datepicker/index.ts
 rename src/use/{ => datepicker}/useActiveDate.ts (100%)
 create mode 100644 src/use/datepicker/useCalendarState.ts
 rename src/use/{ => datepicker}/useCalendarView.ts (100%)
 create mode 100644 src/use/datepicker/useDateFormatting.ts
 create mode 100644 src/use/datepicker/useDateParsing.ts
 rename src/use/{ => datepicker}/useSelectedDate.ts (100%)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 83f217b..7913fe8 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -106,10 +106,7 @@ import {
   DateConditions,
   DateFormatter,
   DateParser,
-  buildDateParser,
   DateLocale,
-  buildDateFormatter,
-  dateEnglishLocale,
   addYears,
   addMonths,
   addDays,
@@ -119,9 +116,7 @@ import {
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
-import useSelectedDate from '../use/useSelectedDate';
-import useActiveDate from '../use/useActiveDate';
-import useCalendarView from '../use/useCalendarView';
+import { useSelectedDate, useActiveDate, useCalendarView, useDateFormatting, useDateParsing, useCalendarState } from '../use/datepicker';
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
 import { TDatepickerOptions, TDatepickerValue } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
@@ -324,26 +319,13 @@ export default defineComponent({
     // - Inside the dropdown refactor to reuse the dropdown view (recently duplciated with the teleport fix)
     
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
-
-    const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
-
+    const { parseDate } = useDateParsing(configuration);
     const { selectedDate, setSelectedDate, getInitialSelectedDate, getSelectDayFromSelection, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
+    const { formatDate, formattedDate, userFormattedDate } = useDateFormatting(configuration, selectedDate);
     const { activeDate, activeDateIsVisible, initActiveDate, setActiveDate, hideActiveDate, showActiveDate } = useActiveDate(configuration, selectedDate, parseDate);
     const { currentView, initView, setCurrentView } = useCalendarView(configuration);
-
-    const shown = ref<boolean>(configuration.show!);
-    
-    const formatDate = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
+    const { shown, isMultiple, isDropdownClosed, isDropdownOpened } = useCalendarState(configuration);
     
-    const isMultiple = computed<boolean>(() => !! (configuration.multiple || configuration.range));
-    const isDropdownClosed = computed<boolean>(() => shown.value === false);
-    const isDropdownOpened = computed<boolean>(() => !isDropdownClosed.value);
-    
-    const dateRangeSeparator = computed<string>(() => {
-      return (configuration.locale || dateEnglishLocale).rangeSeparator || dateEnglishLocale.rangeSeparator;
-    });
-
-
     const initAllViewData = () => {
       initView();
       initActiveDate();
@@ -354,21 +336,6 @@ export default defineComponent({
       setSelectedDate(getInitialSelectedDate(value));
     });
     
-    const formattedDate = computed<string | string[]>(() => {
-      return Array.isArray(selectedDate.value) 
-        ? selectedDate.value.map((dateItem) => formatDate.value(dateItem, configuration.dateFormat))
-        : formatDate.value(selectedDate.value, configuration.dateFormat);
-    });
-
-    const userFormattedDate = computed<string>(() => {
-      return Array.isArray(selectedDate.value) 
-        ? selectedDate.value
-          .map((dateItem) => formatDate.value(dateItem, configuration.userFormat))
-          // @TODO: Date separator comes from the configuration
-          .join(configuration.range ? dateRangeSeparator.value : ', ')
-        : formatDate.value(selectedDate.value, configuration.userFormat);
-    });
-
     const doHide = async () => {
       shown.value = false;
     };
@@ -447,12 +414,6 @@ export default defineComponent({
       selectDay(activeDate.value);
     };
 
-    // const isDateSelectionComplete = computed<boolean>(() => {
-    //   if (configuration.range) {
-    //     return Array.isArray(selectedDate.value) && selectedDate.value.length === 2;
-    //   }
-    // });
-
     const clickHandler = (e: KeyboardEvent | MouseEvent) => {
       const input = e.target as (HTMLInputElement | HTMLButtonElement | undefined);
 
diff --git a/src/use/datepicker/index.ts b/src/use/datepicker/index.ts
new file mode 100644
index 0000000..c57cdcf
--- /dev/null
+++ b/src/use/datepicker/index.ts
@@ -0,0 +1,8 @@
+import useActiveDate from './useActiveDate';
+import useCalendarView from './useCalendarView';
+import useSelectedDate from './useSelectedDate';
+import useDateFormatting from './useDateFormatting';
+import useDateParsing from './useDateParsing';
+import useCalendarState from './useCalendarState';
+
+export { useActiveDate, useCalendarView, useSelectedDate, useDateFormatting, useDateParsing, useCalendarState }; 
\ No newline at end of file
diff --git a/src/use/useActiveDate.ts b/src/use/datepicker/useActiveDate.ts
similarity index 100%
rename from src/use/useActiveDate.ts
rename to src/use/datepicker/useActiveDate.ts
diff --git a/src/use/datepicker/useCalendarState.ts b/src/use/datepicker/useCalendarState.ts
new file mode 100644
index 0000000..a65e144
--- /dev/null
+++ b/src/use/datepicker/useCalendarState.ts
@@ -0,0 +1,26 @@
+import { computed, ComputedRef, ref, Ref } from 'vue';
+import { TDatepickerOptions } from '../../types';
+
+export default function useCalendarState<C extends Pick<TDatepickerOptions, 'show' | 'multiple' | 'range'>>(
+  configuration: C,
+): {
+    shown: Ref<boolean>,
+    isMultiple: ComputedRef<boolean>,
+    isDropdownClosed: ComputedRef<boolean>,
+    isDropdownOpened: ComputedRef<boolean>,    
+  } {
+  const shown = ref<boolean>(configuration.show!);
+
+  const isMultiple = computed<boolean>(() => !! (configuration.multiple || configuration.range));
+
+  const isDropdownClosed = computed<boolean>(() => shown.value === false);
+    
+  const isDropdownOpened = computed<boolean>(() => !isDropdownClosed.value);
+
+  return {
+    shown,
+    isMultiple,
+    isDropdownClosed,
+    isDropdownOpened,    
+  };
+}
diff --git a/src/use/useCalendarView.ts b/src/use/datepicker/useCalendarView.ts
similarity index 100%
rename from src/use/useCalendarView.ts
rename to src/use/datepicker/useCalendarView.ts
diff --git a/src/use/datepicker/useDateFormatting.ts b/src/use/datepicker/useDateFormatting.ts
new file mode 100644
index 0000000..80f013d
--- /dev/null
+++ b/src/use/datepicker/useDateFormatting.ts
@@ -0,0 +1,40 @@
+import { buildDateFormatter, DateFormatter, dateEnglishLocale } from '@variantjs/core';
+import { computed, ComputedRef, Ref } from 'vue';
+import { TDatepickerOptions } from '../../types';
+
+export default function useDateFormatting<C extends Pick<TDatepickerOptions, 'locale' | 'dateFormatter' | 'dateFormat' | 'userFormat' | 'range' | 'dateParser'>>(
+  configuration: C,
+  selectedDate: Ref<Date | Date[] | undefined>,
+): {
+    formatDate: ComputedRef<DateFormatter>,
+    formattedDate: ComputedRef<string | string[]>,
+    userFormattedDate: ComputedRef<string>,
+  } {
+
+  const formatDate = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
+
+  const dateRangeSeparator = computed<string>(() => {
+    return (configuration.locale || dateEnglishLocale).rangeSeparator || dateEnglishLocale.rangeSeparator;
+  });
+
+  const formattedDate = computed<string | string[]>(() => {
+    return Array.isArray(selectedDate.value) 
+      ? selectedDate.value.map((dateItem) => formatDate.value(dateItem, configuration.dateFormat))
+      : formatDate.value(selectedDate.value, configuration.dateFormat);
+  });
+
+  const userFormattedDate = computed<string>(() => {
+    return Array.isArray(selectedDate.value) 
+      ? selectedDate.value
+        .map((dateItem) => formatDate.value(dateItem, configuration.userFormat))
+      // @TODO: Date separator comes from the configuration
+        .join(configuration.range ? dateRangeSeparator.value : ', ')
+      : formatDate.value(selectedDate.value, configuration.userFormat);
+  });
+
+  return {
+    formatDate,
+    formattedDate,
+    userFormattedDate,    
+  };
+}
diff --git a/src/use/datepicker/useDateParsing.ts b/src/use/datepicker/useDateParsing.ts
new file mode 100644
index 0000000..d726dde
--- /dev/null
+++ b/src/use/datepicker/useDateParsing.ts
@@ -0,0 +1,11 @@
+import { dateEnglishLocale, DateParser, buildDateParser } from '@variantjs/core';
+import { computed, ComputedRef } from 'vue';
+import { TDatepickerOptions } from '../../types';
+
+export default function useDateParsing<C extends Pick<TDatepickerOptions, 'locale' | 'dateParser'>>(configuration: C): {
+  parseDate: ComputedRef<DateParser>,
+} {
+  const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
+
+  return { parseDate };
+}
diff --git a/src/use/useSelectedDate.ts b/src/use/datepicker/useSelectedDate.ts
similarity index 100%
rename from src/use/useSelectedDate.ts
rename to src/use/datepicker/useSelectedDate.ts

From d16e7eeb33bd2d5954055ab2d2a01455ad37ae7b Mon Sep 17 00:00:00 2001
From: Alfonso Bribiesca <alfonsobries@gmail.com>
Date: Fri, 18 Mar 2022 18:24:39 -0600
Subject: [PATCH 75/85] Cleanup typing

---
 src/use/datepicker/useActiveDate.ts     | 8 ++------
 src/use/datepicker/useCalendarState.ts  | 2 +-
 src/use/datepicker/useCalendarView.ts   | 8 ++------
 src/use/datepicker/useDateFormatting.ts | 2 +-
 src/use/datepicker/useDateParsing.ts    | 2 +-
 src/use/datepicker/useSelectedDate.ts   | 8 ++------
 6 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/use/datepicker/useActiveDate.ts b/src/use/datepicker/useActiveDate.ts
index 33f8f01..8f047e6 100644
--- a/src/use/datepicker/useActiveDate.ts
+++ b/src/use/datepicker/useActiveDate.ts
@@ -1,12 +1,8 @@
 import { dateIsValid, DateParser } from '@variantjs/core';
 import { ComputedRef, Ref, ref } from 'vue';
-import { TDatepickerSingleValue } from '../types/components/t-datepicker';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
-export default function useActiveDate<C extends {
-  initialTime?: TDatepickerSingleValue,
-  dateFormat?: string,
-  amPm?: boolean,
-}>(
+export default function useActiveDate<C extends Pick<TDatepickerOptions, 'initialTime' | 'dateFormat' | 'amPm'>>(
   configuration: C,
   selectedDate: Ref<Date | Date[] | undefined>,
   parseDate: ComputedRef<DateParser>,
diff --git a/src/use/datepicker/useCalendarState.ts b/src/use/datepicker/useCalendarState.ts
index a65e144..c0d7023 100644
--- a/src/use/datepicker/useCalendarState.ts
+++ b/src/use/datepicker/useCalendarState.ts
@@ -1,5 +1,5 @@
 import { computed, ComputedRef, ref, Ref } from 'vue';
-import { TDatepickerOptions } from '../../types';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
 export default function useCalendarState<C extends Pick<TDatepickerOptions, 'show' | 'multiple' | 'range'>>(
   configuration: C,
diff --git a/src/use/datepicker/useCalendarView.ts b/src/use/datepicker/useCalendarView.ts
index 71908f6..aa916b2 100644
--- a/src/use/datepicker/useCalendarView.ts
+++ b/src/use/datepicker/useCalendarView.ts
@@ -1,11 +1,7 @@
 import { Ref, ref } from 'vue';
-import { TDatepickerView } from '../types/components/t-datepicker';
+import { TDatepickerView, TDatepickerOptions } from '../../types/components/t-datepicker';
 
-export default function useCalendarView<C extends {
-  initialView?: TDatepickerView,
-  dateFormat?: string,
-  amPm?: boolean,
-}>(
+export default function useCalendarView<C extends Pick<TDatepickerOptions, 'initialView' | 'dateFormat' | 'amPm'>>(
   configuration: C,
 ): {
     currentView: Ref<TDatepickerView>
diff --git a/src/use/datepicker/useDateFormatting.ts b/src/use/datepicker/useDateFormatting.ts
index 80f013d..72bba31 100644
--- a/src/use/datepicker/useDateFormatting.ts
+++ b/src/use/datepicker/useDateFormatting.ts
@@ -1,6 +1,6 @@
 import { buildDateFormatter, DateFormatter, dateEnglishLocale } from '@variantjs/core';
 import { computed, ComputedRef, Ref } from 'vue';
-import { TDatepickerOptions } from '../../types';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
 export default function useDateFormatting<C extends Pick<TDatepickerOptions, 'locale' | 'dateFormatter' | 'dateFormat' | 'userFormat' | 'range' | 'dateParser'>>(
   configuration: C,
diff --git a/src/use/datepicker/useDateParsing.ts b/src/use/datepicker/useDateParsing.ts
index d726dde..b3954aa 100644
--- a/src/use/datepicker/useDateParsing.ts
+++ b/src/use/datepicker/useDateParsing.ts
@@ -1,6 +1,6 @@
 import { dateEnglishLocale, DateParser, buildDateParser } from '@variantjs/core';
 import { computed, ComputedRef } from 'vue';
-import { TDatepickerOptions } from '../../types';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
 export default function useDateParsing<C extends Pick<TDatepickerOptions, 'locale' | 'dateParser'>>(configuration: C): {
   parseDate: ComputedRef<DateParser>,
diff --git a/src/use/datepicker/useSelectedDate.ts b/src/use/datepicker/useSelectedDate.ts
index 58e3657..f871010 100644
--- a/src/use/datepicker/useSelectedDate.ts
+++ b/src/use/datepicker/useSelectedDate.ts
@@ -1,14 +1,10 @@
 import { dateIsValid, DateParser, diffInDays, isSameDay } from '@variantjs/core';
 import { computed, ComputedRef, Ref, ref } from 'vue';
-import { TDatepickerValue } from '../types';
+import { TDatepickerOptions, TDatepickerValue } from '../../types/components/t-datepicker';
 
 export default function useSelectedDate<P extends {
   modelValue?: TDatepickerValue, 
-}, C extends {
-  multiple?: boolean,
-  range?: boolean,
-  dateFormat?: string,
-}>(
+}, C extends Pick<TDatepickerOptions, 'multiple' | 'range' | 'dateFormat'>>(
   props: P,
   configuration: C,
   parseDate: ComputedRef<DateParser>,

From b66209c8878e0377bd20a14316083e4af1c6068a Mon Sep 17 00:00:00 2001
From: Alfonso Bribiesca <alfonsobries@gmail.com>
Date: Fri, 18 Mar 2022 18:26:43 -0600
Subject: [PATCH 76/85] Move more stuff to use

---
 src/components/TDatepicker.vue         | 10 +---------
 src/use/datepicker/useCalendarState.ts | 13 +++++++++++++
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 7913fe8..f39b600 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -324,7 +324,7 @@ export default defineComponent({
     const { formatDate, formattedDate, userFormattedDate } = useDateFormatting(configuration, selectedDate);
     const { activeDate, activeDateIsVisible, initActiveDate, setActiveDate, hideActiveDate, showActiveDate } = useActiveDate(configuration, selectedDate, parseDate);
     const { currentView, initView, setCurrentView } = useCalendarView(configuration);
-    const { shown, isMultiple, isDropdownClosed, isDropdownOpened } = useCalendarState(configuration);
+    const { shown, doShow, doHide, isMultiple, isDropdownClosed, isDropdownOpened } = useCalendarState(configuration);
     
     const initAllViewData = () => {
       initView();
@@ -335,14 +335,6 @@ export default defineComponent({
     watch(() => props.modelValue, (value: TDatepickerValue) => {
       setSelectedDate(getInitialSelectedDate(value));
     });
-    
-    const doHide = async () => {
-      shown.value = false;
-    };
-
-    const doShow = async () => {
-      shown.value = true;
-    };
 
     watch(shown, () => {
       emit('update:show', shown.value);
diff --git a/src/use/datepicker/useCalendarState.ts b/src/use/datepicker/useCalendarState.ts
index c0d7023..92b1c82 100644
--- a/src/use/datepicker/useCalendarState.ts
+++ b/src/use/datepicker/useCalendarState.ts
@@ -8,6 +8,8 @@ export default function useCalendarState<C extends Pick<TDatepickerOptions, 'sho
     isMultiple: ComputedRef<boolean>,
     isDropdownClosed: ComputedRef<boolean>,
     isDropdownOpened: ComputedRef<boolean>,    
+    doShow: () => void,
+    doHide: () => void,
   } {
   const shown = ref<boolean>(configuration.show!);
 
@@ -17,8 +19,19 @@ export default function useCalendarState<C extends Pick<TDatepickerOptions, 'sho
     
   const isDropdownOpened = computed<boolean>(() => !isDropdownClosed.value);
 
+  const doHide = () => {
+    shown.value = false;
+  };
+
+  const doShow = () => {
+    shown.value = true;
+  };
+
+
   return {
     shown,
+    doHide,
+    doShow,
     isMultiple,
     isDropdownClosed,
     isDropdownOpened,    

From ebe4a11e1f59cb82d843fb583477bf90193a9c85 Mon Sep 17 00:00:00 2001
From: Alfonso Bribiesca <alfonsobries@gmail.com>
Date: Fri, 18 Mar 2022 18:44:19 -0600
Subject: [PATCH 77/85] More cleanup for date selection

---
 src/components/TDatepicker.vue                | 91 +++++++++----------
 .../TDatepicker/DatepickerViewMonthDay.vue    |  4 +-
 src/use/datepicker/useSelectedDate.ts         | 29 +++++-
 3 files changed, 68 insertions(+), 56 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index f39b600..6160af2 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -91,9 +91,7 @@
 import {
   defineComponent,
   PropType,
-  ref,
   provide,
-  computed,
   watch,
   InputHTMLAttributes,
 } from 'vue';
@@ -112,7 +110,6 @@ import {
   addDays,
   Data,
   WeekDay,
-  dayIsPartOfTheConditions,
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
@@ -317,10 +314,9 @@ export default defineComponent({
     // - Add a clear button
     // - If users type a date and blur it should reset the v-model date
     // - Inside the dropdown refactor to reuse the dropdown view (recently duplciated with the teleport fix)
-    
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
     const { parseDate } = useDateParsing(configuration);
-    const { selectedDate, setSelectedDate, getInitialSelectedDate, getSelectDayFromSelection, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
+    const { selectDate, selectedDate, setSelectedDate, getInitialSelectedDate, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
     const { formatDate, formattedDate, userFormattedDate } = useDateFormatting(configuration, selectedDate);
     const { activeDate, activeDateIsVisible, initActiveDate, setActiveDate, hideActiveDate, showActiveDate } = useActiveDate(configuration, selectedDate, parseDate);
     const { currentView, initView, setCurrentView } = useCalendarView(configuration);
@@ -344,25 +340,34 @@ export default defineComponent({
       shown.value = configuration.show!;
     });
 
-    const selectDay = (day: Date) => {
-      const dayIsDisabled: boolean = dayIsPartOfTheConditions(
-        day,
-        configuration.disabledDates,
-        parseDate.value,
-        configuration.dateFormat,
-      );
 
-      if (dayIsDisabled) {
+    // Note about `selectMonth` and `selectYear` methods:
+    // In most cases selecting a month or year only changes the active date which
+    // means it doesnt trigger an input event (since day still needs to be selected).
+    // In the future we may consider allowing the user to select only month and/or
+    // year which means we should also handle the input event
+    const selectMonth = (month: Date) => {
+      setActiveDate(month);
+
+      setCurrentView(TDatepickerView.Day);
+    };
+
+    const selectYear = (year: Date) => {
+      setActiveDate(year);
+
+      setCurrentView(TDatepickerView.Month);
+    };
+
+    const updateSelectedDate = (date: Date) => {
+      const newSelectedDate = selectDate(date);
+
+      if (newSelectedDate === undefined) {
         return;
       }
-      
-      const newSelectedDate = getSelectDayFromSelection(day);
 
-      hideActiveDate();
-     
-      setActiveDate(day);
+      setActiveDate(date);
 
-      setSelectedDate(newSelectedDate);
+      hideActiveDate();
       
       if (configuration.range && !(Array.isArray(newSelectedDate) && newSelectedDate.length === 2)) {
         return;
@@ -385,27 +390,12 @@ export default defineComponent({
       }
     };
 
-    // Note about `selectMonth` and `selectYear` methods:
-    // In most cases selecting a month or year only changes the active date which
-    // means it doesnt trigger an input event (since day still needs to be selected).
-    // In the future we may consider allowing the user to select only month and/or
-    // year which means we should also handle the input event
-    const selectMonth = (month: Date) => {
-      setActiveDate(month);
-
-      setCurrentView(TDatepickerView.Day);
-    };
-
-    const selectYear = (year: Date) => {
-      setActiveDate(year);
-
-      setCurrentView(TDatepickerView.Month);
-    };
 
     const selectActiveDate = () => {
-      selectDay(activeDate.value);
+      updateSelectedDate(activeDate.value);
     };
 
+    // Handlers
     const clickHandler = (e: KeyboardEvent | MouseEvent) => {
       const input = e.target as (HTMLInputElement | HTMLButtonElement | undefined);
 
@@ -492,6 +482,21 @@ export default defineComponent({
       showActiveDate();
     };
 
+    const userInputHandler = (e: Event) => {
+      const input = e.target as HTMLInputElement;
+      
+      const parsedDate = parseDate.value(input.value, configuration.userFormat);
+      
+      if (parsedDate !== undefined) {
+        showActiveDate();
+        
+        setActiveDate(parsedDate);
+      }
+    };
+
+    /**
+     * Dropdown state handlers
+     */
     const beforeShowHandler = () => {
       initAllViewData();
     };
@@ -512,18 +517,6 @@ export default defineComponent({
       // TBD
     };
 
-    const userInputHandler = (e: Event) => {
-      const input = e.target as HTMLInputElement;
-      
-      const parsedDate = parseDate.value(input.value, configuration.userFormat);
-      
-      if (parsedDate !== undefined) {
-        showActiveDate();
-        
-        setActiveDate(parsedDate);
-      }
-    };
-
     provide('activeDate', activeDate);
 
     provide('activeDateIsVisible', activeDateIsVisible);
@@ -540,7 +533,7 @@ export default defineComponent({
 
     provide('formatDate', formatDate);
     
-    provide('selectDay', selectDay);
+    provide('updateSelectedDate', updateSelectedDate);
     
     provide('selectMonth', selectMonth);
     
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index 14706a7..cbfc66c 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -47,7 +47,7 @@ export default defineComponent({
     const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
     const activeDate = inject<Ref<Date>>('activeDate')!;
     const parseDate = inject<Ref<DateParser>>('parseDate')!;
-    const selectDay = inject<(day: Date) => void>('selectDay')!;
+    const updateSelectedDate = inject<(day: Date) => void>('updateSelectedDate')!;
     const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
 
     const ariaLabel = formatDate.value(props.day, 'F d, Y');
@@ -144,7 +144,7 @@ export default defineComponent({
     });
 
     const daySelectedHandler = ()  => {
-      selectDay(props.day);
+      updateSelectedDate(props.day);
     };
 
     const showEmptyPlaceholder =  computed<boolean>(() => {
diff --git a/src/use/datepicker/useSelectedDate.ts b/src/use/datepicker/useSelectedDate.ts
index f871010..f9386ab 100644
--- a/src/use/datepicker/useSelectedDate.ts
+++ b/src/use/datepicker/useSelectedDate.ts
@@ -1,18 +1,18 @@
-import { dateIsValid, DateParser, diffInDays, isSameDay } from '@variantjs/core';
+import { dateIsValid, DateParser, dayIsPartOfTheConditions, diffInDays, isSameDay } from '@variantjs/core';
 import { computed, ComputedRef, Ref, ref } from 'vue';
 import { TDatepickerOptions, TDatepickerValue } from '../../types/components/t-datepicker';
 
 export default function useSelectedDate<P extends {
   modelValue?: TDatepickerValue, 
-}, C extends Pick<TDatepickerOptions, 'multiple' | 'range' | 'dateFormat'>>(
+}, C extends Pick<TDatepickerOptions, 'multiple' | 'range' | 'dateFormat' | 'disabledDates'>>(
   props: P,
   configuration: C,
   parseDate: ComputedRef<DateParser>,
 ): {
+    selectDate: (date: Date) => Date | Date[] | undefined,
     selectedDate: Ref<Date | Date[] | undefined>
     setSelectedDate: ((date: Date | Date[] | undefined) => void),
     getInitialSelectedDate: (fromDate: TDatepickerValue) => Date | Date[] | undefined,
-    getSelectDayFromSelection: (day: Date) => Date | Date[],
     resetRangeSelection: () => void,
   } {
   const isMultiple = computed<boolean>(() => !! (configuration.multiple || configuration.range));
@@ -35,7 +35,7 @@ export default function useSelectedDate<P extends {
 
   const selectedDate = ref<Date | Date[] | undefined>(getInitialSelectedDate(props.modelValue));
 
-  const getSelectDayFromSelection = (day: Date): Date | Date[] => {
+  const parseDateToSelect = (day: Date): Date | Date[] => {
     // If we are using multiple or range means that the day consists of an array
     // of dates
     if (isMultiple.value) {
@@ -95,11 +95,30 @@ export default function useSelectedDate<P extends {
     resetRange.value = true;
   };
 
+  const selectDate = (date: Date): Date | Date[] | undefined => {
+    const dateIsDisabled: boolean = dayIsPartOfTheConditions(
+      date,
+      configuration.disabledDates,
+      parseDate.value,
+      configuration.dateFormat,
+    );
+
+    if (dateIsDisabled) {
+      return;
+    }
+    
+    const newSelectedDate = parseDateToSelect(date);
+
+    setSelectedDate(newSelectedDate);
+
+    return newSelectedDate;
+  };
+
   return {
+    selectDate,
     selectedDate,
     setSelectedDate,
     getInitialSelectedDate,
-    getSelectDayFromSelection,
     resetRangeSelection,
   };
 }

From c0b8a4811fc956df2738b2a4ace9d9fa3fd01864 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 24 Mar 2022 18:38:28 -0600
Subject: [PATCH 78/85] Remove unused handlers

---
 src/components/TDatepicker.vue | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 6160af2..57935d1 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -20,9 +20,7 @@
     :teleport-to="configuration.teleportTo"
     @blur-on-child="blurOnChildHandler"
     @hidden="hiddenHandler"
-    @shown="shownHandler"
     @before-show="beforeShowHandler"
-    @before-hide="beforeHideHandler"
   >
     <template #trigger="{ focusHandler, blurHandler }">
       <slot
@@ -501,10 +499,6 @@ export default defineComponent({
       initAllViewData();
     };
 
-    const shownHandler = () => {
-      // TBD
-    };
-
     const hiddenHandler = () => {
       // If the range is complete we should start over again when user tries
       // to update the value
@@ -513,10 +507,6 @@ export default defineComponent({
       }      
     };
 
-    const beforeHideHandler = () => {
-      // TBD
-    };
-
     provide('activeDate', activeDate);
 
     provide('activeDateIsVisible', activeDateIsVisible);
@@ -552,9 +542,7 @@ export default defineComponent({
       clickHandler,
       keyboardNavigationHandler,
       beforeShowHandler,
-      shownHandler,
       hiddenHandler,
-      beforeHideHandler,
       userInputHandler,
       doHide,
       doShow,

From dff64a94f33f2ac7d0284ee58c046fe9df7ddb34 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Tue, 3 May 2022 19:10:56 -0500
Subject: [PATCH 79/85] use holder for date arrays

---
 src/components/TDatepicker.vue                |  70 ++++-----
 .../TDatepicker/DatepickerViewMonthDay.vue    |  34 +++--
 src/use/datepicker/useActiveDate.ts           |  16 +-
 src/use/datepicker/useCalendarState.ts        |   7 +-
 src/use/datepicker/useSelectedDate.ts         | 140 +++++++++++-------
 5 files changed, 157 insertions(+), 110 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 57935d1..956faf9 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -314,12 +314,15 @@ export default defineComponent({
     // - Inside the dropdown refactor to reuse the dropdown view (recently duplciated with the teleport fix)
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
     const { parseDate } = useDateParsing(configuration);
-    const { selectDate, selectedDate, setSelectedDate, getInitialSelectedDate, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
+    
+    const { selectedDate, selectedDateHolder, setSelectedDate, addSelectedDate, getInitialSelectedDate, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
+    const { activeDate, activeDateIsVisible, initActiveDate, setActiveDate, hideActiveDate, showActiveDate, selectActiveDate } = useActiveDate({
+      configuration, selectedDate, parseDate, addSelectedDate,
+    });
     const { formatDate, formattedDate, userFormattedDate } = useDateFormatting(configuration, selectedDate);
-    const { activeDate, activeDateIsVisible, initActiveDate, setActiveDate, hideActiveDate, showActiveDate } = useActiveDate(configuration, selectedDate, parseDate);
     const { currentView, initView, setCurrentView } = useCalendarView(configuration);
     const { shown, doShow, doHide, isMultiple, isDropdownClosed, isDropdownOpened } = useCalendarState(configuration);
-    
+
     const initAllViewData = () => {
       initView();
       initActiveDate();
@@ -338,6 +341,23 @@ export default defineComponent({
       shown.value = configuration.show!;
     });
 
+    watch(selectedDate, (newSelectedDate) => {
+      const event = new CustomEvent('input', {
+        detail: {
+          value: formattedDate.value,
+          formattedDate: userFormattedDate.value,
+          date: newSelectedDate,
+        },
+      });
+      
+      emit('change', event);
+      emit('input', event);
+      emit('update:modelValue', formattedDate.value);      
+
+      if (configuration.closeOnSelect && isDropdownOpened.value) {
+        doHide();
+      }
+    });
 
     // Note about `selectMonth` and `selectYear` methods:
     // In most cases selecting a month or year only changes the active date which
@@ -356,43 +376,13 @@ export default defineComponent({
       setCurrentView(TDatepickerView.Month);
     };
 
-    const updateSelectedDate = (date: Date) => {
-      const newSelectedDate = selectDate(date);
-
-      if (newSelectedDate === undefined) {
-        return;
-      }
+    const selectDate = (date: Date) => {
+      addSelectedDate(date);
 
       setActiveDate(date);
-
-      hideActiveDate();
-      
-      if (configuration.range && !(Array.isArray(newSelectedDate) && newSelectedDate.length === 2)) {
-        return;
-      }
-
-      const event = new CustomEvent('input', {
-        detail: {
-          value: formattedDate.value,
-          formattedDate: userFormattedDate.value,
-          date: newSelectedDate,
-        },
-      });
-      
-      emit('change', event);
-      emit('input', event);
-      emit('update:modelValue', formattedDate.value);      
-
-      if (configuration.closeOnSelect && isDropdownOpened.value) {
-        doHide();
-      }
     };
 
 
-    const selectActiveDate = () => {
-      updateSelectedDate(activeDate.value);
-    };
-
     // Handlers
     const clickHandler = (e: KeyboardEvent | MouseEvent) => {
       const input = e.target as (HTMLInputElement | HTMLButtonElement | undefined);
@@ -402,9 +392,7 @@ export default defineComponent({
         const parsedDate = input && input.value ? parseDate.value(input.value, configuration.userFormat) : undefined;
 
         if (parsedDate !== undefined) {
-          setActiveDate(parsedDate);
-
-          selectActiveDate();
+          addSelectedDate(parsedDate);
         }
       }
 
@@ -510,11 +498,11 @@ export default defineComponent({
     provide('activeDate', activeDate);
 
     provide('activeDateIsVisible', activeDateIsVisible);
+    
+    provide('selectedDateHolder', selectedDateHolder);
 
     provide('selectedDate', selectedDate);
     
-    provide('setSelectedDate', setSelectedDate);
-    
     provide('setActiveDate', setActiveDate);
     
     provide('configuration', configuration);
@@ -523,7 +511,7 @@ export default defineComponent({
 
     provide('formatDate', formatDate);
     
-    provide('updateSelectedDate', updateSelectedDate);
+    provide('selectDate', selectDate);
     
     provide('selectMonth', selectMonth);
     
diff --git a/src/components/TDatepicker/DatepickerViewMonthDay.vue b/src/components/TDatepicker/DatepickerViewMonthDay.vue
index cbfc66c..0a34dda 100644
--- a/src/components/TDatepicker/DatepickerViewMonthDay.vue
+++ b/src/components/TDatepicker/DatepickerViewMonthDay.vue
@@ -45,9 +45,10 @@ export default defineComponent({
     const configuration = inject<TDatepickerOptions>('configuration')!;
     const activeDateIsVisible = inject<Ref<boolean>>('activeDateIsVisible')!;
     const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
+    const selectedDateHolder = inject<Ref<Date | Date[]>>('selectedDateHolder')!;
     const activeDate = inject<Ref<Date>>('activeDate')!;
     const parseDate = inject<Ref<DateParser>>('parseDate')!;
-    const updateSelectedDate = inject<(day: Date) => void>('updateSelectedDate')!;
+    const selectDate = inject<(day: Date) => void>('selectDate')!;
     const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
 
     const ariaLabel = formatDate.value(props.day, 'F d, Y');
@@ -58,35 +59,44 @@ export default defineComponent({
         || props.day.getMonth() !== props.month.getMonth());
 
     const isFirstDayOfRange = computed<boolean>(() => {
-      if (!configuration.range! || !Array.isArray(selectedDate.value)) {
+      if (!configuration.range! || !Array.isArray(selectedDateHolder.value)) {
         return false;
       }
-      const [from] = selectedDate.value;
+      const [from] = selectedDateHolder.value;
       return from && isSameDay(from, props.day);
     });
 
     const isLastDayOfRange = computed<boolean>(() => {
-      if (!configuration.range! || !Array.isArray(selectedDate.value)) {
+      if (!configuration.range! || !Array.isArray(selectedDateHolder.value)) {
         return false;
       }
-      const [, to] = selectedDate.value;
+      const [, to] = selectedDateHolder.value;
       return to && isSameDay(to, props.day);
     });
 
     const isInRange = computed<boolean>(() => {
-      if (!configuration.range! || !Array.isArray(selectedDate.value)) {
+      if (!configuration.range! || !Array.isArray(selectedDateHolder.value)) {
         return false;
       }
-      const [from, to] = selectedDate.value;
+      const [from, to] = selectedDateHolder.value;
       return from && to && dateIsPartOfTheRange(props.day, from, to);
     });
 
     const isSelected = computed<boolean>(() => {
+      if (configuration.range) {
+        return false;
+      }
+
       if (Array.isArray(selectedDate.value)) {
-        return selectedDate.value.some((date) => isSameDay(date, props.day));
+        if (selectedDate.value.some((date) => isSameDay(date, props.day))) {
+          return true;
+        }
+      } else if (isSameDay(selectedDate.value, props.day)) {
+        return true;
       }
 
-      return isSameDay(selectedDate.value, props.day);
+      // Show dates in the temporal holder as selected
+      return Array.isArray(selectedDateHolder.value) && selectedDateHolder.value.some((date) => isSameDay(date, props.day));
     });
 
     const isHighlighted = computed<boolean>(() => dayIsPartOfTheConditions(
@@ -105,7 +115,9 @@ export default defineComponent({
 
     const isToday = computed<boolean>(() => isSameDay(props.day, new Date()));
 
-    const isActive = computed<boolean>(() => isSameDay(activeDate.value, props.day));
+    const isActive = computed<boolean>(() => {
+      return isSameDay(activeDate.value, props.day);
+    });
 
     const buttonClass = computed(() => {
       if (isFirstDayOfRange.value) {
@@ -144,7 +156,7 @@ export default defineComponent({
     });
 
     const daySelectedHandler = ()  => {
-      updateSelectedDate(props.day);
+      selectDate(props.day);
     };
 
     const showEmptyPlaceholder =  computed<boolean>(() => {
diff --git a/src/use/datepicker/useActiveDate.ts b/src/use/datepicker/useActiveDate.ts
index 8f047e6..543a495 100644
--- a/src/use/datepicker/useActiveDate.ts
+++ b/src/use/datepicker/useActiveDate.ts
@@ -2,10 +2,18 @@ import { dateIsValid, DateParser } from '@variantjs/core';
 import { ComputedRef, Ref, ref } from 'vue';
 import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
-export default function useActiveDate<C extends Pick<TDatepickerOptions, 'initialTime' | 'dateFormat' | 'amPm'>>(
+export default function useActiveDate<C extends Pick<TDatepickerOptions, 'initialTime' | 'dateFormat' | 'amPm'>>({
+  configuration,
+  selectedDate,
+  parseDate,
+  addSelectedDate,
+}: {
   configuration: C,
   selectedDate: Ref<Date | Date[] | undefined>,
+  addSelectedDate: (date: Date) => void,
   parseDate: ComputedRef<DateParser>,
+},
+  
 ): {
     activeDate: Ref<Date>
     activeDateIsVisible: Ref<boolean>
@@ -13,6 +21,7 @@ export default function useActiveDate<C extends Pick<TDatepickerOptions, 'initia
     initActiveDate: () => void,
     hideActiveDate: () => void,
     showActiveDate: () => void,
+    selectActiveDate: () => void,
   } {
   // The active date is usually hidden but shown when navigating with the keyboard
   const activeDateIsVisible = ref<boolean>(false);
@@ -65,6 +74,10 @@ export default function useActiveDate<C extends Pick<TDatepickerOptions, 'initia
     activeDateIsVisible.value = true;
   };
 
+  const selectActiveDate = () => {
+    addSelectedDate(activeDate.value);
+  };
+
   return {
     activeDate,
     activeDateIsVisible,
@@ -72,5 +85,6 @@ export default function useActiveDate<C extends Pick<TDatepickerOptions, 'initia
     initActiveDate,
     hideActiveDate,
     showActiveDate,
+    selectActiveDate,
   };
 }
diff --git a/src/use/datepicker/useCalendarState.ts b/src/use/datepicker/useCalendarState.ts
index 92b1c82..fa3a64e 100644
--- a/src/use/datepicker/useCalendarState.ts
+++ b/src/use/datepicker/useCalendarState.ts
@@ -6,6 +6,7 @@ export default function useCalendarState<C extends Pick<TDatepickerOptions, 'sho
 ): {
     shown: Ref<boolean>,
     isMultiple: ComputedRef<boolean>,
+    isRange: ComputedRef<boolean>,
     isDropdownClosed: ComputedRef<boolean>,
     isDropdownOpened: ComputedRef<boolean>,    
     doShow: () => void,
@@ -13,7 +14,9 @@ export default function useCalendarState<C extends Pick<TDatepickerOptions, 'sho
   } {
   const shown = ref<boolean>(configuration.show!);
 
-  const isMultiple = computed<boolean>(() => !! (configuration.multiple || configuration.range));
+  const isRange = computed<boolean>(() => !! configuration.range);
+
+  const isMultiple = computed<boolean>(() => !! (configuration.multiple || isRange.value));
 
   const isDropdownClosed = computed<boolean>(() => shown.value === false);
     
@@ -27,12 +30,12 @@ export default function useCalendarState<C extends Pick<TDatepickerOptions, 'sho
     shown.value = true;
   };
 
-
   return {
     shown,
     doHide,
     doShow,
     isMultiple,
+    isRange,
     isDropdownClosed,
     isDropdownOpened,    
   };
diff --git a/src/use/datepicker/useSelectedDate.ts b/src/use/datepicker/useSelectedDate.ts
index f9386ab..a972efa 100644
--- a/src/use/datepicker/useSelectedDate.ts
+++ b/src/use/datepicker/useSelectedDate.ts
@@ -1,6 +1,7 @@
 import { dateIsValid, DateParser, dayIsPartOfTheConditions, diffInDays, isSameDay } from '@variantjs/core';
-import { computed, ComputedRef, Ref, ref } from 'vue';
+import { ComputedRef, Ref, ref, watch } from 'vue';
 import { TDatepickerOptions, TDatepickerValue } from '../../types/components/t-datepicker';
+import useCalendarState from './useCalendarState';
 
 export default function useSelectedDate<P extends {
   modelValue?: TDatepickerValue, 
@@ -9,15 +10,15 @@ export default function useSelectedDate<P extends {
   configuration: C,
   parseDate: ComputedRef<DateParser>,
 ): {
-    selectDate: (date: Date) => Date | Date[] | undefined,
     selectedDate: Ref<Date | Date[] | undefined>
+    selectedDateHolder: Ref<Date | Date[] | undefined>
     setSelectedDate: ((date: Date | Date[] | undefined) => void),
+    addSelectedDate: (date: Date) => void,
     getInitialSelectedDate: (fromDate: TDatepickerValue) => Date | Date[] | undefined,
     resetRangeSelection: () => void,
   } {
-  const isMultiple = computed<boolean>(() => !! (configuration.multiple || configuration.range));
-  const resetRange = ref<boolean>(false);
-
+  const { isMultiple, isRange } = useCalendarState(configuration);
+  
   const getInitialSelectedDate = (fromDate: TDatepickerValue): Date | Date[] | undefined => {
     let selectedDate: Date | undefined | Date[] = isMultiple.value ? [] : undefined;
 
@@ -33,69 +34,83 @@ export default function useSelectedDate<P extends {
     return selectedDate;
   };
 
+  const resetRange = ref<boolean>(false);
   const selectedDate = ref<Date | Date[] | undefined>(getInitialSelectedDate(props.modelValue));
+  
+  const selectedDateHolder = ref<Date | Date[] | undefined>(selectedDate.value);
 
-  const parseDateToSelect = (day: Date): Date | Date[] => {
-    // If we are using multiple or range means that the day consists of an array
-    // of dates
-    if (isMultiple.value) {
-      // If not array or is empty initialize it with with the selected date
-      if (!Array.isArray(selectedDate.value) || selectedDate.value.length === 0) {
-        return [day];
+  const setSelectedDate = (date: Date | Date[] | undefined) => {
+    if (Array.isArray(date)) {
+      if (date.some((value) => !dateIsValid(value))) {
+        return;
       }
+    } else if (!dateIsValid(date)) {
+      return;
+    }
 
-      // The ranges consists in a tuple of dates, we should fill the first 
-      // or the second element depending of the current state of the selection
-      if (configuration.range) {
-        // If the new day is before than the first element of the range we need
-        // to reinitialize the range
-        if (resetRange.value || diffInDays(selectedDate.value[0], day) < 0) {
-          if (resetRange.value) {
-            resetRange.value = false;
-          }
-
-          return [day];
-        }
+    selectedDate.value = date;
+  };
 
-        // If the range is already full we are going to replace the second date
-        if (selectedDate.value.length === 2) {
-          return [selectedDate.value[0], day];
-        }
-          
-        // Otherwise just add the new day to the range
-        return [...selectedDate.value, day];
-      }
+  const parseDateForMultipleState = (date: Date): Date[] => {
+    // If not array or is empty initialize it with with the selected date
+    if (!Array.isArray(selectedDateHolder.value) || selectedDateHolder.value.length === 0) {
+      return [date];
+    }
 
-      if (configuration.multiple) {
-        // If already selected, remove it
-        if (selectedDate.value.some(date => isSameDay(date, day))) {
-          return selectedDate.value.filter((date) => ! isSameDay(date, day));
+    // The ranges consists in a tuple of dates, we should fill the first 
+    // or the second element depending of the current state of the selection
+    if (isRange.value) {
+      // If the new day is before than the first element of the range we need
+      // to reinitialize the range
+      if (resetRange.value || diffInDays(selectedDateHolder.value[0], date) < 0) {
+        if (resetRange.value) {
+          resetRange.value = false;
         }
 
-        return [...selectedDate.value, day];
+        return [date];
       }
+
+      // If the range is already full we are going to replace the second date
+      if (selectedDateHolder.value.length === 2) {
+        return [selectedDateHolder.value[0], date];
+      }
+        
+      // Otherwise just add the new day to the range
+      return [...selectedDateHolder.value, date];
+    }
+
+    // Case is multiple and not range
+    // If already selected, remove it
+    if (selectedDateHolder.value.some(dateItem => isSameDay(dateItem, date))) {
+      return selectedDateHolder.value.filter((dateItem) => ! isSameDay(dateItem, date));
     }
 
-    return day;
+    return [...selectedDateHolder.value, date];
   };
 
-  const setSelectedDate = (date: Date | Date[] | undefined) => {
+  const dateIsSelectable = (date: Date | Date[] | undefined): boolean => {
     if (Array.isArray(date)) {
-      if (date.some((value) => !dateIsValid(value))) {
-        return;
+      if (! date.every(singleDate => dateIsSelectable(singleDate))) {
+        return false;
       }
-    } else if (!dateIsValid(date)) {
-      return;
-    }
 
-    selectedDate.value = date;
-  };
+      if (isRange.value) {
+        return date.length === 2;
+      }
 
-  const resetRangeSelection = () => {
-    resetRange.value = true;
-  };
+      if (isMultiple.value) {
+        // @TODO: consider user option like an "Ok" button to confirm the selection
+        return true;
+      }
+
+      // If is an array and is not a range should not be valid
+      return false;
+    }
+
+    if (!dateIsValid(date)) {
+      return false;
+    }
 
-  const selectDate = (date: Date): Date | Date[] | undefined => {
     const dateIsDisabled: boolean = dayIsPartOfTheConditions(
       date,
       configuration.disabledDates,
@@ -103,21 +118,36 @@ export default function useSelectedDate<P extends {
       configuration.dateFormat,
     );
 
-    if (dateIsDisabled) {
+    return !dateIsDisabled;
+  };
+  
+  const addSelectedDate = (date: Date) => {
+    if (isMultiple.value) {
+      selectedDateHolder.value = parseDateForMultipleState(date).filter(dateIsValid);
+    } else if (dateIsValid(date)) {
+      selectedDateHolder.value = date;
+    }
+  };
+
+  watch(selectedDateHolder, (newValue: Date | Date[] | undefined) => {
+    if (!dateIsSelectable(newValue)) {
       return;
     }
     
-    const newSelectedDate = parseDateToSelect(date);
+    setSelectedDate(newValue);
 
-    setSelectedDate(newSelectedDate);
+    selectedDateHolder.value = selectedDate.value;
+  });
 
-    return newSelectedDate;
+  const resetRangeSelection = () => {
+    resetRange.value = true;
   };
 
   return {
-    selectDate,
     selectedDate,
+    selectedDateHolder,
     setSelectedDate,
+    addSelectedDate,
     getInitialSelectedDate,
     resetRangeSelection,
   };

From da62ec430ecd9691493743dcb43634e8407d45a6 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 4 May 2022 17:39:16 -0500
Subject: [PATCH 80/85] Refactor

---
 src/components/TDatepicker.vue      | 20 +++++++++++++++-----
 src/use/datepicker/useActiveDate.ts |  8 --------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 956faf9..4f1a190 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -316,8 +316,8 @@ export default defineComponent({
     const { parseDate } = useDateParsing(configuration);
     
     const { selectedDate, selectedDateHolder, setSelectedDate, addSelectedDate, getInitialSelectedDate, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
-    const { activeDate, activeDateIsVisible, initActiveDate, setActiveDate, hideActiveDate, showActiveDate, selectActiveDate } = useActiveDate({
-      configuration, selectedDate, parseDate, addSelectedDate,
+    const { activeDate, activeDateIsVisible, initActiveDate, setActiveDate, hideActiveDate, showActiveDate } = useActiveDate({
+      configuration, selectedDate, parseDate,
     });
     const { formatDate, formattedDate, userFormattedDate } = useDateFormatting(configuration, selectedDate);
     const { currentView, initView, setCurrentView } = useCalendarView(configuration);
@@ -377,6 +377,7 @@ export default defineComponent({
     };
 
     const selectDate = (date: Date) => {
+      console.log(date);
       addSelectedDate(date);
 
       setActiveDate(date);
@@ -391,13 +392,22 @@ export default defineComponent({
         // Will try to set the data by using the user manual input
         const parsedDate = input && input.value ? parseDate.value(input.value, configuration.userFormat) : undefined;
 
-        if (parsedDate !== undefined) {
-          addSelectedDate(parsedDate);
+        // If the user clicks while the input is closed could mean the user
+        // manually edited the date (if a date was parsed). If that is the case
+        // we only want to set the date if the date is different from the current
+        if (
+          parsedDate !== undefined
+          && (
+            selectedDate.value === undefined
+            || selectedDate.value instanceof Date && parsedDate.getTime() !== selectedDate.value.getTime()
+          )
+        ) {
+          setSelectedDate(parsedDate);
         }
       }
 
       if (isDropdownOpened.value) {
-        selectActiveDate();
+        addSelectedDate(activeDate.value);
       } else if (configuration.toggleOnClick) {
         doShow();
       }
diff --git a/src/use/datepicker/useActiveDate.ts b/src/use/datepicker/useActiveDate.ts
index 543a495..b3dfd6d 100644
--- a/src/use/datepicker/useActiveDate.ts
+++ b/src/use/datepicker/useActiveDate.ts
@@ -6,11 +6,9 @@ export default function useActiveDate<C extends Pick<TDatepickerOptions, 'initia
   configuration,
   selectedDate,
   parseDate,
-  addSelectedDate,
 }: {
   configuration: C,
   selectedDate: Ref<Date | Date[] | undefined>,
-  addSelectedDate: (date: Date) => void,
   parseDate: ComputedRef<DateParser>,
 },
   
@@ -21,7 +19,6 @@ export default function useActiveDate<C extends Pick<TDatepickerOptions, 'initia
     initActiveDate: () => void,
     hideActiveDate: () => void,
     showActiveDate: () => void,
-    selectActiveDate: () => void,
   } {
   // The active date is usually hidden but shown when navigating with the keyboard
   const activeDateIsVisible = ref<boolean>(false);
@@ -74,10 +71,6 @@ export default function useActiveDate<C extends Pick<TDatepickerOptions, 'initia
     activeDateIsVisible.value = true;
   };
 
-  const selectActiveDate = () => {
-    addSelectedDate(activeDate.value);
-  };
-
   return {
     activeDate,
     activeDateIsVisible,
@@ -85,6 +78,5 @@ export default function useActiveDate<C extends Pick<TDatepickerOptions, 'initia
     initActiveDate,
     hideActiveDate,
     showActiveDate,
-    selectActiveDate,
   };
 }

From d9d26dd74485528e262758f182f45667b3ce6ade Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 4 May 2022 17:42:55 -0500
Subject: [PATCH 81/85] Refactor the way it select a date according to the view

---
 src/components/TDatepicker.vue                 | 18 ++++++++++--------
 .../DatepickerViewMultipleYearsYear.vue        |  4 ++--
 .../TDatepicker/DatepickerViewYearMonth.vue    |  4 ++--
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 4f1a190..3aae48b 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -377,10 +377,16 @@ export default defineComponent({
     };
 
     const selectDate = (date: Date) => {
-      console.log(date);
-      addSelectedDate(date);
+      // Depending of the view (year view, month view or day views the amount of days is different)
+      if (currentView.value === TDatepickerView.Year) {
+        selectYear(date);
+      } else if (currentView.value === TDatepickerView.Month) {
+        selectMonth(date);
+      } else {
+        addSelectedDate(date);
 
-      setActiveDate(date);
+        setActiveDate(date);
+      }
     };
 
 
@@ -407,7 +413,7 @@ export default defineComponent({
       }
 
       if (isDropdownOpened.value) {
-        addSelectedDate(activeDate.value);
+        selectDate(activeDate.value);
       } else if (configuration.toggleOnClick) {
         doShow();
       }
@@ -523,10 +529,6 @@ export default defineComponent({
     
     provide('selectDate', selectDate);
     
-    provide('selectMonth', selectMonth);
-    
-    provide('selectYear', selectYear);
-    
     provide('setCurrentView', setCurrentView);
     
     provide('currentView', currentView);
diff --git a/src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue b/src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue
index b93eab7..6c6c41e 100644
--- a/src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue
+++ b/src/components/TDatepicker/DatepickerViewMultipleYearsYear.vue
@@ -28,7 +28,7 @@ export default defineComponent({
     const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
     const activeDate = inject<Ref<Date>>('activeDate')!;
     const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
-    const selectYear = inject<(day: Date) => void>('selectYear')!;
+    const selectDate = inject<(day: Date) => void>('selectDate')!;
 
     const yearLabel = formatDate.value(props.year, 'Y');
 
@@ -55,7 +55,7 @@ export default defineComponent({
     });
 
     const yearSelectedHandler = ()  => {
-      selectYear(props.year);
+      selectDate(props.year);
     };
 
     return { yearLabel, buttonClass, yearSelectedHandler };
diff --git a/src/components/TDatepicker/DatepickerViewYearMonth.vue b/src/components/TDatepicker/DatepickerViewYearMonth.vue
index 0c1b89f..883ecb7 100644
--- a/src/components/TDatepicker/DatepickerViewYearMonth.vue
+++ b/src/components/TDatepicker/DatepickerViewYearMonth.vue
@@ -28,7 +28,7 @@ export default defineComponent({
     const formatDate = inject<ComputedRef<DateFormatter>>('formatDate')!;
     const activeDate = inject<Ref<Date>>('activeDate')!;
     const selectedDate = inject<Ref<Date | Date[]>>('selectedDate')!;
-    const selectMonth = inject<(day: Date) => void>('selectMonth')!;
+    const selectDate = inject<(day: Date) => void>('selectDate')!;
 
     const ariaLabel = formatDate.value(props.month, 'F, Y');
     const dataDate = formatDate.value(props.month, 'Y-m');
@@ -57,7 +57,7 @@ export default defineComponent({
     });
 
     const monthSelectedHandler = ()  => {
-      selectMonth(props.month);
+      selectDate(props.month);
     };
 
     return { ariaLabel, dataDate, monthLabel, buttonClass, monthSelectedHandler };

From 084c55cb7d139b4d1ea18ec1589aee32986f24b7 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 4 May 2022 18:23:47 -0500
Subject: [PATCH 82/85] Use visible date for multiple months view

---
 src/components/TDatepicker.vue                | 18 ++++++---
 .../TDatepicker/DatepickerDropdown.vue        |  8 ++--
 src/components/TDatepicker/DatepickerView.vue | 22 +++++------
 .../TDatepicker/DatepickerViewControls.vue    |  5 +++
 src/use/datepicker/index.ts                   |  3 +-
 src/use/datepicker/useVisibleDate.ts          | 38 +++++++++++++++++++
 6 files changed, 73 insertions(+), 21 deletions(-)
 create mode 100644 src/use/datepicker/useVisibleDate.ts

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 3aae48b..cff3619 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -111,7 +111,7 @@ import {
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
-import { useSelectedDate, useActiveDate, useCalendarView, useDateFormatting, useDateParsing, useCalendarState } from '../use/datepicker';
+import { useSelectedDate, useActiveDate, useCalendarView, useDateFormatting, useDateParsing, useCalendarState, useVisibleDate } from '../use/datepicker';
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
 import { TDatepickerOptions, TDatepickerValue } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
@@ -314,7 +314,6 @@ export default defineComponent({
     // - Inside the dropdown refactor to reuse the dropdown view (recently duplciated with the teleport fix)
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
     const { parseDate } = useDateParsing(configuration);
-    
     const { selectedDate, selectedDateHolder, setSelectedDate, addSelectedDate, getInitialSelectedDate, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
     const { activeDate, activeDateIsVisible, initActiveDate, setActiveDate, hideActiveDate, showActiveDate } = useActiveDate({
       configuration, selectedDate, parseDate,
@@ -323,6 +322,8 @@ export default defineComponent({
     const { currentView, initView, setCurrentView } = useCalendarView(configuration);
     const { shown, doShow, doHide, isMultiple, isDropdownClosed, isDropdownOpened } = useCalendarState(configuration);
 
+    const { visibleDate, resetVisibleDate } = useVisibleDate({ activeDate, configuration });
+
     const initAllViewData = () => {
       initView();
       initActiveDate();
@@ -368,12 +369,16 @@ export default defineComponent({
       setActiveDate(month);
 
       setCurrentView(TDatepickerView.Day);
+
+      resetVisibleDate();
     };
 
     const selectYear = (year: Date) => {
       setActiveDate(year);
 
       setCurrentView(TDatepickerView.Month);
+
+      resetVisibleDate();
     };
 
     const selectDate = (date: Date) => {
@@ -389,7 +394,6 @@ export default defineComponent({
       }
     };
 
-
     // Handlers
     const clickHandler = (e: KeyboardEvent | MouseEvent) => {
       const input = e.target as (HTMLInputElement | HTMLButtonElement | undefined);
@@ -511,16 +515,20 @@ export default defineComponent({
       }      
     };
 
+    provide('visibleDate', visibleDate);
+    
+    provide('resetVisibleDate', resetVisibleDate);
+    
     provide('activeDate', activeDate);
 
     provide('activeDateIsVisible', activeDateIsVisible);
     
+    provide('setActiveDate', setActiveDate);
+    
     provide('selectedDateHolder', selectedDateHolder);
 
     provide('selectedDate', selectedDate);
     
-    provide('setActiveDate', setActiveDate);
-    
     provide('configuration', configuration);
 
     provide('parseDate', parseDate);
diff --git a/src/components/TDatepicker/DatepickerDropdown.vue b/src/components/TDatepicker/DatepickerDropdown.vue
index f7f98cb..58e808e 100644
--- a/src/components/TDatepicker/DatepickerDropdown.vue
+++ b/src/components/TDatepicker/DatepickerDropdown.vue
@@ -2,9 +2,10 @@
   <div class="inline-flex flex-col mt-1 bg-white border rounded">
     <div class="inline-flex flex-wrap ">
       <datepicker-view
-        v-for="month in visibleMonths"
+        v-for="(month, index) in visibleMonths"
         :key="month.toISOString"
         :month="month"
+        :first="index === 0"
       />
     </div>
   </div>
@@ -25,13 +26,14 @@ export default defineComponent({
   },
   setup() {
     const configuration = inject<TDatepickerOptions>('configuration')!;
+    
     const monthsPerView = configuration.monthsPerView!;
 
-    const activeDate = inject<Ref<Date>>('activeDate')!;
+    const visibleDate = inject<Ref<Date>>('visibleDate')!;
 
     const visibleMonths = computed<Date[]>(() => 
       range(0, monthsPerView - 1)
-        .map((i) => addMonths(activeDate.value, i)));
+        .map((i) => addMonths(visibleDate.value, i)));
 
     return { visibleMonths };
   },
diff --git a/src/components/TDatepicker/DatepickerView.vue b/src/components/TDatepicker/DatepickerView.vue
index b4854e4..7d037c0 100644
--- a/src/components/TDatepicker/DatepickerView.vue
+++ b/src/components/TDatepicker/DatepickerView.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-64">
     <datepicker-view-controls
-      v-if="isActiveMonth"
+      v-if="first"
       :date="month"
     />
     <div
@@ -15,13 +15,13 @@
     </div>
 
     <datepicker-view-month
-      v-if="isMonthView"
+      v-if="isMonthView || !first"
       :month="month"
     />
 
     <datepicker-view-year v-else-if="isYearView" />
 
-    <DatepickerViewMultipleYears v-else />
+    <datepicker-view-multiple-years v-else />
   </div>
 </template>
 
@@ -34,8 +34,6 @@ import DatepickerViewMultipleYears from './DatepickerViewMultipleYears.vue';
 import DatepickerViewControls from './DatepickerViewControls.vue';
 import DatepickerViewControlsLabel from './DatepickerViewControlsLabel.vue';
 
-import { isSameMonth } from '@variantjs/core';
-
 export default defineComponent({
   name: 'DatepickerView',
   components: {
@@ -50,19 +48,19 @@ export default defineComponent({
       type: Date,
       required: true,
     },
+    first: {
+      type: Boolean,
+      required: true,
+    },
   },
-  setup(props) {
-    const activeDate = inject<Ref<Date>>('activeDate')!;
-
+  setup() {
     const currentView = inject<Ref<TDatepickerView>>('currentView')!;
     
-    const isActiveMonth = computed<boolean>(() => isSameMonth(props.month, activeDate.value));
-    
-    const isMonthView = computed<boolean>(() => !isActiveMonth.value || currentView.value === TDatepickerView.Day);
+    const isMonthView = computed<boolean>(() => currentView.value === TDatepickerView.Day);
     
     const isYearView = computed<boolean>(() => currentView.value === TDatepickerView.Month);
 
-    return { isMonthView, isYearView, isActiveMonth };
+    return { isMonthView, isYearView };
   },
 });
 </script>
diff --git a/src/components/TDatepicker/DatepickerViewControls.vue b/src/components/TDatepicker/DatepickerViewControls.vue
index 3b4d5dd..b706cbf 100644
--- a/src/components/TDatepicker/DatepickerViewControls.vue
+++ b/src/components/TDatepicker/DatepickerViewControls.vue
@@ -75,6 +75,7 @@ export default defineComponent({
     const activeDate = inject<Ref<Date>>('activeDate')!;
     const setCurrentView = inject<(view: TDatepickerView) => void>('setCurrentView')!;
     const setActiveDate = inject<(date: Date) => void>('setActiveDate')!;
+    const resetVisibleDate = inject<() => void>('resetVisibleDate')!;
     const currentView = inject<Ref<TDatepickerView>>('currentView')!;
 
     const isMonthView = computed<boolean>(() => currentView.value === TDatepickerView.Day);
@@ -92,6 +93,8 @@ export default defineComponent({
       } else  {
         setActiveDate(addMonths(activeDate.value, 1));
       }
+
+      resetVisibleDate();
     };
 
     const prevGroupHandler = () => {
@@ -102,6 +105,8 @@ export default defineComponent({
       } else {
         setActiveDate(addMonths(activeDate.value, -1));
       }
+
+      resetVisibleDate();
     };
 
     const toggleView = () => {
diff --git a/src/use/datepicker/index.ts b/src/use/datepicker/index.ts
index c57cdcf..ecf07c6 100644
--- a/src/use/datepicker/index.ts
+++ b/src/use/datepicker/index.ts
@@ -4,5 +4,6 @@ import useSelectedDate from './useSelectedDate';
 import useDateFormatting from './useDateFormatting';
 import useDateParsing from './useDateParsing';
 import useCalendarState from './useCalendarState';
+import useVisibleDate from './useVisibleDate';
 
-export { useActiveDate, useCalendarView, useSelectedDate, useDateFormatting, useDateParsing, useCalendarState }; 
\ No newline at end of file
+export { useActiveDate, useCalendarView, useSelectedDate, useDateFormatting, useDateParsing, useCalendarState, useVisibleDate }; 
\ No newline at end of file
diff --git a/src/use/datepicker/useVisibleDate.ts b/src/use/datepicker/useVisibleDate.ts
new file mode 100644
index 0000000..a8bff4a
--- /dev/null
+++ b/src/use/datepicker/useVisibleDate.ts
@@ -0,0 +1,38 @@
+import { addMonths, isSameMonth, range } from '@variantjs/core';
+import { Ref, ref, watch, computed } from 'vue';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
+
+export default function useVisibleDate<C extends Pick<TDatepickerOptions, 'monthsPerView'>>({
+  activeDate,
+  configuration,
+}: {
+  activeDate: Ref<Date>,
+  configuration: C
+}): {
+    visibleDate: Ref<Date>,
+    resetVisibleDate: () => void,
+  } {
+  const visibleDate = ref<Date>(activeDate.value);
+  
+  const activeDateIsInVisibleView = computed<boolean>(() => {
+    const visibleMonths = range(0, configuration.monthsPerView! - 1)
+      .map((i) => addMonths(visibleDate.value, i));
+
+    return visibleMonths.some((month) => isSameMonth(activeDate.value, month));
+  });
+
+  watch(activeDate, (newValue) => {
+    if (! activeDateIsInVisibleView.value) {
+      visibleDate.value = newValue;
+    }
+  });
+
+  const resetVisibleDate = () => {
+    visibleDate.value = activeDate.value;
+  };
+
+  return {
+    resetVisibleDate,
+    visibleDate,
+  };
+}

From 3430b9b45b79662fa410b7bbe47962cefb9a61b1 Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Wed, 4 May 2022 18:32:37 -0500
Subject: [PATCH 83/85] Clean @TODO

---
 src/components/TDatepicker.vue | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index cff3619..435bd5f 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -300,18 +300,13 @@ export default defineComponent({
   setup(props, { emit }) {
     // @TODOS:
     // - In general check which dropdown options/events are usable
-    // - Add selectOnClose, closeOnSelected and see if something from the rich select can be used
-    // - Show active date should be reset in some cases TBD
+    // - Add selectOnClose and see if something from the rich select can be used
     // - Check aria labels on buttons 
     // - Replace svg icons with icon component
-    // - Selecting in different view with enter closes the dropdown
-    // - When press enten in month or year views it immediatly closes the dropdown and closed the field 
     // - The click handler depnds of shown consider the case when using inline
-    // - Consider using an undefined default value for toggling and, in cases like multiple or range keep the modal opened by default
+    // - Consider using an undefined default value for togglin and, in cases like multiple or range keep the dropdown opened by default
     // - In multiple add an ok button
     // - Add a clear button
-    // - If users type a date and blur it should reset the v-model date
-    // - Inside the dropdown refactor to reuse the dropdown view (recently duplciated with the teleport fix)
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
     const { parseDate } = useDateParsing(configuration);
     const { selectedDate, selectedDateHolder, setSelectedDate, addSelectedDate, getInitialSelectedDate, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);

From fcde90c4bbdb6e462c21595b42b5b0491cc1b9bf Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 5 May 2022 16:02:43 -0500
Subject: [PATCH 84/85] Add ok button for multiple

---
 src/components/TDatepicker.vue                | 34 ++++++++--
 .../TDatepicker/DatepickerDropdown.vue        |  2 +-
 src/components/TDatepicker/DatepickerView.vue |  4 ++
 .../TDatepicker/DatepickerViewFooter.vue      | 65 +++++++++++++++++++
 src/types/components/t-datepicker.ts          |  1 +
 src/use/datepicker/index.ts                   |  3 +-
 src/use/datepicker/useDateFormatting.ts       | 17 +++--
 src/use/datepicker/useDateLocale.ts           | 11 ++++
 src/use/datepicker/useDateParsing.ts          | 16 +++--
 src/use/datepicker/useSelectedDate.ts         |  1 -
 10 files changed, 133 insertions(+), 21 deletions(-)
 create mode 100644 src/components/TDatepicker/DatepickerViewFooter.vue
 create mode 100644 src/use/datepicker/useDateLocale.ts

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 435bd5f..6240797 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -92,6 +92,7 @@ import {
   provide,
   watch,
   InputHTMLAttributes,
+  computed,
 } from 'vue';
 
 import {
@@ -111,7 +112,7 @@ import {
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
-import { useSelectedDate, useActiveDate, useCalendarView, useDateFormatting, useDateParsing, useCalendarState, useVisibleDate } from '../use/datepicker';
+import { useSelectedDate, useActiveDate, useCalendarView, useDateFormatting, useDateParsing, useCalendarState, useVisibleDate, useDateLocale } from '../use/datepicker';
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
 import { TDatepickerOptions, TDatepickerValue } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
@@ -275,7 +276,7 @@ export default defineComponent({
     },
     closeOnSelect: {
       type: Boolean,
-      default: true,
+      default: undefined,
     },
     show: {
       type: Boolean,
@@ -289,6 +290,10 @@ export default defineComponent({
       type: [String, Object] as PropType<string | HTMLElement>,
       default: 'body',
     },
+    showOkButton: {
+      type: Boolean,
+      default: undefined,
+    },
   },
   emits: {
     change: (e: CustomEvent) => e instanceof CustomEvent,
@@ -308,17 +313,28 @@ export default defineComponent({
     // - In multiple add an ok button
     // - Add a clear button
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
-    const { parseDate } = useDateParsing(configuration);
+    const locale = useDateLocale({ configuration });
+    const { parseDate } = useDateParsing({ configuration, locale });
     const { selectedDate, selectedDateHolder, setSelectedDate, addSelectedDate, getInitialSelectedDate, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
     const { activeDate, activeDateIsVisible, initActiveDate, setActiveDate, hideActiveDate, showActiveDate } = useActiveDate({
       configuration, selectedDate, parseDate,
     });
-    const { formatDate, formattedDate, userFormattedDate } = useDateFormatting(configuration, selectedDate);
+    const { formatDate, formattedDate, userFormattedDate } = useDateFormatting({ configuration, selectedDate, locale });
     const { currentView, initView, setCurrentView } = useCalendarView(configuration);
-    const { shown, doShow, doHide, isMultiple, isDropdownClosed, isDropdownOpened } = useCalendarState(configuration);
-
+    const { shown, doShow, doHide, isMultiple, isRange, isDropdownClosed, isDropdownOpened } = useCalendarState(configuration);
     const { visibleDate, resetVisibleDate } = useVisibleDate({ activeDate, configuration });
+    const shouldCloseOnSelect = computed<boolean>(() => {
+      if (configuration.closeOnSelect === undefined) {
+        return isRange.value || !isMultiple.value;
+      }
 
+      return configuration.closeOnSelect;
+    });
+
+    const okButtonHandler = () => {
+      doHide();
+    };
+    
     const initAllViewData = () => {
       initView();
       initActiveDate();
@@ -350,7 +366,7 @@ export default defineComponent({
       emit('input', event);
       emit('update:modelValue', formattedDate.value);      
 
-      if (configuration.closeOnSelect && isDropdownOpened.value) {
+      if (shouldCloseOnSelect.value && isDropdownOpened.value) {
         doHide();
       }
     });
@@ -537,6 +553,10 @@ export default defineComponent({
     provide('currentView', currentView);
     
     provide('userFormattedDate', userFormattedDate);
+    
+    provide('locale', locale);
+    
+    provide('okButtonHandler', okButtonHandler);
 
     return {
       configuration,
diff --git a/src/components/TDatepicker/DatepickerDropdown.vue b/src/components/TDatepicker/DatepickerDropdown.vue
index 58e808e..7b19501 100644
--- a/src/components/TDatepicker/DatepickerDropdown.vue
+++ b/src/components/TDatepicker/DatepickerDropdown.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="inline-flex flex-col mt-1 bg-white border rounded">
-    <div class="inline-flex flex-wrap ">
+    <div class="inline-flex flex-wrap">
       <datepicker-view
         v-for="(month, index) in visibleMonths"
         :key="month.toISOString"
diff --git a/src/components/TDatepicker/DatepickerView.vue b/src/components/TDatepicker/DatepickerView.vue
index 7d037c0..d8df75b 100644
--- a/src/components/TDatepicker/DatepickerView.vue
+++ b/src/components/TDatepicker/DatepickerView.vue
@@ -22,6 +22,8 @@
     <datepicker-view-year v-else-if="isYearView" />
 
     <datepicker-view-multiple-years v-else />
+
+    <datepicker-view-footer v-if="first" />
   </div>
 </template>
 
@@ -33,6 +35,7 @@ import DatepickerViewYear from './DatepickerViewYear.vue';
 import DatepickerViewMultipleYears from './DatepickerViewMultipleYears.vue';
 import DatepickerViewControls from './DatepickerViewControls.vue';
 import DatepickerViewControlsLabel from './DatepickerViewControlsLabel.vue';
+import DatepickerViewFooter from './DatepickerViewFooter.vue';
 
 export default defineComponent({
   name: 'DatepickerView',
@@ -42,6 +45,7 @@ export default defineComponent({
     DatepickerViewMultipleYears,
     DatepickerViewControls,
     DatepickerViewControlsLabel,
+    DatepickerViewFooter,
   },
   props: {
     month: {
diff --git a/src/components/TDatepicker/DatepickerViewFooter.vue b/src/components/TDatepicker/DatepickerViewFooter.vue
new file mode 100644
index 0000000..35708fe
--- /dev/null
+++ b/src/components/TDatepicker/DatepickerViewFooter.vue
@@ -0,0 +1,65 @@
+<template>
+  <div
+    v-if="show"
+    class="flex items-center px-3 pb-2 space-x-2"
+  >
+    <!-- <label class="flex-grow text-sm text-gray-500">Time</label>
+      <div class="flex items-center space-x-2">
+      <div
+        tabindex="0"
+        inputmode="numeric"
+        contenteditable="true"
+        class="bg-gray-100 rounded-md w-full text-right flex items-center border border-gray-100 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50"
+        style="caret-color: transparent;"
+      >
+        <input
+          inputmode="numeric"
+          type="text"
+          contenteditable="false"
+          class="text-center w-8 border-transparent bg-transparent p-0 h-6 text-sm transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded"
+        ><span
+          contenteditable="false"
+          class=""
+        >:</span><input
+          inputmode="numeric"
+          type="text"
+          contenteditable="false"
+          class="text-center w-8 border-transparent bg-transparent p-0 h-6 text-sm transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded"
+        >
+      </div> -->
+    <button
+      type="button"
+      class="text-blue-600 text-sm uppercase font-semibold transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded cursor-pointer ml-auto"
+      @click="okButtonHandler"
+      v-text="locale.okLabel"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { DateLocale } from '@variantjs/core';
+import { computed, ComputedRef, defineComponent, inject } from 'vue';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
+import { useCalendarState } from '../../use/datepicker';
+
+export default defineComponent({
+  name: 'DatepickerViewFooter',
+  setup() {
+    const configuration = inject<TDatepickerOptions>('configuration')!;
+    const locale = inject<ComputedRef<DateLocale>>('locale')!;
+    const okButtonHandler = inject<() => void>('okButtonHandler')!;
+
+    const { isMultiple, isRange } = useCalendarState(configuration);
+
+    const show = computed(() => {
+      if (configuration.showOkButton === undefined) {
+        return isMultiple.value && !isRange.value;
+      }
+
+      return configuration.showOkButton;
+    });
+    
+    return { show, locale, okButtonHandler };
+  },
+});
+</script>
diff --git a/src/types/components/t-datepicker.ts b/src/types/components/t-datepicker.ts
index d3a8ea2..a3a6197 100644
--- a/src/types/components/t-datepicker.ts
+++ b/src/types/components/t-datepicker.ts
@@ -52,4 +52,5 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   addFormInput?: boolean,  
   teleport?: boolean,
   teleportTo?: string | HTMLElement,
+  showOkButton?: boolean,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;
diff --git a/src/use/datepicker/index.ts b/src/use/datepicker/index.ts
index ecf07c6..310ee41 100644
--- a/src/use/datepicker/index.ts
+++ b/src/use/datepicker/index.ts
@@ -5,5 +5,6 @@ import useDateFormatting from './useDateFormatting';
 import useDateParsing from './useDateParsing';
 import useCalendarState from './useCalendarState';
 import useVisibleDate from './useVisibleDate';
+import useDateLocale from './useDateLocale';
 
-export { useActiveDate, useCalendarView, useSelectedDate, useDateFormatting, useDateParsing, useCalendarState, useVisibleDate }; 
\ No newline at end of file
+export { useActiveDate, useCalendarView, useSelectedDate, useDateFormatting, useDateParsing, useCalendarState, useVisibleDate, useDateLocale }; 
\ No newline at end of file
diff --git a/src/use/datepicker/useDateFormatting.ts b/src/use/datepicker/useDateFormatting.ts
index 72bba31..d82fa34 100644
--- a/src/use/datepicker/useDateFormatting.ts
+++ b/src/use/datepicker/useDateFormatting.ts
@@ -1,20 +1,25 @@
-import { buildDateFormatter, DateFormatter, dateEnglishLocale } from '@variantjs/core';
+import { buildDateFormatter, DateFormatter, dateEnglishLocale, DateLocale } from '@variantjs/core';
 import { computed, ComputedRef, Ref } from 'vue';
 import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
-export default function useDateFormatting<C extends Pick<TDatepickerOptions, 'locale' | 'dateFormatter' | 'dateFormat' | 'userFormat' | 'range' | 'dateParser'>>(
+export default function useDateFormatting<C extends Pick<TDatepickerOptions, 'locale' | 'dateFormatter' | 'dateFormat' | 'userFormat' | 'range' | 'dateParser'>>({
+  configuration,
+  locale,
+  selectedDate,
+}: {
   configuration: C,
-  selectedDate: Ref<Date | Date[] | undefined>,
-): {
+  locale: ComputedRef<DateLocale>,
+  selectedDate:  Ref<Date | Date[] | undefined>
+}): {
     formatDate: ComputedRef<DateFormatter>,
     formattedDate: ComputedRef<string | string[]>,
     userFormattedDate: ComputedRef<string>,
   } {
 
-  const formatDate = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
+  const formatDate = computed<DateFormatter>(() => buildDateFormatter(locale.value, configuration.dateFormatter));
 
   const dateRangeSeparator = computed<string>(() => {
-    return (configuration.locale || dateEnglishLocale).rangeSeparator || dateEnglishLocale.rangeSeparator;
+    return locale.value.rangeSeparator || dateEnglishLocale.rangeSeparator;
   });
 
   const formattedDate = computed<string | string[]>(() => {
diff --git a/src/use/datepicker/useDateLocale.ts b/src/use/datepicker/useDateLocale.ts
new file mode 100644
index 0000000..341a120
--- /dev/null
+++ b/src/use/datepicker/useDateLocale.ts
@@ -0,0 +1,11 @@
+import { dateEnglishLocale, DateLocale } from '@variantjs/core';
+import { computed, ComputedRef } from 'vue';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
+
+export default function useDateLocale<C extends Pick<TDatepickerOptions, 'locale'>>({
+  configuration,
+}: {
+  configuration: C,
+}): ComputedRef<DateLocale> {
+  return computed(() => configuration.locale || dateEnglishLocale);
+}
diff --git a/src/use/datepicker/useDateParsing.ts b/src/use/datepicker/useDateParsing.ts
index b3954aa..aa4e4fa 100644
--- a/src/use/datepicker/useDateParsing.ts
+++ b/src/use/datepicker/useDateParsing.ts
@@ -1,11 +1,17 @@
-import { dateEnglishLocale, DateParser, buildDateParser } from '@variantjs/core';
+import { DateParser, buildDateParser, DateLocale } from '@variantjs/core';
 import { computed, ComputedRef } from 'vue';
 import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
-export default function useDateParsing<C extends Pick<TDatepickerOptions, 'locale' | 'dateParser'>>(configuration: C): {
-  parseDate: ComputedRef<DateParser>,
-} {
-  const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
+export default function useDateParsing<C extends Pick<TDatepickerOptions, 'locale' | 'dateParser'>>({
+  configuration,
+  locale,
+}: {
+  configuration: C,
+  locale: ComputedRef<DateLocale>
+}): {
+    parseDate: ComputedRef<DateParser>,
+  } {
+  const parseDate = computed<DateParser>(() => buildDateParser(locale.value, configuration.dateParser));
 
   return { parseDate };
 }
diff --git a/src/use/datepicker/useSelectedDate.ts b/src/use/datepicker/useSelectedDate.ts
index a972efa..004a751 100644
--- a/src/use/datepicker/useSelectedDate.ts
+++ b/src/use/datepicker/useSelectedDate.ts
@@ -99,7 +99,6 @@ export default function useSelectedDate<P extends {
       }
 
       if (isMultiple.value) {
-        // @TODO: consider user option like an "Ok" button to confirm the selection
         return true;
       }
 

From 93f06831614f7e9aa8bfe9011ced50a94a1dc18a Mon Sep 17 00:00:00 2001
From: alfonsobries <alfonsobries@gmail.com>
Date: Thu, 5 May 2022 16:11:28 -0500
Subject: [PATCH 85/85] fix focus trap with the ok button

---
 src/components/TDatepicker.vue                | 21 +++++++++++++------
 .../TDatepicker/DatepickerViewFooter.vue      |  1 +
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/TDatepicker.vue b/src/components/TDatepicker.vue
index 6240797..1d51ee7 100644
--- a/src/components/TDatepicker.vue
+++ b/src/components/TDatepicker.vue
@@ -45,6 +45,7 @@
           :readonly="configuration.readonly"
           :placeholder="configuration.placeholder"
           v-bind="configuration.userInputAttributes"
+          data-datepicker-focusable
           @input="userInputHandler"
           @focus="focusHandler"
           @blur="blurHandler"
@@ -310,7 +311,6 @@ export default defineComponent({
     // - Replace svg icons with icon component
     // - The click handler depnds of shown consider the case when using inline
     // - Consider using an undefined default value for togglin and, in cases like multiple or range keep the dropdown opened by default
-    // - In multiple add an ok button
     // - Add a clear button
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
     const locale = useDateLocale({ configuration });
@@ -435,13 +435,22 @@ export default defineComponent({
     };
 
     // If the date field is blurred (date clicked for example) we should focus
-    // the field again
-    // @TODO: Consider the case when other elements should keep the focus
-    // like the eventual time picker
-    const blurOnChildHandler = (e: Event) => {
+    // the field again unless is a child element
+    const blurOnChildHandler = (e: FocusEvent) => {
       const target = e.target as HTMLButtonElement | HTMLInputElement;
 
-      target.focus();
+      const relatedTarget = e.relatedTarget as HTMLElement | EventTarget;
+      const relatedTargetDataset: Data | undefined = relatedTarget instanceof HTMLElement
+        ? relatedTarget.dataset
+        : undefined;
+      
+      if (
+        target.dataset.datepickerFocusable !== undefined
+        && relatedTargetDataset
+        && relatedTargetDataset.datepickerFocusable === undefined
+      ) {
+        target.focus();
+      }
     };
 
     const keyboardNavigationHandler = (e: KeyboardEvent) => {
diff --git a/src/components/TDatepicker/DatepickerViewFooter.vue b/src/components/TDatepicker/DatepickerViewFooter.vue
index 35708fe..62913c0 100644
--- a/src/components/TDatepicker/DatepickerViewFooter.vue
+++ b/src/components/TDatepicker/DatepickerViewFooter.vue
@@ -30,6 +30,7 @@
     <button
       type="button"
       class="text-blue-600 text-sm uppercase font-semibold transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded cursor-pointer ml-auto"
+      data-datepicker-focusable
       @click="okButtonHandler"
       v-text="locale.okLabel"
     />