feat: Компонент UtilsDate (#200)

### 📝 Описание изменений
Добавление компонента `UtilsDate`

---------

Co-authored-by: Vasily Kuzin <work@exer7um.com>

docs/.vitepress/config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
       },
       {
         items: [
+          { link: "/components/date", text: "UtilsDate" },
           { link: "/components/input", text: "UtilsInput" },
           { link: "/components/input-masked", text: "UtilsInputMasked" },
           { link: "/components/map-widget", text: "UtilsMapWidget" },

docs/components/date.md

@@ -0,0 +1,73 @@
+# UtilsDate
+
+Данный компонент выводит поле для выбора даты.
+
+::: warning
+
+Для работы данного компонента нужно включить компонент в `build.transpile` в `nuxt.config`
+
+```ts
+export default defineNuxtConfig({
+  build: {
+    transpile: ['@vuepic/vue-datepicker']
+  }
+})
+```
+
+:::
+
+Компонент может быть использован несколькими способами:
+
+1. Можно использовать в форме с помощью `formData`. Для этого в компоненте предусмотрен пропс `id`
+2. Можно использовать через `v-model`.
+
+## Пропсы
+
+- `id` — идентификатор поля ввода. Устанавливает `id` и `name`, которые используются в `formData`.
+
+  **По умолчанию:** `date`.
+
+- `label` — заголовок для поля. Задает параметр `label`.
+
+- `placeholder` — плейсхолдер для поля. Задает параметр `placeholder`.
+
+   **По умолчанию:** `Выберите дату`.
+
+- `disabled` — является ли поле выключенным. Задает параметр `disabled`.
+
+- `required` — является ли поле обязательным для заполнения. Выставляет атрибут `required`.
+
+  **По умолчанию:** `true`.
+
+Помимо этого можно использовать любые `props` из документации <https://vue3datepicker.com/>
+
+## Стилизация
+
+Для стилизации компонента подготовлены классы:
+
+- `utils-date-container`. Его стилизация влияет на контейнер, в котором находится текстовое поле.
+- `utils-date-label`. Его стилизация влияет на `label`.
+- `utils-date-picker`. Его стилизация влияет на контейнер для `input`.
+- `utils-date-input`. Его стилизация влияет на `input`.
+
+::: info
+Также для стилизации можно использовать глобальные классы, которые стилизуют все компоненты формы.
+
+- `utils-form-container`. Его стилизация влияет на контейнер, в котором находится текстовое поле.
+- `utils-form-label`. Его стилизация влияет на `label`.
+- `utils-form-input`. Его стилизация влияет на поле ввода.
+:::
+
+## Использование
+
+```vue
+<script setup lang="ts">
+const date = ref("")
+</script>
+
+<template>
+  <UtilsDate
+    v-model="date"
+  />
+</template>
+```

docs/index.md

@@ -15,7 +15,7 @@ hero:
       link: /installation
     - theme: alt
       text: Компоненты
-      link: /components/input
+      link: /components/date
     - theme: alt
       text: Composables
       link: /composables/use-fetch-auth

package.json

@@ -42,6 +42,7 @@
   "prettier": "@exer7um/prettier-config",
   "dependencies": {
     "@nuxt/kit": "~3.12.3",
+    "@vuepic/vue-datepicker": "~9.0.0",
     "@vueuse/core": "~10.11.0",
     "isomorphic-dompurify": "~2.13.0",
     "maska": "~3.0.0",

src/runtime/components/UtilsDate.vue

@@ -0,0 +1,89 @@
+<!-- eslint-disable jsdoc/check-tag-names -->
+<script setup lang="ts">
+import VueDatePicker from "@vuepic/vue-datepicker"
+import "@vuepic/vue-datepicker/dist/main.css"
+
+withDefaults(
+  defineProps<{
+    /**
+     * Является ли поле выключенным.
+     *
+     * Задает параметр `disabled`.
+     */
+    disabled?: boolean
+    /**
+     * Отображать ли время в календаре.
+     *
+     * @default `false`
+     */
+    enableTimePicker?: boolean
+    /**
+     * Идентификатор поля ввода.
+     *
+     * Устанавливает `id` и `name`, которые используются в `formData`.
+     *
+     * @default `date`
+     */
+    id?: string
+    /**
+     * Подпись поля ввода.
+     *
+     * Создает `label` и задает ему необходимый `id`.
+     */
+    label?: string // eslint-disable-line vue/require-default-prop
+
+    /**
+     * Плейсхолдер поля.
+     *
+     * Задает параметр `placeholder`.
+     *
+     * @default `Выберите дату`
+     */
+    placeholder?: string
+    /**
+     * Является ли поле обязательным для заполнения.
+     *
+     * Выставляет атрибут `required`.
+     *
+     * @default `true`
+     */
+    required?: boolean
+  }>(),
+  {
+    id: "date",
+    placeholder: "Выберите дату",
+    required: true,
+  }
+)
+
+/** Текущий текст поля */
+const modelValue = defineModel<string>()
+</script>
+
+<template>
+  <div class="utils-date-container utils-form-container">
+    <label
+      v-if="label"
+      class="utils-date-label utils-form-label"
+      :for="id"
+      v-text="label"
+    />
+    <VueDatePicker
+      v-bind="$attrs"
+      v-model="modelValue"
+      class="utils-date-picker"
+    >
+      <template #dp-input="{ value }">
+        <input
+          :id
+          class="utils-date-input utils-form-input"
+          :disabled
+          :name="id"
+          :placeholder
+          :required
+          :value
+        />
+      </template>
+    </VueDatePicker>
+  </div>
+</template>