Skip to content

Commit 7ed9078

Browse files
author
Dipak Sarkar
committed
updated docs
1 parent d99b9d6 commit 7ed9078

File tree

6 files changed

+101
-85
lines changed

6 files changed

+101
-85
lines changed

‎docs/.vuepress/clientAppEnhance.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/**
2+
* Client app enhancement file.
3+
*
4+
* https://v2.vuepress.vuejs.org/reference/client-api.html#helpers
5+
*/
6+
7+
import number from "../../src";
8+
import { Quasar } from "quasar";
9+
// import "quasar/dist/quasar.css";
10+
11+
import { defineClientAppEnhance } from "@vuepress/client";
12+
13+
export default defineClientAppEnhance(({ app }) => {
14+
app.use(Quasar, {
15+
config: {
16+
dark: false
17+
}
18+
});
19+
app.use(number);
20+
});

‎docs/.vuepress/components/Example.vue

Lines changed: 80 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,125 +1,146 @@
11
<template>
22
<div class="row q-col-gutter-lg">
33
<div class="col-sm-8 col-sx-12">
4-
<q-list :dark="false" class="q-gutter-y-sm">
4+
<q-list class="q-gutter-y-sm">
55
<div class="column">
66
<div class="text-h6">Component</div>
7-
<q-field
8-
:dark="false"
9-
dense
10-
outlined
11-
v-model="price"
12-
>
13-
<template v-slot:control="{ id, floatingLabel, value, emitValue }">
7+
<q-field dense outlined v-model="price">
8+
<template
9+
v-slot:control="{ id, floatingLabel, modelValue, emitValue }"
10+
>
1411
<number
1512
:id="id"
1613
class="q-field__input"
17-
:value="value"
18-
@input="emitValue"
14+
:modelValue="modelValue"
15+
@update:model-value="emitValue"
1916
v-bind="config"
2017
v-show="floatingLabel"
2118
/>
2219
</template>
2320
</q-field>
24-
<div>Model value: <span class="text-bold">{{price}}</span></div>
21+
<div>
22+
Model value: <span class="text-bold">{{ price }}</span>
23+
</div>
2524
</div>
2625
<div class="column">
2726
<div class="text-h6">Reverse Fill</div>
28-
<q-field
29-
:dark="false"
30-
dense
31-
outlined
32-
v-model="reverseFill"
33-
>
34-
<template v-slot:control="{ id, floatingLabel, value, emitValue }">
27+
<q-field dense outlined v-model="reverseFill">
28+
<template
29+
v-slot:control="{ id, floatingLabel, modelValue, emitValue }"
30+
>
3531
<number
3632
:id="id"
3733
class="q-field__input"
38-
:value="value"
39-
@input="emitValue"
34+
:modelValue="modelValue"
35+
@update:model-value="emitValue"
4036
v-bind="configReverseFill"
4137
v-show="floatingLabel"
4238
/>
4339
</template>
4440
</q-field>
45-
<div>Model value: <span class="text-bold">{{reverseFill}}</span></div>
41+
<div>
42+
Model value: <span class="text-bold">{{ reverseFill }}</span>
43+
</div>
4644
</div>
4745
<div class="column">
4846
<div class="text-h6">Directive</div>
49-
<q-field
50-
:dark="false"
51-
dense
52-
outlined
53-
hint="masking doesn't work with directive"
54-
>
47+
<q-field dense outlined hint="masking doesn't work with directive">
5548
<template v-slot:control>
5649
<input
57-
type="tel"
50+
type="text"
5851
class="q-field__input"
5952
v-number="config"
60-
v-model="priceDirective"
53+
:value="priceDirective"
54+
@change="({ target }) => (priceDirective = target.value)"
6155
/>
6256
</template>
6357
</q-field>
64-
<div>Model value: <span class="text-bold">{{priceDirective}}</span></div>
58+
<div>
59+
Model value: <span class="text-bold">{{ priceDirective }}</span>
60+
</div>
6561
</div>
66-
<div class="column">
67-
<div class="text-h6">Directive on Custom Component of <a href="https://quasar.dev/vue-components/input" target="_blank">QInput</a></div>
62+
<!-- <div class="column">
63+
<div class="text-h6">
64+
Directive on Custom Component of
65+
<a href="https://quasar.dev/vue-components/input" target="_blank"
66+
>QInput</a
67+
>
68+
</div>
6869
<q-input
69-
:dark="false"
70+
type="text"
7071
dense
7172
outlined
72-
v-model="priceUnmasked"
73-
v-number.lazy="config"
73+
:model-value="priceUnmasked"
74+
@update:model-value="onChange"
75+
v-number="config"
7476
/>
75-
<div>Model value: <span class="text-bold">{{priceUnmasked}}</span></div>
76-
</div>
77+
<div>
78+
Model value: <span class="text-bold">{{ priceUnmasked }}</span>
79+
</div>
80+
</div> -->
7781
</q-list>
7882
</div>
7983
<div class="col-sm-4 col-xs-12">
80-
<q-list :dark="false" class="q-gutter-y-sm">
81-
<q-input :dark="false" dense v-model="config.prefix" type="text" label="Prefix" />
82-
<q-input :dark="false" dense v-model="config.suffix" type="text" label="Suffix" />
83-
<q-input :dark="false" dense v-model.number="config.precision" type="number" min="0" max="5" label="Precision" />
84-
<q-input :dark="false" dense v-model="config.decimal" type="text" label="Decimal" />
85-
<q-input :dark="false" dense v-model="config.separator" type="text" label="Separator" />
86-
<q-checkbox :dark="false" dense v-model="config.masked" label="Masked" />
87-
<q-checkbox :dark="false" dense v-model="config.reverseFill" label="Reverse Fill" />
84+
<q-list class="q-gutter-y-sm">
85+
<q-input dense v-model="config.prefix" type="text" label="Prefix" />
86+
<q-input dense v-model="config.suffix" type="text" label="Suffix" />
87+
<q-input
88+
dense
89+
v-model.number="config.precision"
90+
type="number"
91+
min="0"
92+
max="5"
93+
label="Precision"
94+
/>
95+
<q-input dense v-model="config.decimal" type="text" label="Decimal" />
96+
<q-input
97+
dense
98+
v-model="config.separator"
99+
type="text"
100+
label="Separator"
101+
/>
102+
<q-checkbox dense v-model="config.masked" label="Masked" />
103+
<q-checkbox dense v-model="config.reverseFill" label="Reverse Fill" />
88104
</q-list>
89105
</div>
90106
</div>
91107
</template>
92108

93109
<script>
94110
export default {
95-
data () {
111+
data() {
96112
return {
97113
price: 154.52,
98114
priceDirective: null,
99-
priceUnmasked: 6789.10,
115+
priceUnmasked: 6789.1,
100116
config: {
101-
decimal: '.',
102-
separator: ',',
103-
prefix: '$',
104-
suffix: ' %',
117+
decimal: ".",
118+
separator: ",",
119+
prefix: "$",
120+
suffix: " %",
105121
precision: 2,
106-
nullValue: '',
122+
nullValue: "",
107123
masked: false,
108124
reverseFill: false
109125
},
110-
reverseFill: 6789.10,
126+
reverseFill: 6789.1,
111127
configReverseFill: {
112128
reverseFill: true,
113-
suffix: '',
129+
suffix: ""
114130
}
131+
};
132+
},
133+
methods: {
134+
onChange(args) {
135+
console.log("args", args);
115136
}
116137
}
117-
}
138+
};
118139
</script>
119140

120141
<style lang="css">
121-
.container {
122-
min-width: 800px;
123-
max-width: 95vw;
124-
}
142+
.container {
143+
min-width: 800px;
144+
max-width: 95vw;
145+
}
125146
</style>

‎docs/.vuepress/config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ module.exports = {
6464
]
6565
}
6666
},
67-
67+
darkMode: false,
6868
/**
6969
* Apply plugins，ref：https://v2.vuepress.vuejs.org/reference/config.html#plugins
7070
*/

‎docs/.vuepress/enhanceApp.js

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

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
"devDependencies": {
4949
"@babel/core": "^7.15.5",
5050
"@babel/preset-env": "^7.15.6",
51-
"@quasar/extras": "^1.12.5",
5251
"@vue/cli": "^4.5.13",
5352
"@vue/cli-plugin-babel": "~4.5.0",
5453
"@vue/cli-plugin-eslint": "~4.5.0",

‎yarn.lock

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1457,11 +1457,6 @@
14571457
resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
14581458
integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=
14591459

1460-
"@quasar/extras@^1.12.5":
1461-
version "1.12.5"
1462-
resolved "https://registry.yarnpkg.com/@quasar/extras/-/extras-1.12.5.tgz#dfd59f5fa96dac75959ff8266d1485abcc270048"
1463-
integrity sha512-I2bj/qPVxFdd1SZmIao+moh2bSlgbqNHJAIAopzwxQL0fTMKWGaOQsOvSKrv4hmAhC1cL/SBHd4OWAUWa4dA/w==
1464-
14651460
"@sindresorhus/is@^0.7.0":
14661461
version "0.7.0"
14671462
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"

0 commit comments

Comments
 (0)