Skip to content

Commit 9da5aa9

Browse files
cab-mikeecab-mikee
committed
chore: finish date and time docs
1 parent 5f7dbdf commit 9da5aa9

File tree

29 files changed

+1616
-1308
lines changed

29 files changed

+1616
-1308
lines changed

‎bun.lock‎

Lines changed: 62 additions & 65 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/.vitepress/config.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,10 @@ const sidebar = [
7777
items: [
7878
{ text: 'Overview', link: '/vue/' },
7979
{ text: 'Credit Card Input', link: '/vue/credit-card' },
80-
{ text: 'Date Input', link: '/vue/date' },
80+
{ text: 'DateTime Input', link: '/vue/datetime' },
8181
{ text: 'Time Input', link: '/vue/time' },
8282
{ text: 'Numeral Input', link: '/vue/numeral' },
8383
{ text: 'Google Places', link: '/vue/google-places' },
84-
{ text: 'DateTime Picker', link: '/vue/datetime-picker' },
8584
],
8685
},
8786
{

‎docs/.vitepress/theme/components/CreditCardDemo.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script setup lang="ts">
2-
import type { UnifiedInputType } from 'ts-inputs-vue'
3-
import { UnifiedInput } from 'ts-inputs-vue'
2+
import { BaseInput } from 'ts-inputs-vue'
43
import { ref } from 'vue'
54
65
const cardNumber = ref('')
@@ -11,10 +10,10 @@ function handleCardTypeChange(type: UnifiedInputType) {
1110
</script>
1211

1312
<template>
14-
<UnifiedInput
13+
<BaseInput
1514
v-model="cardNumber"
1615
type="credit-card"
17-
class="block w-1/3 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
16+
class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
1817
placeholder="Enter card number"
1918
@card-type-change="handleCardTypeChange"
2019
/>

‎docs/.vitepress/theme/components/DateInputDemo.vue‎

Lines changed: 176 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,183 @@
11
<script setup lang="ts">
2-
import { BaseInputs } from 'ts-inputs-vue'
3-
import { ref } from 'vue'
2+
import { BaseInput } from 'ts-inputs-vue'
3+
import { onMounted, ref } from 'vue'
44
55
const date = ref('')
6+
const dateRange = ref('')
7+
const month = ref('')
8+
const year = ref('')
9+
const week = ref('')
10+
const quarter = ref('')
11+
const multiDates = ref('')
12+
const flowDate = ref('')
13+
14+
// For demo purposes
15+
onMounted(() => {
16+
const today = new Date()
17+
date.value = today.toISOString().split('T')[0]
18+
month.value = today.toISOString().split('T')[0]
19+
year.value = today.toISOString().split('T')[0]
20+
week.value = today.toISOString().split('T')[0]
21+
quarter.value = today.toISOString().split('T')[0]
22+
flowDate.value = today.toISOString().split('T')[0]
23+
})
624
</script>
725

826
<template>
9-
<BaseInputs
10-
v-model="date"
11-
type="date"
12-
class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
13-
placeholder="Enter date"
14-
/>
27+
<div class="demo-container">
28+
<div class="demo-item">
29+
<h3>Basic Date Picker</h3>
30+
<BaseInput
31+
v-model="date"
32+
type="date"
33+
:date-options="{
34+
format: 'yyyy-MM-dd',
35+
autoApply: true,
36+
}"
37+
placeholder="Select date"
38+
/>
39+
<div class="value-display">
40+
Selected: {{ date }}
41+
</div>
42+
</div>
43+
44+
<div class="demo-item">
45+
<h3>Range Picker</h3>
46+
<BaseInput
47+
v-model="dateRange"
48+
type="date"
49+
:date-options="{
50+
range: true,
51+
format: 'yyyy-MM-dd',
52+
autoApply: true,
53+
}"
54+
placeholder="Select date range"
55+
/>
56+
<div class="value-display">
57+
Selected: {{ dateRange }}
58+
</div>
59+
</div>
60+
61+
<div class="demo-item">
62+
<h3>Month Picker</h3>
63+
<BaseInput
64+
v-model="month"
65+
type="date"
66+
:date-options="{
67+
monthPicker: true,
68+
format: 'MMMM yyyy',
69+
}"
70+
placeholder="Select month"
71+
/>
72+
<div class="value-display">
73+
Selected: {{ month }}
74+
</div>
75+
</div>
76+
77+
<div class="demo-item">
78+
<h3>Year Picker</h3>
79+
<BaseInput
80+
v-model="year"
81+
type="date"
82+
:date-options="{
83+
yearPicker: true,
84+
format: 'yyyy',
85+
}"
86+
placeholder="Select year"
87+
/>
88+
<div class="value-display">
89+
Selected: {{ year }}
90+
</div>
91+
</div>
92+
93+
<div class="demo-item">
94+
<h3>Week Picker</h3>
95+
<BaseInput
96+
v-model="week"
97+
type="date"
98+
:date-options="{
99+
weekPicker: true,
100+
}"
101+
placeholder="Select week"
102+
/>
103+
<div class="value-display">
104+
Selected: {{ week }}
105+
</div>
106+
</div>
107+
108+
<div class="demo-item">
109+
<h3>Quarter Picker</h3>
110+
<BaseInput
111+
v-model="quarter"
112+
type="date"
113+
:date-options="{
114+
quarterPicker: true,
115+
format: 'QQQ yyyy',
116+
}"
117+
placeholder="Select quarter"
118+
/>
119+
<div class="value-display">
120+
Selected: {{ quarter }}
121+
</div>
122+
</div>
123+
124+
<div class="demo-item">
125+
<h3>Multi Dates</h3>
126+
<BaseInput
127+
v-model="multiDates"
128+
type="date"
129+
:date-options="{
130+
multiDates: true,
131+
format: 'yyyy-MM-dd',
132+
}"
133+
placeholder="Select multiple dates"
134+
/>
135+
<div class="value-display">
136+
Selected: {{ multiDates }}
137+
</div>
138+
</div>
139+
140+
<div class="demo-item">
141+
<h3>With Flow Steps</h3>
142+
<BaseInput
143+
v-model="flowDate"
144+
type="date"
145+
:date-options="{
146+
flow: ['month', 'year', 'calendar'],
147+
format: 'yyyy-MM-dd',
148+
}"
149+
placeholder="Select date with flow"
150+
/>
151+
<div class="value-display">
152+
Selected: {{ flowDate }}
153+
</div>
154+
</div>
155+
</div>
15156
</template>
157+
158+
<style scoped>
159+
.demo-container {
160+
display: grid;
161+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
162+
gap: 2rem;
163+
padding: 1rem;
164+
}
165+
166+
.demo-item {
167+
display: flex;
168+
flex-direction: column;
169+
gap: 0.5rem;
170+
}
171+
172+
h3 {
173+
margin: 0;
174+
font-size: 1rem;
175+
color: var(--vp-c-text-1);
176+
}
177+
178+
.value-display {
179+
font-size: 0.875rem;
180+
color: var(--vp-c-text-2);
181+
margin-top: 0.5rem;
182+
}
183+
</style>

‎docs/.vitepress/theme/components/TimeInputDemo.vue‎

Lines changed: 105 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,112 @@
11
<script setup lang="ts">
2-
import { TimeInput } from 'ts-inputs-vue'
2+
import { BaseInput } from 'ts-inputs-vue'
33
import { ref } from 'vue'
44
5-
const time = ref('')
5+
const time12h = ref('')
6+
const time24h = ref('')
7+
const timeWithSeconds = ref('')
8+
const timeWithIncrements = ref('')
69
</script>
710

811
<template>
9-
<TimeInput
10-
v-model="time"
11-
class="block w-1/3 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
12-
format="24h"
13-
placeholder="Enter time"
14-
/>
12+
<div class="demo-container">
13+
<div class="demo-item">
14+
<h3>12-hour Format</h3>
15+
<BaseInput
16+
v-model="time12h"
17+
type="date"
18+
:date-options="{
19+
timePicker: true,
20+
is24: false,
21+
format: 'hh:mm a',
22+
}"
23+
placeholder="Select time (12h)"
24+
/>
25+
<div class="value-display">
26+
Selected: {{ time12h }}
27+
</div>
28+
</div>
29+
30+
<div class="demo-item">
31+
<h3>24-hour Format</h3>
32+
<BaseInput
33+
v-model="time24h"
34+
type="date"
35+
:date-options="{
36+
timePicker: true,
37+
is24: true,
38+
format: 'HH:mm',
39+
}"
40+
placeholder="Select time (24h)"
41+
/>
42+
<div class="value-display">
43+
Selected: {{ time24h }}
44+
</div>
45+
</div>
46+
47+
<div class="demo-item">
48+
<h3>With Seconds</h3>
49+
<BaseInput
50+
v-model="timeWithSeconds"
51+
type="date"
52+
:date-options="{
53+
timePicker: true,
54+
is24: true,
55+
enableSeconds: true,
56+
format: 'HH:mm:ss',
57+
}"
58+
placeholder="Select time with seconds"
59+
/>
60+
<div class="value-display">
61+
Selected: {{ timeWithSeconds }}
62+
</div>
63+
</div>
64+
65+
<div class="demo-item">
66+
<h3>With Custom Increments</h3>
67+
<BaseInput
68+
v-model="timeWithIncrements"
69+
type="date"
70+
:date-options="{
71+
timePicker: true,
72+
is24: true,
73+
hoursIncrement: 2,
74+
minutesIncrement: 15,
75+
secondsIncrement: 30,
76+
format: 'HH:mm:ss',
77+
}"
78+
placeholder="Select time with increments"
79+
/>
80+
<div class="value-display">
81+
Selected: {{ timeWithIncrements }}
82+
</div>
83+
</div>
84+
</div>
1585
</template>
86+
87+
<style scoped>
88+
.demo-container {
89+
display: grid;
90+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
91+
gap: 2rem;
92+
padding: 1rem;
93+
}
94+
95+
.demo-item {
96+
display: flex;
97+
flex-direction: column;
98+
gap: 0.5rem;
99+
}
100+
101+
h3 {
102+
margin: 0;
103+
font-size: 1rem;
104+
color: var(--vp-c-text-1);
105+
}
106+
107+
.value-display {
108+
font-size: 0.875rem;
109+
color: var(--vp-c-text-2);
110+
margin-top: 0.5rem;
111+
}
112+
</style>

‎docs/vue/date.md‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

0 commit comments

Comments
 (0)