Skip to content

Commit a4e0982

Browse files
cab-mikeecab-mikee
committed
chore: add numeral inputs
1 parent daf9b33 commit a4e0982

File tree

7 files changed

+616
-88
lines changed

7 files changed

+616
-88
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const cardTypeName = computed(() => {
5252
<BaseInput
5353
v-model="baseInputCardNumber"
5454
type="credit-card"
55-
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"
55+
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"
5656
placeholder="Enter card number"
5757
@card-type="handleCardTypeChange"
5858
/>
@@ -64,7 +64,7 @@ const cardTypeName = computed(() => {
6464
<div class="input-wrapper">
6565
<CreditCardInput
6666
v-model="creditCardInputNumber"
67-
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"
67+
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"
6868
placeholder="Enter card number"
6969
@card-type="handleCardTypeChange"
7070
/>

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

Lines changed: 224 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,232 @@
11
<script setup lang="ts">
22
import { NumeralInput } from 'ts-inputs-vue'
3-
import { ref } from 'vue'
3+
import { computed, ref } from 'vue'
44
55
const number = ref('')
6+
const thousandGroupStyle = ref('thousand')
7+
const delimiter = ref(',')
8+
const decimalMark = ref('.')
9+
const decimalScale = ref(2)
10+
const prefix = ref('')
11+
const stripLeadingZeroes = ref(true)
12+
const positiveOnly = ref(false)
13+
const tailPrefix = ref(false)
14+
const signBeforePrefix = ref(false)
15+
16+
const options = computed(() => ({
17+
thousandGroupStyle: thousandGroupStyle.value,
18+
delimiter: delimiter.value,
19+
decimalMark: decimalMark.value,
20+
decimalScale: decimalScale.value,
21+
prefix: prefix.value,
22+
stripLeadingZeroes: stripLeadingZeroes.value,
23+
positiveOnly: positiveOnly.value,
24+
tailPrefix: tailPrefix.value,
25+
signBeforePrefix: signBeforePrefix.value,
26+
}))
27+
28+
const formattedValue = computed(() => {
29+
if (!number.value)
30+
return ''
31+
return number.value
32+
})
633
</script>
734

835
<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-
/>
36+
<div class="demo-container">
37+
<div class="input-section">
38+
<div class="input-group">
39+
<label class="block text-sm font-medium text-gray-700">Number Input</label>
40+
<NumeralInput
41+
v-model="number"
42+
v-bind="options"
43+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
44+
placeholder="Enter a number"
45+
/>
46+
</div>
47+
48+
<div class="options-grid">
49+
<div class="option-group">
50+
<label class="block text-sm font-medium text-gray-700">Thousand Group Style</label>
51+
<select
52+
v-model="thousandGroupStyle"
53+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
54+
>
55+
<option value="thousand">
56+
Thousand (1,234,567.89)
57+
</option>
58+
<option value="lakh">
59+
Lakh (12,34,567.89)
60+
</option>
61+
<option value="wan">
62+
Wan (123,4567.89)
63+
</option>
64+
</select>
65+
</div>
66+
67+
<div class="option-group">
68+
<label class="block text-sm font-medium text-gray-700">Delimiter</label>
69+
<select
70+
v-model="delimiter"
71+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
72+
>
73+
<option value=",">
74+
Comma (,)
75+
</option>
76+
<option value=".">
77+
Dot (.)
78+
</option>
79+
<option value=" ">
80+
Space ( )
81+
</option>
82+
</select>
83+
</div>
84+
85+
<div class="option-group">
86+
<label class="block text-sm font-medium text-gray-700">Decimal Mark</label>
87+
<select
88+
v-model="decimalMark"
89+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
90+
>
91+
<option value=".">
92+
Dot (.)
93+
</option>
94+
<option value=",">
95+
Comma (,)
96+
</option>
97+
</select>
98+
</div>
99+
100+
<div class="option-group">
101+
<label class="block text-sm font-medium text-gray-700">Decimal Scale</label>
102+
<select
103+
v-model="decimalScale"
104+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
105+
>
106+
<option value="0">
107+
0
108+
</option>
109+
<option value="1">
110+
1
111+
</option>
112+
<option value="2">
113+
2
114+
</option>
115+
<option value="3">
116+
3
117+
</option>
118+
<option value="4">
119+
4
120+
</option>
121+
</select>
122+
</div>
123+
124+
<div class="option-group">
125+
<label class="block text-sm font-medium text-gray-700">Prefix</label>
126+
<input
127+
v-model="prefix"
128+
type="text"
129+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
130+
placeholder="e.g., $, €"
131+
>
132+
</div>
133+
134+
<div class="option-group">
135+
<label class="block text-sm font-medium text-gray-700">Strip Leading Zeroes</label>
136+
<select
137+
v-model="stripLeadingZeroes"
138+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
139+
>
140+
<option :value="true">
141+
Yes
142+
</option>
143+
<option :value="false">
144+
No
145+
</option>
146+
</select>
147+
</div>
148+
149+
<div class="option-group">
150+
<label class="block text-sm font-medium text-gray-700">Positive Only</label>
151+
<select
152+
v-model="positiveOnly"
153+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
154+
>
155+
<option :value="false">
156+
No
157+
</option>
158+
<option :value="true">
159+
Yes
160+
</option>
161+
</select>
162+
</div>
163+
164+
<div class="option-group">
165+
<label class="block text-sm font-medium text-gray-700">Tail Prefix</label>
166+
<select
167+
v-model="tailPrefix"
168+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
169+
>
170+
<option :value="false">
171+
No
172+
</option>
173+
<option :value="true">
174+
Yes
175+
</option>
176+
</select>
177+
</div>
178+
179+
<div class="option-group">
180+
<label class="block text-sm font-medium text-gray-700">Sign Before Prefix</label>
181+
<select
182+
v-model="signBeforePrefix"
183+
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
184+
>
185+
<option :value="false">
186+
No
187+
</option>
188+
<option :value="true">
189+
Yes
190+
</option>
191+
</select>
192+
</div>
193+
</div>
194+
</div>
195+
196+
<div class="result-section">
197+
<h3 class="text-lg font-medium text-gray-900">
198+
Result
199+
</h3>
200+
<div class="mt-2">
201+
<div class="text-sm text-gray-500">
202+
Formatted Value:
203+
</div>
204+
<div class="mt-1 font-mono text-lg">
205+
{{ formattedValue }}
206+
</div>
207+
</div>
208+
</div>
209+
</div>
15210
</template>
211+
212+
<style scoped>
213+
.demo-container {
214+
@apply max-w-4xl mx-auto p-6 bg-white rounded-lg shadow;
215+
}
216+
217+
.input-section {
218+
@apply space-y-6;
219+
}
220+
221+
.options-grid {
222+
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
223+
}
224+
225+
.option-group {
226+
@apply space-y-1;
227+
}
228+
229+
.result-section {
230+
@apply mt-6 p-4 bg-gray-50 rounded-lg;
231+
}
232+
</style>

0 commit comments

Comments
 (0)