chore: improve docs

Author: cab-mikee

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

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { CreditCardType } from 'ts-inputs'
-import { BaseInput, CreditCardInput } from 'ts-inputs-vue'
+import { BaseInput } from 'ts-inputs-vue'
 import { computed, ref } from 'vue'
 
-const baseInputCardNumber = ref('')
-const creditCardInputNumber = ref('')
+const cardNumber = ref('')
+const delimiter = ref(' ')
 const cardType = ref<CreditCardType | null>(null)
 
+const creditCardOptions = computed(() => ({
+  delimiter: delimiter.value,
+}))
+
 function handleCardTypeChange(type: CreditCardType) {
   cardType.value = type
 }
@@ -45,83 +49,70 @@ const cardTypeName = computed(() => {
 
 <template>
   <div class="demo-container">
-    <div class="demo-section">
-      <h3>Using BaseInput</h3>
-      <div class="input-wrapper">
+    <div class="input-section">
+      <div class="input-group">
+        <label class="block text-sm font-medium text-gray-700">Credit Card Input</label>
         <BaseInput
-          v-model="baseInputCardNumber"
+          v-model="cardNumber"
           type="credit-card"
-          class-name="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"
+          :credit-card-options="creditCardOptions"
+          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
           placeholder="Enter card number"
           @card-type="handleCardTypeChange"
         />
       </div>
-    </div>
 
-    <div class="demo-section">
-      <h3>Using CreditCardInput</h3>
-      <div class="input-wrapper">
-        <CreditCardInput
-          v-model="creditCardInputNumber"
-          class-name="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 card number"
-          @card-type="handleCardTypeChange"
-        />
+      <div class="options-grid">
+        <div class="option-group">
+          <label class="block text-sm font-medium text-gray-700">Delimiter</label>
+          <select
+            v-model="delimiter"
+            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+          >
+            <option value=" ">
+              Space ( )
+            </option>
+            <option value="-">
+              Hyphen (-)
+            </option>
+            <option value=".">
+              Dot (.)
+            </option>
+          </select>
+        </div>
       </div>
     </div>
 
-    <div v-if="cardType" class="card-info">
-      <img v-if="cardIcon" :src="cardIcon" :alt="cardTypeName" class="card-icon">
-      <span class="card-type">{{ cardTypeName }}</span>
+    <div v-if="cardType" class="result-section">
+      <h3 class="text-lg font-medium text-gray-900">
+        Card Information
+      </h3>
+      <div class="mt-2 flex items-center gap-2">
+        <img v-if="cardIcon" :src="cardIcon" :alt="cardTypeName" class="w-6 h-6">
+        <span class="text-sm text-gray-500">{{ cardTypeName }}</span>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
 .demo-container {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  padding: 1rem;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.demo-section {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.demo-section h3 {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #374151;
+  @apply max-w-4xl mx-auto p-6 bg-white rounded-lg shadow;
 }
 
-.input-wrapper {
-  position: relative;
+.input-section {
+  @apply space-y-6;
 }
 
-.card-info {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  background-color: #f3f4f6;
-  border-radius: 0.375rem;
-  margin-top: 1rem;
+.options-grid {
+  @apply grid grid-cols-1 md:grid-cols-2 gap-4;
 }
 
-.card-icon {
-  width: 24px;
-  height: 24px;
-  object-fit: contain;
+.option-group {
+  @apply space-y-1;
 }
 
-.card-type {
-  font-size: 0.875rem;
-  color: #4b5563;
-  font-weight: 500;
+.result-section {
+  @apply mt-6 p-4 bg-gray-50 rounded-lg;
 }
 </style>

docs/vue/credit-card.md

@@ -66,6 +66,12 @@ function handleCardTypeChange(type: CreditCardType) {
 | `placeholder` | `string` | - | Input placeholder text |
 | `creditCardOptions` | `object` | - | Credit card formatting options |
 
+### creditCardOptions
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `delimiter` | `string` | `' '` | Character used to separate card number groups |
+
 ### CreditCardInput Props
 
 | Prop | Type | Default | Description |
@@ -102,4 +108,4 @@ The component automatically formats the card number based on the card type:
 - American Express: XXXX XXXXXX XXXXX
 - Other cards: XXXX XXXX XXXX XXXX
 
-You can customize the delimiter used for formatting by setting the `delimiter` prop or `creditCardOptions.delimiter`.
+You can customize the delimiter used for formatting by setting the `creditCardOptions.delimiter` prop.

package.json

@@ -44,8 +44,7 @@
     "test": "bun test",
     "dev:docs": "bun --bun vitepress dev docs",
     "build:docs": "bun --bun vitepress build docs",
-    "preview:docs": "bun --bun vitepress preview docs",
-    "typecheck": "bun --bun tsc --noEmit"
+    "preview:docs": "bun --bun vitepress preview docs"
   },
   "devDependencies": {
     "@stacksjs/docs": "^0.70.23",

packages/ts-inputs/package.json

@@ -39,7 +39,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "bun --bun build.ts",
+    "build": "bun --bun build.ts && bun run typecheck",
     "lint": "bunx --bun eslint .",
     "lint:fix": "bunx --bun eslint . --fix",
     "prepublishOnly": "bun --bun run build",

packages/vue/src/components/BaseInput.vue

@@ -6,6 +6,31 @@ import { computed, onMounted, ref, watch } from 'vue'
 import DateTimePicker from './datetime-picker/DateTimePicker.vue'
 import NumeralInput from './numeral/NumeralInput.vue'
 
+// Add Google Maps type declaration
+declare global {
+  namespace google {
+    namespace maps {
+      namespace places {
+        class Autocomplete {
+          constructor(input: HTMLInputElement, options?: AutocompleteOptions)
+          addListener(eventName: string, handler: Function): void
+          getPlace(): any
+        }
+      }
+    }
+  }
+  interface Window {
+    google: typeof google
+  }
+}
+
+interface AutocompleteOptions {
+  types?: string[]
+  componentRestrictions?: {
+    country: string | string[]
+  }
+}
+
 const props = defineProps<TSInputsProps>()
 
 const emit = defineEmits<{
@@ -409,27 +434,3 @@ interface FormatNumeralOptions {
   display: inline-block;
 }
 </style>
-
-declare global {
-  namespace google {
-    namespace maps {
-      namespace places {
-        class Autocomplete {
-          constructor(input: HTMLInputElement, options?: AutocompleteOptions)
-          addListener(eventName: string, handler: Function): void
-          getPlace(): any
-        }
-      }
-    }
-  }
-  interface Window {
-    google: typeof google
-  }
-}
-
-interface AutocompleteOptions {
-  types?: string[]
-  componentRestrictions?: {
-    country: string | string[]
-  }
-}