Skip to content

Commit 8e66ea8

Browse files
cab-mikeecab-mikee
committed
chore: add google map components
1 parent 41b7ce4 commit 8e66ea8

File tree

19 files changed

+481
-47
lines changed

19 files changed

+481
-47
lines changed

‎bun.lock‎

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

‎docs/.vitepress/components.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,17 @@ export {}
88
/* prettier-ignore */
99
declare module 'vue' {
1010
export interface GlobalComponents {
11+
copy: typeof import('./theme/components/CreditCardDemo copy.vue')['default']
1112
CreditCardDemo: typeof import('./theme/components/CreditCardDemo.vue')['default']
13+
DateInput: typeof import('./theme/components/DateInput.vue')['default']
14+
DateInputDemo: typeof import('./theme/components/DateInputDemo.vue')['default']
15+
GooglePlacesInputDemo: typeof import('./theme/components/GooglePlacesInputDemo.vue')['default']
1216
Home: typeof import('./theme/components/Home.vue')['default']
1317
HomeContributors: typeof import('./theme/components/HomeContributors.vue')['default']
1418
HomeSponsors: typeof import('./theme/components/HomeSponsors.vue')['default']
1519
HomeTeam: typeof import('./theme/components/HomeTeam.vue')['default']
20+
NumeralInputDemo: typeof import('./theme/components/NumeralInputDemo.vue')['default']
1621
TeamMember: typeof import('./theme/components/TeamMember.vue')['default']
22+
TimeInputDemo: typeof import('./theme/components/TimeInputDemo.vue')['default']
1723
}
1824
}

‎docs/.vitepress/config.ts‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,13 +71,24 @@ const sidebar = [
7171
{
7272
text: 'Advanced',
7373
items: [
74-
{ text: 'Overview', link: '/vue/' },
75-
{ text: 'Credit Card Input', link: '/vue/credit-card' },
76-
{ text: 'Date Input', link: '/vue/date' },
77-
{ text: 'Time Input', link: '/vue/time' },
78-
{ text: 'Numeral Input', link: '/vue/numeral' },
74+
{
75+
text: 'Vue ',
76+
items: [
77+
{ text: 'Overview', link: '/vue/' },
78+
{ text: 'Credit Card Input', link: '/vue/credit-card' },
79+
{ text: 'Date Input', link: '/vue/date' },
80+
{ text: 'Time Input', link: '/vue/time' },
81+
{ text: 'Numeral Input', link: '/vue/numeral' },
82+
{ text: 'Google Places Autocomplete', link: '/vue/google-places' },
83+
],
84+
},
85+
{
86+
text: 'React',
87+
items: [
88+
{ text: 'Coming Soon' },
89+
],
90+
},
7991
],
80-
8192
},
8293
{ text: 'Showcase', link: '/Showcase' },
8394
]

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ function handleCardTypeChange(type: CreditCardType) {
1313
<template>
1414
<CreditCardInput
1515
v-model="cardNumber"
16+
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"
1617
placeholder="Enter card number"
1718
@card-type-change="handleCardTypeChange"
1819
/>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
import { DateInput } from 'ts-inputs-vue'
3+
import { ref } from 'vue'
4+
5+
const date = ref('')
6+
</script>
7+
8+
<template>
9+
<DateInput
10+
v-model="date"
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+
pattern="YYYY-MM-DD"
13+
placeholder="Enter date"
14+
/>
15+
</template>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script setup lang="ts">
2+
import { GooglePlacesInput } from 'ts-inputs-vue'
3+
import { ref } from 'vue'
4+
5+
const location = ref('')
6+
const apiKey = 'AIzaSyCtD4sE0Pvyy6Ey1GSAneSFQIVJA0aBjxE'
7+
8+
function handlePlaceSelected(place: google.maps.places.PlaceResult) {
9+
console.log('Selected place:', place)
10+
// Access place.geometry.location for coordinates
11+
// Access place.formatted_address for the full address
12+
}
13+
</script>
14+
15+
<template>
16+
<GooglePlacesInput
17+
v-model="location"
18+
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 "
19+
:api-key="apiKey"
20+
@place-selected="handlePlaceSelected"
21+
/>
22+
</template>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
import { NumeralInput } from 'ts-inputs-vue'
3+
import { ref } from 'vue'
4+
5+
const number = ref('')
6+
</script>
7+
8+
<template>
9+
<NumeralInput
10+
v-model="number"
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+
thousand-group-style="thousand"
13+
placeholder="Enter number"
14+
/>
15+
</template>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script setup lang="ts">
2+
import { TimeInput } from 'ts-inputs-vue'
3+
import { ref } from 'vue'
4+
5+
const time = ref('')
6+
</script>
7+
8+
<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+
/>
15+
</template>

‎docs/vue/credit-card.md‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,18 @@ function handleCardTypeChange(type: CreditCardType) {
3131

3232
## Props
3333

34-
- `modelValue` (required): The v-model value
35-
- `delimiter` (optional): Custom delimiter (defaults to space)
36-
- `className` (optional): Additional CSS classes
37-
- `placeholder` (optional): Input placeholder text
38-
- `options` (optional): Additional formatting options
34+
| Prop | Type | Default | Description |
35+
|------|------|---------|-------------|
36+
| `modelValue` | `string` | `''` | The v-model binding value |
37+
| `delimiter` | `string` | `' '` | Custom delimiter for card number formatting |
38+
| `className` | `string` | - | Additional CSS classes |
39+
| `placeholder` | `string` | - | Input placeholder text |
40+
| `options` | `object` | - | Additional formatting options |
3941

4042
## Events
4143

42-
- `update:modelValue`: Emitted when the value changes
43-
- `cardTypeChange`: Emitted when the card type is detected
44+
| Event | Payload | Description |
45+
|-------|---------|-------------|
46+
| `update:modelValue` | `string` | Emitted when the input value changes |
47+
| `cardTypeChange` | `CreditCardType` | Emitted when the card type is detected |
48+
| `blur` | `Event` | Emitted when the input loses focus |

‎docs/vue/date.md‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,23 @@ const date = ref('')
2020
</template>
2121
```
2222

23+
## Demo
24+
25+
<DateInputDemo />
26+
2327
## Props
2428

25-
- `modelValue` (required): The v-model value
26-
- `pattern` (optional): Date format pattern (defaults to 'YYYY-MM-DD')
27-
- `className` (optional): Additional CSS classes
28-
- `placeholder` (optional): Input placeholder text
29-
- `options` (optional): Additional formatting options
29+
| Prop | Type | Default | Description |
30+
|------|------|---------|-------------|
31+
| `modelValue` | `string` | `''` | The v-model binding value |
32+
| `pattern` | `string` | `'YYYY-MM-DD'` | Date format pattern |
33+
| `className` | `string` | - | Additional CSS classes |
34+
| `placeholder` | `string` | - | Input placeholder text |
35+
| `options` | `object` | - | Additional formatting options |
3036

3137
## Events
3238

33-
- `update:modelValue`: Emitted when the value changes
39+
| Event | Payload | Description |
40+
|-------|---------|-------------|
41+
| `update:modelValue` | `string` | Emitted when the input value changes |
42+
| `blur` | `Event` | Emitted when the input loses focus |

0 commit comments

Comments
 (0)