Skip to content

Commit 9af09d5

Browse files
kenhyuwakenhyuwa
committed
move tailwindcss to peerdependencies
1 parent b3df710 commit 9af09d5

File tree

17 files changed

+2499
-2945
lines changed

17 files changed

+2499
-2945
lines changed

‎CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,10 @@
2323
- Fix style when purge tailwindcss is enable
2424
- Add new props <code>auto-close</code>
2525
- Fix reset picker when away
26+
27+
## 1.1.1
28+
- Move dayjs to `peerDependencies`
29+
30+
## 1.1.2
31+
- Move tailwindcss to `peerDependencies`
32+
- Move Documentation to [Vue Tailwind Picker](https://vue-tailwind-picker.netlify.app/)

‎README.md

Lines changed: 2 additions & 234 deletions
Original file line numberDiff line numberDiff line change
@@ -5,240 +5,8 @@
55

66
![Example](https://raw.githubusercontent.com/kenhyuwa/vue-tailwind-picker/master/vue-tailwind-picker.gif)
77

8-
##### Default
9-
<p align="center">
10-
<img width="700px" src="https://raw.githubusercontent.com/kenhyuwa/vue-tailwind-picker/master/vue-tailwind-picker-light.png?raw=true">
11-
</p>
12-
13-
##### Dark
14-
<p align="center">
15-
<img width="700px" src="https://raw.githubusercontent.com/kenhyuwa/vue-tailwind-picker/master/vue-tailwind-picker-dark.png?raw=true">
16-
</p>
17-
18-
## Installation
19-
### NPM
20-
```bash
21-
$ npm install vue-tailwind-picker
22-
```
23-
24-
### Yarn
25-
```bash
26-
$ yarn add vue-tailwind-picker
27-
```
28-
29-
#### CDN
30-
31-
```html
32-
<script src="https://unpkg.com/vue-tailwind-picker@1.1.0/dist/vue-tailwind-picker.min.js"></script>
33-
```
34-
35-
If you are using native ES Modules, there is also an ES Modules compatible build:
36-
```html
37-
<script type="module">
38-
import VueTailwindPicker from 'https://cdn.jsdelivr.net/npm/vue-tailwind-picker@1.1.0/dist/vue-tailwind-picker.esm.js'
39-
</script>
40-
```
41-
42-
## Usage
43-
Vue.js
44-
45-
```javascript
46-
import VueTailwindPicker from 'vue-tailwind-picker'
47-
export default {
48-
components: {
49-
VueTailwindPicker
50-
}
51-
}
52-
```
53-
54-
Nuxt.js
55-
Create plugin inside plugins directory e.g v-tailwind-picker.js
56-
57-
```javascript
58-
import Vue from 'vue'
59-
import VueTailwindPicker from 'vue-tailwind-picker'
60-
61-
Vue.use(VueTailwindPicker)
62-
```
63-
64-
then add to nuxt.config.js
65-
```javascript
66-
{
67-
plugins: [
68-
'~/plugins/v-tailwind-picker'
69-
]
70-
}
71-
```
72-
73-
## Example on nuxt.js
74-
75-
```vue
76-
<template>
77-
<client-only>
78-
<VueTailwindPicker
79-
start-date="2020-01-01"
80-
end-date="2021-12-31"
81-
format-date="YYYY-MM-DD"
82-
:theme="classObject"
83-
:event-date="events"
84-
@change="(v) => (picker = v)"
85-
>
86-
<input
87-
v-model="picker"
88-
type="text"
89-
placeholder="Datepicker"
90-
readonly
91-
/>
92-
</VueTailwindPicker>
93-
</client-only>
94-
</template>
95-
96-
<script>
97-
export default {
98-
data() {
99-
return {
100-
picker: '',
101-
darkMode: false, // change to dynamic variable, this is just example,
102-
events: []
103-
}
104-
},
105-
mounted() {
106-
// get event from API
107-
// example response
108-
this.events = [
109-
{
110-
date: '2020-01-01',
111-
description: 'Happy new year',
112-
holiday: true,
113-
},
114-
{
115-
date: '2020-02-14',
116-
description: 'Happy valentine day',
117-
holiday: false,
118-
},
119-
]
120-
},
121-
computed:{
122-
classObject(){
123-
return this.darkMode ?
124-
{
125-
background: '#1A202C',
126-
text: 'text-white',
127-
border: 'border-gray-700',
128-
currentColor: 'text-gray-200',
129-
navigation: {
130-
background: 'bg-gray-800',
131-
hover: 'hover:bg-gray-700',
132-
focus: 'bg-gray-700',
133-
},
134-
picker: {
135-
rounded: 'rounded-md',
136-
selected: {
137-
background: 'bg-teal-400',
138-
border: 'border-teal-400',
139-
hover: 'hover:border-teal-400',
140-
},
141-
holiday: 'text-red-400',
142-
weekend: 'text-green-400',
143-
event: 'bg-blue-500',
144-
},
145-
event: {
146-
border: 'border-gray-700',
147-
},
148-
} :
149-
{
150-
background: '#FFFFFF',
151-
text: 'text-gray-700',
152-
border: 'border-gray-200',
153-
currentColor: 'text-gray-200',
154-
navigation: {
155-
background: 'bg-gray-100',
156-
hover: 'hover:bg-gray-200',
157-
focus: 'bg-gray-200',
158-
},
159-
picker: {
160-
rounded: 'rounded-full',
161-
selected: {
162-
background: 'bg-red-500',
163-
border: 'border-red-500',
164-
hover: 'hover:border-red-500',
165-
},
166-
holiday: 'text-red-400',
167-
weekend: 'text-green-400',
168-
event: 'bg-indigo-500',
169-
},
170-
event: {
171-
border: 'border-gray-200',
172-
},
173-
}
174-
}
175-
}
176-
}
177-
</script>
178-
```
179-
180-
## Options/Props
181-
182-
<table>
183-
<thead>
184-
<tr>
185-
<th>Props</th>
186-
<th>Type</th>
187-
<th>Required</th>
188-
<th>Default</th>
189-
</tr>
190-
</thead>
191-
<tbody>
192-
<tr>
193-
<td>startDate</td>
194-
<td>String</td>
195-
<td>false</td>
196-
<td>dayjs().format('YYYY-MM-DD')</td>
197-
</tr>
198-
<tr>
199-
<td>endDate</td>
200-
<td>String</td>
201-
<td>false</td>
202-
<td><i>undefined</i></td>
203-
</tr>
204-
<tr>
205-
<td>formatDate</td>
206-
<td>String</td>
207-
<td>false</td>
208-
<td>YYYY-MM-DD</td>
209-
</tr>
210-
<tr>
211-
<td>inline</td>
212-
<td>Boolean</td>
213-
<td>false</td>
214-
<td>false</td>
215-
</tr>
216-
<tr>
217-
<td>theme</td>
218-
<td>Object</td>
219-
<td>false</td>
220-
<td>see example, default object is light mode</td>
221-
</tr>
222-
<tr>
223-
<td>eventDate</td>
224-
<td>Array</td>
225-
<td>false</td>
226-
<td>[]</td>
227-
</tr>
228-
<tr>
229-
<td>@change</td>
230-
<td>Event</td>
231-
<td>false</td>
232-
<td>$emit()</td>
233-
</tr>
234-
<tr>
235-
<td>autoClose</td>
236-
<td>Boolean</td>
237-
<td>false</td>
238-
<td>true</td>
239-
</tr>
240-
</tbody>
241-
</table>
8+
## Documentation
9+
[Vue Tailwind Picker](https://vue-tailwind-picker.netlify.app/)
24210

24311
## Contributing
24412
please contribute to be better...

0 commit comments

Comments
 (0)