Skip to content

Commit eb28d11

Browse files
author
Dipak Sarkar
committed
updated docs with playground
1 parent 5e695f5 commit eb28d11

File tree

15 files changed

+475
-225
lines changed

15 files changed

+475
-225
lines changed

docs/.vuepress/clientAppEnhance.js

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
11
import number from "../../src";
22
import { defineClientAppEnhance } from "@vuepress/client";
3-
import { QInput, QList, QField, QCheckbox } from "quasar";
4-
5-
// Import Quasar css
6-
import "quasar/dist/quasar.css";
3+
import "virtual:windi.css";
74

85
export default defineClientAppEnhance(({ app }) => {
9-
app.component("q-input", QInput);
10-
app.component("q-list", QList);
11-
app.component("q-field", QField);
12-
app.component("q-checkbox", QCheckbox);
136
app.use(number);
147
});
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<template>
2+
<input
3+
:value="modelValue"
4+
type="text"
5+
class="block w-full transition-all rounded-md shadow-sm focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50"
6+
@input="$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+
label: {
18+
type: String,
19+
required: false,
20+
},
21+
},
22+
emits: ["update:modelValue"],
23+
};
24+
</script>
25+
26+
<style scoped></style>
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>
Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<template>
2+
<input
3+
type="text"
4+
autocomplete="off"
5+
:value="maskedValue"
6+
@change="change"
7+
@input="input"
8+
v-number="config"
9+
class="v-number"
10+
/>
11+
</template>
12+
13+
<script>
14+
import directive from "../../../src/directive";
15+
import options from "../../../src/options";
16+
17+
export default {
18+
props: {
19+
modelValue: {
20+
required: true,
21+
},
22+
nullValue: {
23+
type: [Number, String],
24+
default: () => options.nullValue,
25+
},
26+
masked: {
27+
type: Boolean,
28+
default: false,
29+
},
30+
reverseFill: {
31+
type: Boolean,
32+
default: options.reverseFill,
33+
},
34+
precision: {
35+
type: Number,
36+
default: () => options.precision,
37+
},
38+
minimumFractionDigits: {
39+
type: [Number, Boolean],
40+
default: () => options.minimumFractionDigits,
41+
},
42+
decimal: {
43+
type: String,
44+
default: () => options.decimal,
45+
},
46+
separator: {
47+
type: String,
48+
default: () => options.separator,
49+
},
50+
prefix: {
51+
type: String,
52+
default: () => options.prefix,
53+
},
54+
suffix: {
55+
type: String,
56+
default: () => options.suffix,
57+
},
58+
},
59+
directives: {
60+
number: directive,
61+
},
62+
emits: ["update:modelValue"],
63+
data() {
64+
return {
65+
maskedValue: this.modelValue,
66+
unmaskedValue: null,
67+
};
68+
},
69+
methods: {
70+
input({ target }) {
71+
this.maskedValue = target.value;
72+
this.unmaskedValue = target.unmaskedValue;
73+
},
74+
change() {
75+
this.$emit("update:modelValue", this.emittedValue);
76+
},
77+
},
78+
computed: {
79+
emittedValue() {
80+
return this.masked ? this.maskedValue : this.unmaskedValue;
81+
},
82+
config() {
83+
const config = {};
84+
Object.keys(this.$props)
85+
.filter((item) => item !== "modelValue")
86+
.forEach((item) => {
87+
config[item] = this.$props[item];
88+
});
89+
return config;
90+
},
91+
},
92+
watch: {
93+
modelValue(val) {
94+
if (this.unmaskedValue !== val) {
95+
this.maskedValue = val;
96+
}
97+
},
98+
config: {
99+
immediate: true,
100+
handler(val) {
101+
this.$emit(
102+
"update:modelValue",
103+
this.emittedValue || this.unmaskedValue || this.maskedValue
104+
);
105+
},
106+
},
107+
},
108+
};
109+
</script>
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="block w-full transition-all rounded-md shadow-sm focus:border-primary focus:ring 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>
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<label class="flex items-center" :class="{ 'text-gray-300 cursor-not-allowed': disabled, 'cursor-pointer': !disabled }">
3+
<input
4+
:checked="modelValue"
5+
:disabled="disabled"
6+
type="checkbox"
7+
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"
8+
@input="$emit('update:modelValue', $event.target.checked)"
9+
/>
10+
<span>{{ label }}</span>
11+
</label>
12+
</template>
13+
14+
<script>
15+
export default {
16+
name: 'Checkbox',
17+
props: {
18+
modelValue: Boolean,
19+
disabled: {
20+
type: Boolean,
21+
default: false
22+
},
23+
label: {
24+
type: String,
25+
required: true
26+
}
27+
},
28+
emits: ['update:modelValue']
29+
}
30+
</script>
31+
32+
<style scoped></style>

docs/.vuepress/components/Dialog.vue

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

0 commit comments

Comments
 (0)