import { Canvas, Meta, Controls, Source } from '@storybook/addon-docs';
import * as DatepickerStories from './Datepicker.stories';

# Datepicker

<Meta of={DatepickerStories} />

<br />

사용자가 날짜를 선택할 수 있도록 도와주는 UI 요소입니다.

<Canvas of={DatepickerStories.Default} />

<Controls />

<br />

## Usage

기본적인 <strong>Datepicker</strong> 컴포넌트 사용방법 입니다.

```javascript
import { Datepicker } from '@lotte-innovate/lui-vue';

<template>
  <Datepicker />
</template>;
```

<br />

## API Reference

### value

`value` 속성은 Datepicker의 현재 날짜를 나타냅니다.

- **타입**: `DateValue`

```javascript
<template>
  <Datepicker :value="value" />
</template>

<script setup>
import { CalendarDate } from '@internationalized/date';

const value = new CalendarDate(2025, 3, 16);
</script>
```

### update:modelValue

`update:modelValue` 속성은 선택된 날짜가 변경될 때 호출되는 콜백 함수입니다. 이 함수는 새로운 날짜를 인자로 받습니다.

- **타입**: `(date: DateValue) => void`

```javascript
<template>
  <Datepicker :value="value"  @update:modelValue="handleSelectDate"/>
</template>

<script setup>
import { CalendarDate } from '@internationalized/date';

const value = new CalendarDate(2025, 3, 16);

const handleSelectDate = (value) => {
  console.log('Datepicker date :', value.toString());
};
</script>
```

<br />

## Variant

### Show Outside Days

현재 월에 속하지 않는 날짜를 표시할지 여부를 결정합니다.

기본 값은 `false`로, 이전 달 또는 다음 달의 날짜를 표시합니다.

```javascript
<Datepicker showOutsideDays />
```

<Canvas of={DatepickerStories.ShowOutsideDays} />

### Date Range Picker

날짜 범위를 선택할 수 있는 기능을 사용하여 시작 날짜(`start`)와 종료 날짜(`end`)를 선택할 수 있습니다.

### value

`value` 속성은 DateRangepicker의 현재 선택된 날짜 범위를 나타냅니다.

- **타입**: `DateRange`

```javascript
<template>
  <DateRangepicker :value="value" />
</template>

<script setup>
import { CalendarDate } from '@internationalized/date';

const value = { start: new CalendarDate(2025, 3, 10), end: new CalendarDate(2025, 3, 17) };
</script>
```

### update:modelValue

`update:modelValue` 속성은 선택된 날짜 범위가 변경될 때 호출되는 콜백 함수입니다. 이 함수는 새로운 날짜 범위를 인자로 받습니다.

- **타입**: `(date: DateRange) => void`

```javascript
<template>
  <DateRangepicker :value="value"  @update:modelValue="handleSelectDate"/>
</template>

<script setup>
import { CalendarDate } from '@internationalized/date';

const value = { start: new CalendarDate(2025, 3, 10), end: new CalendarDate(2025, 3, 17) };

const handleSelectDate = (value) => {
  console.log('startDate and endDate :', value.start, value.end);
};
</script>
```

<Canvas of={DatepickerStories.DateRangePicker} />

### Calendar

날짜를 선택하거나 표시하는 데 사용되는 기본적인 달력 컴포넌트입니다.

```javascript
<Calendar />
```

<Canvas of={DatepickerStories.CalendarUI} />