Skip to content

Commit ed78e87

Browse files
mst101mst101
committed
feat(docs): Upgrade integrations
1 parent 755c9b5 commit ed78e87

File tree

8 files changed

+124
-206
lines changed

8 files changed

+124
-206
lines changed

‎docs/.vuepress/client.js

Lines changed: 5 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
// import { getDirname, path } from '@vuepress/utils'
2-
// import { searchPlugin } from '@vuepress/plugin-search'
3-
// import VeeValidate from 'vee-validate'
41
import Cleave from 'cleave.js'
52
import { defineClientConfig } from '@vuepress/client'
63
import * as lang from '../../dist/locale/index.mjs'
@@ -16,78 +13,11 @@ import DateHighlighted from './components/DateHighlighted.vue'
1613
import DateFormatting from './components/DateFormatting.vue'
1714
import DateLanguage from './components/DateLanguage.vue'
1815
import DateTypeable from './components/DateTypeable.vue'
19-
// import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
20-
21-
// export default ({ Vue }) => {
22-
// const config = {
23-
// aria: true,
24-
// classNames: {},
25-
// classes: true,
26-
// delay: 0,
27-
// dictionary: null,
28-
// errorBagName: 'errors', // change if property conflicts
29-
// events: 'input|blur',
30-
// fieldsBagName: 'fields',
31-
// i18n: null, // the vue-i18n plugin instance
32-
// i18nRootKey: 'validations', // the key under which nested validation messages will be located
33-
// inject: true,
34-
// locale: 'en',
35-
// validity: false,
36-
// useConstraintAttrs: true,
37-
// }
38-
//
39-
// Vue.use(VeeValidate, config)
40-
// Vue.component('DatePicker', DatePicker)
41-
// Vue.prototype.$datepickerLocales = lang
42-
//
43-
// Vue.directive('cleave', {
44-
// inserted(el, binding) {
45-
// // if the bound element is not an input field search for one
46-
// // this is for cases where the input is inside a wrapper
47-
// if (el.tagName !== 'INPUT') {
48-
// el = el.querySelector('input')
49-
// }
50-
// // only apply cleave if it is an input field and the options are set
51-
// if (
52-
// el.tagName === 'INPUT' &&
53-
// Object.keys(binding.value).length !== 0 &&
54-
// binding.value.constructor === Object
55-
// ) {
56-
// new Cleave(el, binding.value)
57-
// }
58-
// },
59-
// })
60-
// }
61-
62-
// const __dirname = getDirname(import.meta.url)
63-
64-
// const config = {
65-
// aria: true,
66-
// classNames: {},
67-
// classes: true,
68-
// delay: 0,
69-
// dictionary: null,
70-
// errorBagName: 'errors', // change if property conflicts
71-
// events: 'input|blur',
72-
// fieldsBagName: 'fields',
73-
// i18n: null, // the vue-i18n plugin instance
74-
// i18nRootKey: 'validations', // the key under which nested validation messages will be located
75-
// inject: true,
76-
// locale: 'en',
77-
// validity: false,
78-
// useConstraintAttrs: true,
79-
// }
16+
import DateCleave from './components/DateCleave.vue'
17+
import DateVeeValidate from './components/DateVeeValidate.vue'
8018

8119
export default defineClientConfig({
82-
// plugins: [
83-
// searchPlugin({}),
84-
// registerComponentsPlugin({
85-
// componentsDir: path.resolve(__dirname, './components'),
86-
// }),
87-
// ],
88-
8920
// enhance({ app, router, siteData }) {},
90-
9121
// eslint-disable-next-line max-statements, no-param-reassign
9222
enhance({ app }) {
9323
app.component('DatePicker', DatePicker)
@@ -102,13 +32,13 @@ export default defineClientConfig({
10232
app.component('DateFormatting', DateFormatting)
10333
app.component('DateLanguage', DateLanguage)
10434
app.component('DateTypeable', DateTypeable)
105-
// app.component('DateVeeValidate', DateVeeValidate)
35+
app.component('DateVeeValidate', DateVeeValidate)
36+
app.component('DateCleave', DateCleave)
10637

107-
// app.use(VeeValidate, config)
10838
// eslint-disable-next-line no-param-reassign
10939
app.config.globalProperties.$datepickerLocales = lang
11040
app.directive('cleave', {
111-
inserted(el, binding) {
41+
mounted(el, binding) {
11242
// If the bound element is not an input field, search for one.
11343
// This is for cases where the input is inside a wrapper
11444
if (el.tagName !== 'INPUT') {

‎docs/.vuepress/components/DateCleave.vue

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
11
<template>
2-
<div class="example">
3-
<DatePicker
4-
v-model="model"
5-
v-cleave="options"
6-
:typeable="true"
7-
:format="format"
8-
:name="name"
9-
placeholder="Type or select date"
10-
/>
11-
</div>
2+
<DatePicker
3+
v-model="date"
4+
v-cleave="cleaveOptions"
5+
:typeable="true"
6+
format="yyyy-MM-dd"
7+
placeholder="YYYY-MM-DD"
8+
/>
129
</template>
1310

1411
<script>
1512
export default {
1613
name: 'DateCleave',
17-
inject: ['$validator'],
1814
data() {
1915
return {
20-
model: '',
21-
name: 'datepicker',
22-
format: 'dd.MM.yyyy',
23-
options: {
24-
delimiter: '.',
16+
date: null,
17+
cleaveOptions: {
2518
date: true,
26-
datePattern: ['d', 'm', 'Y'],
19+
delimiter: '-',
20+
datePattern: ['Y', 'm', 'd'],
2721
},
2822
}
2923
},

‎docs/.vuepress/components/DateVeeValidate.vue

Lines changed: 20 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,27 @@
11
<template>
2-
<div class="example">
3-
<DatePicker
4-
v-model="model"
5-
v-validate="'required'"
6-
:typeable="true"
7-
:format="format"
8-
:input-class="fields[name]"
9-
:name="name"
10-
placeholder="Type or select date"
11-
@blur="touched"
12-
/>
13-
<div class="error">
14-
<span>{{ errors.first(name) }}</span>
15-
</div>
2+
<DatePicker
3+
v-model="value"
4+
placeholder="Select a date (required)"
5+
name="datepicker"
6+
@blur="validateDate"
7+
/>
8+
<div class="error">
9+
{{ errorMessage }}
1610
</div>
1711
</template>
1812

19-
<script>
20-
export default {
21-
name: 'VeeValidate',
22-
inject: ['$validator'],
23-
data() {
24-
return {
25-
model: '',
26-
name: 'datepicker',
27-
format: 'dd.MM.yyyy',
28-
}
29-
},
30-
methods: {
31-
touched() {
32-
this.$validator.flag(this.name, {
33-
untouched: false,
34-
touched: true,
35-
})
36-
},
37-
},
13+
<script setup>
14+
import { useField } from 'vee-validate'
15+
16+
// Validator function
17+
const isRequired = (value) => (value ? true : 'Please enter a date')
18+
19+
const { value, errorMessage, handleChange } = useField('datepicker', isRequired)
20+
21+
function validateDate() {
22+
const date = value.value
23+
handleChange()
24+
value.value = date
3825
}
3926
</script>
4027
<style>

‎docs/.vuepress/sidebar.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ export default [
1111
'/guide/DisabledDates/',
1212
'/guide/Events/',
1313
'/guide/HighlightedDates/',
14-
// TODO: Update integrations
15-
// '/guide/Integrations/',
14+
'/guide/Integrations/',
1615
'/guide/Props/',
1716
'/guide/Slots/',
1817
'/guide/Translations/',
@@ -28,8 +27,7 @@ export default [
2827
'/demo/Language/',
2928
'/demo/Formatting/',
3029
'/demo/Typeable/',
31-
// TODO: Update integrations
32-
// '/demo/Integrations/',
30+
'/demo/Integrations/',
3331
],
3432
},
3533
]

‎docs/demo/Integrations/README.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@
33
## cleave.js
44

55
<ClientOnly>
6-
<Cleave />
6+
<DateCleave />
77
</ClientOnly>
88

9+
Click here to see the [code behind this example](../../guide/Integrations#cleave-js).
10+
911
## vee-validate
1012

1113
<ClientOnly>
12-
<VeeValidate />
14+
<DateVeeValidate />
1315
</ClientOnly>
16+
17+
Click here to see the [code behind this example](../../guide/Integrations#vee-validate-4-x-x).

‎docs/guide/Integrations/README.md

Lines changed: 37 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,20 @@
22

33
## [cleave.js](https://github.com/nosir/cleave.js)
44

5-
For formatting while typing.
5+
For formatting while typing. Click here to see a [working example](../../demo/Integrations#cleave-js).
66

77
The easiest way to integrate Cleave is to use a directive:
88

99
```vue
1010
<template>
1111
<DatePicker
1212
v-model="model"
13-
v-cleave="{ delimiter: '.', date: true, datePattern: ['d', 'm', 'Y'] }"
14-
:typeable="true"
15-
:format="format"
16-
:name="name"
13+
v-cleave="{
14+
date: true,
15+
delimiter: '-',
16+
datePattern: ['Y', 'm', 'd'],
17+
}"
18+
format="yyyy-MM-dd"
1719
/>
1820
</template>
1921
@@ -24,9 +26,9 @@ import { createApp } from 'vue'
2426
const app = createApp({})
2527
2628
app.directive('cleave', {
27-
inserted(el, binding) {
28-
// If the bound element is not an input field search for one
29-
// this is for cases where the input is inside a wrapper
29+
mounted(el, binding) {
30+
// If the bound element is not an input field, search for one.
31+
// This is for cases where the input is inside a wrapper
3032
if (el.tagName !== 'INPUT') {
3133
el = el.querySelector('input')
3234
}
@@ -43,59 +45,43 @@ app.directive('cleave', {
4345
</script>
4446
```
4547

46-
## [vee-validate](https://github.com/logaretm/vee-validate) 2.x.x
48+
## [vee-validate](https://github.com/logaretm/vee-validate) 4.x.x
4749

48-
::: warning Version
49-
This integration only applies for vee-validate 2.x, and not the latest 3.x version!
50-
:::
50+
For input validation. For example, we can check whether the user has selected a date by firing
51+
vee-validate's `handleChange` function when the datepicker is blurred.
5152

52-
For input validation.
53-
You can use `v-validate` with `:input-class="fields[name]"` to add validation classes to the input field.
54-
But the touched event needs to be set manually.
53+
Click here to see a [working example](../../demo/Integrations#vee-validate/).
5554

5655
```vue
5756
<template>
58-
<div class="example">
59-
<DatePicker
60-
v-model="model"
61-
v-validate="'required'"
62-
:typeable="true"
63-
:format="format"
64-
:input-class="fields[name]"
65-
:name="name"
66-
@blur="touched"
67-
placeholder="Type or select date"
68-
/>
69-
<div class="error">
70-
<span>{{ errors.first(name) }}</span>
71-
</div>
57+
<DatePicker
58+
v-model="value"
59+
placeholder="Select a date (required)"
60+
name="datepicker"
61+
@blur="validateDate"
62+
/>
63+
<div class="error">
64+
{{ errorMessage }}
7265
</div>
7366
</template>
7467
75-
<script>
68+
<script setup>
69+
import { useField } from 'vee-validate'
7670
import DatePicker from '@sum.cumo/vue-datepicker'
7771
78-
export default {
79-
name: 'VeeValidate',
80-
components: {
81-
DatePicker,
82-
},
83-
data() {
84-
return {
85-
model: '',
86-
name: 'datepicker',
87-
format: 'dd.MM.yyyy',
88-
}
89-
},
90-
methods: {
91-
touched() {
92-
this.$validator.flag(this.name, {
93-
untouched: false,
94-
touched: true,
95-
})
96-
},
97-
},
98-
inject: ['$validator'],
72+
// Validator function
73+
const isRequired = (value) => (value ? true : 'Please enter a date')
74+
75+
const { value, errorMessage, handleChange } = useField('datepicker', isRequired)
76+
77+
// TODO
78+
// For some reason, whenever the `handleChange` function fires, it clears the date.
79+
// Therefore I've reset the date to its original value.
80+
// But surely, this step should not be necessary?!
81+
function validateDate() {
82+
const date = value.value
83+
handleChange()
84+
value.value = date
9985
}
10086
</script>
10187
```

0 commit comments

Comments
 (0)