chore: wip

Author: cab-mikee

docs/.vitepress/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     CreditCardDemo: typeof import('./theme/components/CreditCardDemo.vue')['default']
     DateInputDemo: typeof import('./theme/components/DateInputDemo.vue')['default']
+    DateTimeDemo: typeof import('./theme/components/DateTimeDemo.vue')['default']
     GooglePlacesInputDemo: typeof import('./theme/components/GooglePlacesInputDemo.vue')['default']
     Home: typeof import('./theme/components/Home.vue')['default']
     HomeContributors: typeof import('./theme/components/HomeContributors.vue')['default']

docs/.vitepress/config.ts

@@ -81,6 +81,7 @@ const sidebar = [
           { text: 'Time Input', link: '/vue/time' },
           { text: 'Numeral Input', link: '/vue/numeral' },
           { text: 'Google Places', link: '/vue/google-places' },
+          { text: 'DateTime Picker', link: '/vue/datetime-picker' },
         ],
       },
       {

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

@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import type { CreditCardType } from 'ts-inputs-vue'
-import { CreditCardInput } from 'ts-inputs-vue'
+import type { UnifiedInputType } from 'ts-inputs-vue'
+import { UnifiedInput } from 'ts-inputs-vue'
 import { ref } from 'vue'
 
 const cardNumber = ref('')
 
-function handleCardTypeChange(type: CreditCardType) {
+function handleCardTypeChange(type: UnifiedInputType) {
   console.log('Card type:', type)
 }
 </script>
 
 <template>
-  <CreditCardInput
+  <UnifiedInput
     v-model="cardNumber"
+    type="credit-card"
     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"
     placeholder="Enter card number"
     @card-type-change="handleCardTypeChange"

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { DateInput } from 'ts-inputs-vue'
+import { TSInputs } from 'ts-inputs-vue'
 import { ref } from 'vue'
 
 const date = ref('')
 </script>
 
 <template>
-  <DateInput
+  <TSInputs
     v-model="date"
-    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"
-    pattern="YYYY-MM-DD"
+    type="date"
+    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"
     placeholder="Enter date"
   />
 </template>

docs/vue/datetime-picker.md

@@ -0,0 +1,3 @@
+## Hello
+
+<DateTimeDemo />