npm package: @mrfokus/vue-date-picker
Description: Гибкий Vue 3 компонент выбора даты с поддержкой одиночных дат.
Author: mrfokus
Latest version: 0.2.8

# Vue Range Date Picker

Компонент выбора даты (массива дат) на Vue 3 с локалью **ru**, построенный на базе [`reka-ui`](https://www.reka-ui.com/).
Поддерживает выбор одной или нескольких дат, кастомизацию и адаптацию под ваш дизайн с помощью CSS-переменных.

> ⚠️ **Важно**  
> Этот компонент предназначен для использования внутри Vue 3-проекта.  
> Он **не является самостоятельным виджетом** и устанавливается как часть вашего фронтенд-проекта.
>
> Перед установкой убедитесь, что у вас:
>
> - Vue 3
> - Vite / Nuxt 3 / аналогичный сборщик
> - TypeScript (рекомендуется)

## 🚀 Установка

```bash
npx @mrfokus/vue-date-picker
```

Также убедитесь, что у вас установлены зависимости:

```bash
npm install reka-ui @internationalized/date
```

---

## 📦 Использование

```vue
<script setup lang="ts">
import { ref } from "vue";
import DatePicker from "your_path";

const date = ref(null); //выбранная дата (поддерживается массив если передан параметр multiple)
</script>

<template>
  <DatePicker v-model="range" />
</template>
```

---

## ⚙️ Свойства

| Свойство                        | Тип                                          | По умолчанию | Описание                                          |
| ------------------------------- | -------------------------------------------- | ------------ | ------------------------------------------------- |
| `modelValue`                    | `{ start: Date \| null; end: Date \| null }` | —            | Текущее значение диапазона                        |
| `numberOfMonths`                | `number`                                     | `1`          | Количество отображаемых месяцев                   |
| `locale`                        | `string`                                     | `'ru'`       | Локаль календаря                                  |
| `disableDaysOutsideCurrentView` | `boolean`                                    | `true`       | Скрыть дни, не относящиеся к текущему месяцу      |
| `preventDeselect`               | `boolean`                                    | `true`       | Запретить снятие выделения после выбора диапазона |

События:

| Событие             | Аргументы                                    | Описание                                |
| ------------------- | -------------------------------------------- | --------------------------------------- |
| `update:modelValue` | `{ start: Date \| null; end: Date \| null }` | Срабатывает при изменении выбранных дат |

---

## 🎨 Кастомизация

Компонент полностью стилизуется с помощью CSS-переменных:

```css
:root {
  --dp-color-bg: #ffffff;
  --dp-color-text: #0e1829;
  --dp-color-muted: #f2f4f7;
  --dp-color-selected-bg: #0e1829;
  --dp-color-selected-text: #ffffff;
  --dp-radius: 16px;
  --dp-radius-day: 10px;
  --dp-shadow: 0 0 16px -2px rgba(14, 24, 41, 0.12);
  --dp-spacing: 20px;
  --dp-cell-size: 32px;
  --dp-cell-gap: 2px;
  --dp-font-family: "Inter", sans-serif;
}
```

Также доступны слоты для замены иконок навигации и добавления разделителей между месяцами:

```vue
<DatePicker v-model="range">
  <template #prev-icon>
    <MyCustomPrevIcon />
  </template>

  <template #next-icon>
    <MyCustomNextIcon />
  </template>

  <template #divider>
    <hr class="my-divider" />
  </template>
</DatePicker>
```

---

## 🧩 Особенности

- 🌍 Локализация `ru`
- 📅 Выбор диапазона или одной даты
- 🧱 Полностью кастомизируемый интерфейс
- 💅 Поддержка CSS-переменных для простого редизайна
- ⚡ Построен на `reka-ui`, совместим с Vue 3 + TypeScript

---

## 🪪 Лицензия

[MIT](LICENSE)

---