Skip to content

Commit e8711c4

Browse files
abichingerabichinger
committed
fix(docs): add demo
1 parent df5d160 commit e8711c4

File tree

11 files changed

+66
-26
lines changed

11 files changed

+66
-26
lines changed

‎assets/cron-light-hero.png

-13.9 KB
Loading

‎core/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
## Usage
88

9-
**Demo** and **getting started guide** at [https://abichinger.github.io/vue-js-cron/guide/getting-started.html#quick-start-renderless](https://abichinger.github.io/vue-js-cron/guide/getting-started.html#quick-start-renderless)
9+
**Demo** and **getting started guide** at [https://abichinger.github.io/vue-js-cron/guide/getting-started.html#renderless](https://abichinger.github.io/vue-js-cron/guide/getting-started.html#renderless)
1010

1111
## Attribution
1212

‎core/src/locale/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const locales = {
99
/**
1010
*
1111
* @param {string} locale=en
12-
* @returns {object} object with all strings in the request language
12+
* @returns {object} object with all strings in the requested language
1313
*/
1414
function getLocale(locale){
1515
if(locales.hasOwnProperty(locale)){

‎docs/src/.vuepress/components/getting-started-light.vue

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
11
<template>
22
<div class="getting-started-light">
3-
<div class="mb-2">{{value}}</div>
43
<CronLight v-model="value" @error="error=$event"></CronLight>
4+
<div class="mt-2 grey--text text--darken-1">cron expression: {{value}}</div>
55
</div>
66
</template>
77

88
<script>
99
export default {
10+
11+
props: {
12+
init: {
13+
type: String,
14+
default: '30 12,19 24 12 *'
15+
}
16+
},
17+
1018
data() {
1119
return {
12-
value: '30 12,19 24 12 *',
20+
value: this.init,
1321
error: ''
1422
}
1523
},

‎docs/src/.vuepress/components/getting-started-renderless.vue

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,8 @@
11
<template>
22
<v-app>
3-
4-
53
<CronCore v-model="value">
64
<template #default="{fields, period, error}">
75
<div>
8-
9-
<!-- editable cron expression -->
10-
<v-row>
11-
<v-col>
12-
<v-text-field :value="value" @change="value = $event" label="cron expression" :error-messages="error" />
13-
</v-col>
14-
</v-row>
156

167
<v-row align="baseline" dense>
178

@@ -53,6 +44,14 @@
5344
</template>
5445

5546
</v-row>
47+
48+
<!-- editable cron expression -->
49+
<v-row class="mt-0">
50+
<v-col class="pt-0">
51+
<v-text-field :value="value" @change="value = $event" label="cron expression" :error-messages="error" />
52+
</v-col>
53+
</v-row>
54+
5655
</div>
5756
</template>
5857
</CronCore>

‎docs/src/.vuepress/components/getting-started-vuetify.vue

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,31 @@
11
<template>
22
<v-app>
33

4+
<CronVuetify v-model="value" @error="error=$event"></CronVuetify>
5+
46
<!-- editable cron expression -->
5-
<v-row>
6-
<v-col>
7+
<v-row class="mt-0">
8+
<v-col class="pt-0">
79
<v-text-field :value="value" @change="value = $event" label="cron expression" :error-messages="error" />
810
</v-col>
911
</v-row>
1012

11-
<CronVuetify v-model="value" @error="error=$event"></CronVuetify>
12-
1313
</v-app>
1414
</template>
1515

1616
<script>
1717
export default {
18+
19+
props: {
20+
init: {
21+
type: String,
22+
default: '* * * * *'
23+
}
24+
},
25+
1826
data() {
1927
return {
20-
value: '* * * * *',
28+
value: this.init,
2129
error: ''
2230
}
2331
},

‎docs/src/.vuepress/config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,10 @@ module.exports = {
3838
editLinkText: '',
3939
lastUpdated: false,
4040
nav: [
41+
{
42+
text: 'Demo',
43+
link: '/demo',
44+
},
4145
{
4246
text: 'Guide',
4347
link: '/guide/getting-started',

‎docs/src/demo.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Demo
2+
3+
### CronLight
4+
5+
<v-app>
6+
<getting-started-light init="* * * * *" class="mt-4" />
7+
</v-app>
8+
9+
<br/>
10+
11+
[Get Started](/guide/getting-started.html#cronlight)
12+
13+
### Vuetify
14+
15+
<v-app>
16+
<getting-started-vuetify init="* * * * *" class="mt-4" />
17+
</v-app>
18+
19+
<br/>
20+
21+
[Get Started](/guide/getting-started.html#cronvuetify)

‎docs/src/guide/getting-started.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22

33
The fastest way to get started, is to install one of the prebuilt components.
44
For now `vue-js-cron` provides the following prebuilt components:
5-
- [CronLight](#quick-start-cronlight) - a lightweight cron editor without external dependencies
6-
- [CronVuetify](#quick-start-cronvuetify) - a cron editor for [Vuetify.js](/guide/getting-started.html#quick-start-vuetify).
5+
- [CronLight](#cronlight) - a lightweight cron editor without external dependencies
6+
- [CronVuetify](#cronvuetify) - a cron editor for [Vuetify.js](/guide/getting-started.html#vuetify).
77

8-
If you would like to use a different UI framework, follow the quick start guide on how to use the [renderless component](#quick-start-renderless).
8+
If you would like to use a different UI framework, follow the quick start guide on how to use the [renderless component](#renderless).
99

10-
## Quick Start - CronLight
10+
## CronLight
1111

1212
#### Installation
1313

@@ -48,7 +48,7 @@ Now you can use the component `CronLight`.
4848

4949
- [CronLight](../api/light)
5050

51-
## Quick Start - CronVuetify
51+
## CronVuetify
5252

5353
#### Installation
5454

@@ -89,7 +89,7 @@ Now you can use the component `CronVuetify`.
8989

9090
- [CronVuetify](../api/vuetify)
9191

92-
## Quick Start - Renderless
92+
## Renderless
9393

9494
This guide will explain how to use the renderless component of vue-js-cron.
9595
In this example [Vuetify](https://vuetifyjs.com/en/) will be used to render the component, but you should be able to follow along using any UI framework.

‎light/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
## Usage
88

9-
**Demo** and **getting started guide** at [https://abichinger.github.io/vue-js-cron/guide/getting-started.html#quick-start-cronlight](https://abichinger.github.io/vue-js-cron/guide/getting-started.html#quick-start-vuetify)
9+
**Demo** and **getting started guide** at [https://abichinger.github.io/vue-js-cron/guide/getting-started.html#cronlight](https://abichinger.github.io/vue-js-cron/guide/getting-started.html#cronlight)
1010

1111
## Attribution
1212

‎vuetify/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
## Usage
88

9-
**Demo** and **getting started guide** at [https://abichinger.github.io/vue-js-cron/guide/getting-started.html#quick-start-cronvuetify](https://abichinger.github.io/vue-js-cron/guide/getting-started.html#quick-start-vuetify)
9+
**Demo** and **getting started guide** at [https://abichinger.github.io/vue-js-cron/guide/getting-started.html#cronvuetify](https://abichinger.github.io/vue-js-cron/guide/getting-started.html#cronvuetify)
1010

1111
## Attribution
1212

0 commit comments

Comments
 (0)