Skip to content

Commit 57d6667

Browse files
dipaksarkardipaksarkar
committed
updated docs
1 parent 28d45e9 commit 57d6667

31 files changed

+7685
-6416
lines changed

‎docs/.gitignore‎

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

‎docs/.vuepress/components/BaseInput.vue‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<template>
2+
<input
3+
:value="modelValue"
4+
:type="type"
5+
class="shadow-sm rounded-md text-base transition-all disabled:cursor-not-allowed disabled:border-gray-300 disabled:text-gray-300 focus:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-50"
6+
@change="$emit('update:modelValue', $event.target.value)"
7+
/>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: 'BaseInput',
13+
props: {
14+
modelValue: {
15+
default: undefined
16+
},
17+
type: {
18+
type: String,
19+
default: 'text'
20+
},
21+
label: {
22+
type: String,
23+
required: false
24+
}
25+
},
26+
emits: ['update:modelValue']
27+
}
28+
</script>
29+
30+
<style scoped></style>

‎docs/.vuepress/components/BaseLabel.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<section class="mb-12 min-w-0">
3+
<div class="flex items-center justify-between mb-3">
4+
<span class="text-xl font-medium">{{ label }}</span>
5+
</div>
6+
<div v-if="description" class="mb-3">{{ description }}</div>
7+
<slot />
8+
</section>
9+
</template>
10+
11+
<script>
12+
export default {
13+
name: 'BaseLabel',
14+
props: {
15+
label: {
16+
type: String,
17+
required: true,
18+
},
19+
description: {
20+
type: String,
21+
default: undefined,
22+
},
23+
},
24+
}
25+
</script>
26+
27+
<style scoped></style>

‎docs/.vuepress/components/BaseSelect.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<select
3+
:value="modelValue"
4+
type="text"
5+
class="shadow-sm rounded-md text-base transition-all disabled:cursor-not-allowed disabled:border-gray-300 disabled:text-gray-300 focus:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-50ß"
6+
@input="$emit('update:modelValue', $event.target.value)"
7+
>
8+
<slot></slot>
9+
</select>
10+
</template>
11+
12+
<script>
13+
export default {
14+
name: 'BaseInput',
15+
props: {
16+
modelValue: {
17+
default: undefined,
18+
},
19+
label: {
20+
type: String,
21+
required: false,
22+
},
23+
},
24+
emits: ['update:modelValue'],
25+
}
26+
</script>
27+
28+
<style scoped></style>

‎docs/.vuepress/components/Checkbox.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<label
3+
class="flex items-center"
4+
:class="{
5+
'text-gray-300 cursor-not-allowed': disabled,
6+
'cursor-pointer': !disabled,
7+
}"
8+
>
9+
<input
10+
:checked="modelValue"
11+
:disabled="disabled"
12+
type="checkbox"
13+
class="w-5 h-5 mr-2 rounded rounded border-gray-300 shadow-sm disabled:(text-gray-300 cursor-not-allowed) not-disabled:(text-primary cursor-pointer) focus:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-50"
14+
@input="$emit('update:modelValue', $event.target.checked)"
15+
/>
16+
<span>{{ label }}</span>
17+
</label>
18+
</template>
19+
20+
<script>
21+
export default {
22+
name: 'Checkbox',
23+
props: {
24+
modelValue: Boolean,
25+
disabled: {
26+
type: Boolean,
27+
default: false,
28+
},
29+
label: {
30+
type: String,
31+
required: true,
32+
},
33+
},
34+
emits: ['update:modelValue'],
35+
}
36+
</script>
37+
38+
<style scoped></style>

‎docs/.vuepress/components/Dialog.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div
3+
v-if="modelValue"
4+
class="w-screen h-screen fixed z-50 inset-0 flex bg-gray-600 bg-opacity-50"
5+
@click.self="$emit('update:modelValue', false)"
6+
>
7+
<div
8+
class="max-w-md md:relative m-auto p-8 bg-white rounded w-full h-auto shadow"
9+
>
10+
<slot />
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script>
16+
export default {
17+
name: 'Dialog',
18+
props: {
19+
modelValue: Boolean,
20+
},
21+
emits: ['update:modelValue'],
22+
}
23+
</script>

‎docs/.vuepress/components/PlayGround.vue‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
<template>
2+
<div>
3+
<div class="grid gap-y-4 md:grid-cols-2 md:gap-x-8 items-center my-8">
4+
<div class="grid">
5+
<div class="font-medium mb-2">Component</div>
6+
<VueNumber
7+
v-if="updated"
8+
v-model="price"
9+
v-bind="config"
10+
class="shadow-sm rounded-md text-base transition-all disabled:cursor-not-allowed disabled:border-gray-300 disabled:text-gray-300 focus:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-50"
11+
@update:model-value="onChange"
12+
@input="onInput"
13+
@focus="onFocus"
14+
@blur="onBlur"
15+
/>
16+
<div class="mt-2">
17+
Number value: <code class="ml-2">{{ price }}</code>
18+
</div>
19+
</div>
20+
<div class="grid">
21+
<div class="font-medium mb-2">Directive</div>
22+
<BaseInput
23+
v-if="updated"
24+
v-model="priceDirective"
25+
v-number="config"
26+
@update:model-value="onChange"
27+
@input="onInput"
28+
@focus="onFocus"
29+
@blur="onBlur"
30+
/>
31+
<div class="mt-2">
32+
Value: <code class="ml-2">{{ priceDirective }}</code>
33+
</div>
34+
</div>
35+
</div>
36+
<div class="flex items-center justify-between mb-2">
37+
<span class="text-2xl font-bold">Options</span>
38+
<div>
39+
<button
40+
class="transition-all bg-white hover:bg-gray-100 text-gray-800 font-semibold text-sm py-2 px-4 border border-gray-300 rounded shadow focus:outline-none focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
41+
@click="exportDialogVisible = true"
42+
>
43+
Export
44+
</button>
45+
<Dialog v-model="exportDialogVisible">
46+
<pre
47+
class="m-0"
48+
style="margin: 0"
49+
>{{ config }}</pre
50+
>
51+
</Dialog>
52+
</div>
53+
</div>
54+
<hr class="mb-8" />
55+
<div class="grid grid-cols-1 md:grid-cols-3 gap-x-8">
56+
<div class="mb-5 min-w-0 grid">
57+
<div class="mb-2 font-medium">Separator</div>
58+
<BaseInput
59+
type="text"
60+
v-model="config.separator"
61+
/>
62+
</div>
63+
<div class="mb-5 min-w-0 grid">
64+
<div class="mb-2 font-medium">Decimal</div>
65+
<BaseInput
66+
type="text"
67+
v-model="config.decimal"
68+
/>
69+
</div>
70+
<div class="mb-5 min-w-0 grid">
71+
<div class="mb-2 font-medium">Prefix</div>
72+
<BaseInput
73+
type="text"
74+
v-model="config.prefix"
75+
/>
76+
</div>
77+
<div class="mb-5 min-w-0 grid">
78+
<div class="mb-2 font-medium">Suffix</div>
79+
<BaseInput
80+
type="text"
81+
v-model="config.suffix"
82+
/>
83+
</div>
84+
<div class="mb-5 min-w-0 grid">
85+
<div class="mb-2 font-medium">Precision</div>
86+
<BaseInput
87+
type="number"
88+
v-model.number="config.precision"
89+
/>
90+
</div>
91+
<div class="mb-5 min-w-0 grid">
92+
<div class="mb-2 font-medium">Null value</div>
93+
<BaseInput
94+
type="text"
95+
v-model="config.nullValue"
96+
/>
97+
</div>
98+
<div class="mb-5 min-w-0 grid">
99+
<div class="mb-2 font-medium">Minimum fraction digits</div>
100+
<BaseInput
101+
type="number"
102+
v-model.number="config.minimumFractionDigits"
103+
/>
104+
</div>
105+
<div class="mb-5 min-w-0 grid">
106+
<div class="mb-2 font-medium">Minimum value</div>
107+
<BaseInput
108+
type="number"
109+
v-model.number="config.min"
110+
/>
111+
</div>
112+
<div class="mb-5 min-w-0 grid">
113+
<div class="mb-2 font-medium">Maximum value</div>
114+
<BaseInput
115+
type="number"
116+
v-model.number="config.max"
117+
/>
118+
</div>
119+
</div>
120+
<div class="mb-8">
121+
<Checkbox
122+
v-model="config.masked"
123+
label="Masked?"
124+
/>
125+
<Checkbox
126+
v-model="config.reverseFill"
127+
label="Reverse Fill?"
128+
/>
129+
<Checkbox
130+
v-model="config.prefill"
131+
label="Prefill?"
132+
/>
133+
</div>
134+
</div>
135+
</template>
136+
137+
<script>
138+
export default {
139+
data() {
140+
return {
141+
updated: true,
142+
exportDialogVisible: false,
143+
price: 1234.567,
144+
priceDirective: 1234.567,
145+
config: {
146+
decimal: '.',
147+
separator: ',',
148+
prefix: '$',
149+
suffix: '',
150+
precision: 2,
151+
nullValue: '',
152+
masked: false,
153+
reverseFill: false
154+
}
155+
}
156+
},
157+
watch: {
158+
config: {
159+
deep: true,
160+
handler(val) {
161+
this.updated = false
162+
this.$nextTick(() => {
163+
this.updated = true
164+
})
165+
}
166+
}
167+
},
168+
methods: {
169+
onChange() {
170+
console.log('onChange', arguments)
171+
// setTimeout(() => {
172+
// this.price = 1500.629
173+
// this.priceDirective = 1500.629
174+
// }, 3000)
175+
},
176+
onInput() {
177+
console.log('onInput', arguments)
178+
},
179+
onFocus() {
180+
console.log('onFocus', arguments)
181+
},
182+
onBlur() {
183+
console.log('onBlur', arguments)
184+
}
185+
}
186+
}
187+
</script>

0 commit comments

Comments
 (0)