Skip to content

Commit 3f72fec

Browse files
FAL-coffeeFAL-coffee
authored
📝 Add vitepress (#21)
1 parent 2e0d910 commit 3f72fec

File tree

11 files changed

+1213
-8
lines changed

11 files changed

+1213
-8
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
dist/
22
node_modules/
3+
docs/.vitepress/cache/

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ node_modules
1111
dist
1212
dist-ssr
1313
*.local
14+
docs/.vitepress/cache
1415

1516
# Editor directories and files
1617
.vscode/*

‎docs/.vitepress/config.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { defineConfig } from 'vitepress'
2+
3+
export default defineConfig({
4+
title: 'vue3-datepick',
5+
description: 'A simple and customizable date picker for Vue 3.',
6+
themeConfig: {
7+
nav: [
8+
{ text: 'Home', link: '/' },
9+
{ text: 'Guide', link: '/guide/install' },
10+
{ text: 'API', link: '/api/' },
11+
{ text: 'GitHub', link: 'https://github.com/FAL-coffee/vue3-datepick' },
12+
],
13+
sidebar: {
14+
'/guide/': [
15+
{
16+
text: 'Guide',
17+
items: [
18+
{ text: 'Installation', link: '/guide/install' },
19+
{ text: 'Getting Started', link: '/guide/getting-started' },
20+
{ text: 'Customization', link: '/guide/customization' },
21+
{ text: 'Examples and Demos', link: '/guide/examples' },
22+
],
23+
},
24+
],
25+
'/api/': [
26+
{
27+
text: 'API Reference',
28+
items: [{ text: 'API', link: '/api/' }],
29+
},
30+
],
31+
},
32+
},
33+
})

‎docs/api/index.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# API Reference
2+
3+
## Props
4+
5+
| Prop | Type | Default | Description |
6+
| ------------------- | ---------- | --------------------- | ------------------------------------------------- |
7+
| `v-model` | `String` | `null` | The selected date (two-way data binding). |
8+
| `displayFormat` | `String` | `'YYYY-MM-DD'` | The format used to display the date. |
9+
| `disabled` | `Boolean` | `false` | Disables the date picker. |
10+
| `placeholder` | `String` | `null` | Placeholder text for the input. |
11+
| `yearContent` | `String` | `null` | Content to display for the year. |
12+
| `yearFirst` | `Boolean` | `false` | Display year before the month in the date picker. |
13+
| `months` | `Array` | Full list of months | Array of month names. |
14+
| `weekdays` | `Array` | Full list of weekdays | Array of weekday names. |
15+
| `startWeekOnSunday` | `Boolean` | `false` | Determines if the week starts on Sunday. |
16+
| `isDateDisabled` | `Function` | `null` | Function to disable specific dates. |
17+
18+
## Events
19+
20+
- **@update:modelValue**: Triggered when the selected date changes.
21+
22+
Example:
23+
24+
```vue
25+
<DatePick @update:modelValue="handleDateChange" />
26+
```
27+
28+
## Methods
29+
30+
### `focus()`
31+
32+
Focuses the date picker component programmatically.
33+
34+
Example:
35+
36+
```vue
37+
<DatePick ref="datepicker" />
38+
<script setup>
39+
const datepicker = ref(null)
40+
datepicker.value.focus()
41+
</script>
42+
```

‎docs/guide/customization.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Customization Guide
2+
3+
## Custom Styles
4+
5+
You can easily apply custom CSS to style the `vue3-datepick` component according to your project needs.
6+
7+
Example:
8+
9+
```css
10+
.datepick {
11+
background-color: #f0f0f0;
12+
border-radius: 8px;
13+
}
14+
```
15+
16+
## Slots
17+
18+
`vue3-datepick` supports named slots for customizing the internal content of the date picker.
19+
20+
### Custom Header
21+
22+
You can replace the default header with your own custom content:
23+
24+
```vue
25+
<DatePick>
26+
<template #header>
27+
<h3>Select a Date</h3>
28+
</template>
29+
</DatePick>
30+
```
31+
32+
### Custom Footer
33+
34+
You can also customize the footer content by using the `footer` slot:
35+
36+
```vue
37+
<DatePick>
38+
<template #footer>
39+
<p>Custom Footer Content</p>
40+
</template>
41+
</DatePick>
42+
```
43+
44+
## Date Format Customization
45+
46+
You can easily customize how the date is displayed using the `displayFormat` prop. The default format is `YYYY-MM-DD`.
47+
48+
Example:
49+
50+
```vue
51+
<DatePick v-model="selectedDate" display-format="DD/MM/YYYY" />
52+
```
53+
54+
## Disable Specific Dates
55+
56+
You can disable specific dates (such as weekends) using the `isDateDisabled` function.
57+
58+
Example: Disable Sundays:
59+
60+
```vue
61+
<DatePick v-model="selectedDate" :is-date-disabled="isDateDisabled" />
62+
63+
<script setup lang="ts">
64+
const isDateDisabled = (date: Date) => {
65+
return date.getDay() === 0 // Disable Sundays
66+
}
67+
</script>
68+
```

‎docs/guide/examples.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# Examples and Demos
2+
3+
Here are some examples demonstrating various use cases of `vue3-datepick`.
4+
5+
## Basic Date Picker
6+
7+
This is a basic example of how to use `vue3-datepick`.
8+
9+
```vue
10+
<template>
11+
<DatePicker v-model="selectedDate" />
12+
</template>
13+
14+
<script setup lang="ts">
15+
import { ref } from 'vue'
16+
import DatePicker from 'vue3-datepick'
17+
18+
const selectedDate = ref('')
19+
</script>
20+
```
21+
22+
## Disabled Dates
23+
24+
You can disable specific dates, such as weekends or holidays, using the `isDateDisabled` prop.
25+
26+
Example: Disable Sundays:
27+
28+
```vue
29+
<template>
30+
<DatePicker v-model="selectedDate" :is-date-disabled="isDateDisabled" />
31+
</template>
32+
33+
<script setup lang="ts">
34+
import { ref } from 'vue'
35+
36+
const selectedDate = ref('')
37+
const isDateDisabled = (date: Date) => date.getDay() === 0 // Disable Sundays
38+
</script>
39+
```
40+
41+
## Custom Placeholder Text
42+
43+
You can customize the placeholder text that appears in the date picker input when no date is selected.
44+
45+
```vue
46+
<template>
47+
<DatePicker v-model="selectedDate" placeholder="Pick a date" />
48+
</template>
49+
50+
<script setup lang="ts">
51+
import { ref } from 'vue'
52+
53+
const selectedDate = ref('')
54+
</script>
55+
```
56+
57+
## Custom Date Format
58+
59+
Customize the date format that is displayed in the input field. For example, use `DD/MM/YYYY` instead of the default `YYYY-MM-DD`.
60+
61+
```vue
62+
<template>
63+
<DatePicker v-model="selectedDate" display-format="DD/MM/YYYY" />
64+
</template>
65+
66+
<script setup lang="ts">
67+
import { ref } from 'vue'
68+
69+
const selectedDate = ref('')
70+
</script>
71+
```

‎docs/guide/getting-started.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# Getting Started
2+
3+
This guide will help you get started with using `vue3-datepick` in your project.
4+
5+
## Basic Usage
6+
7+
To use `vue3-datepick`, start by installing the package and adding it to your component.
8+
9+
```vue
10+
<template>
11+
<DatePicker v-model="selectedDate" />
12+
</template>
13+
14+
<script setup lang="ts">
15+
import { ref } from 'vue'
16+
import DatePicker from 'vue3-datepick'
17+
18+
const selectedDate = ref('')
19+
</script>
20+
```
21+
22+
In this example, the selected date is bound to the `selectedDate` variable using `v-model`. You can now use this variable elsewhere in your application.
23+
24+
## Customizing the Date Format
25+
26+
You can easily change the format of the date displayed in the input by using the `displayFormat` prop.
27+
28+
Example: Set the date format to `MM/DD/YYYY`:
29+
30+
```vue
31+
<template>
32+
<DatePicker v-model="selectedDate" display-format="MM/DD/YYYY" />
33+
</template>
34+
35+
<script setup lang="ts">
36+
import { ref } from 'vue'
37+
38+
const selectedDate = ref('')
39+
</script>
40+
```
41+
42+
## Disabling Specific Dates
43+
44+
You can disable specific dates using the `isDateDisabled` prop. The following example disables Sundays:
45+
46+
```vue
47+
<template>
48+
<DatePicker v-model="selectedDate" :is-date-disabled="isDateDisabled" />
49+
</template>
50+
51+
<script setup lang="ts">
52+
import { ref } from 'vue'
53+
54+
const selectedDate = ref('')
55+
const isDateDisabled = (date: Date) => {
56+
return date.getDay() === 0 // Disable Sundays
57+
}
58+
</script>
59+
```
60+
61+
## Customizing Month and Weekday Names
62+
63+
You can customize the names of months and weekdays by passing arrays to the `months` and `weekdays` props.
64+
65+
Example:
66+
67+
```vue
68+
<template>
69+
<DatePicker v-model="selectedDate" :months="months" :weekdays="weekdays" />
70+
</template>
71+
72+
<script setup lang="ts">
73+
import { ref } from 'vue'
74+
75+
const selectedDate = ref('')
76+
const months = ref([
77+
'January',
78+
'February',
79+
'March',
80+
'April',
81+
'May',
82+
'June',
83+
'July',
84+
'August',
85+
'September',
86+
'October',
87+
'November',
88+
'December',
89+
])
90+
const weekdays = ref(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
91+
</script>
92+
```
93+
94+
---
95+
96+
With these examples, you should be able to quickly integrate `vue3-datepick` into your project and customize it according to your needs.

‎docs/guide/install.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Installation Guide
2+
3+
## Installation
4+
5+
To install `vue3-datepick` in your project, use one of the following commands:
6+
7+
### npm
8+
9+
```bash
10+
npm install vue3-datepick
11+
```
12+
13+
### yarn
14+
15+
```bash
16+
yarn add vue3-datepick
17+
```
18+
19+
## Basic Setup
20+
21+
After installing the package, you can start using the date picker in your Vue 3 application. Here's how to set it up:
22+
23+
```vue
24+
<template>
25+
<DatePick v-model="selectedDate" />
26+
</template>
27+
28+
<script setup lang="ts">
29+
import { ref } from 'vue'
30+
import DatePick from 'vue3-datepick'
31+
32+
const selectedDate = ref('')
33+
</script>
34+
```
35+
36+
In this example, the `DatePick` component is imported and used with `v-model` to bind the selected date to the `selectedDate` variable.

0 commit comments

Comments
 (0)