Skip to content

Commit 6f98fe6

Browse files
abichingerabichinger
committed
docs: add getting started
1 parent aa66330 commit 6f98fe6

19 files changed

+1121
-127
lines changed

‎core/examples/vue-cron.vue renamed to ‎core/dev/example-usage.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<div>
2+
<div id="app">
33
Cron: <input :value="value" @change="value = $event.target.value" type="text" />
44
<VueCronCore v-model="value">
5-
<template #default="{periodEvents, periodAttrs, periodData, error, fields}">
5+
<template #default="{period, error, fields}">
66
<div>
77
<span>
8-
{{periodData.prefix}}:
9-
<select @input="periodEvents.input(JSON.parse($event.target.value))">
10-
<option v-for="item in periodData.items" :key="item.text" :value="JSON.stringify(item)">{{item.text}}</option>
8+
{{period.prefix}}:
9+
<select @input="period.events.input(JSON.parse($event.target.value))">
10+
<option v-for="item in period.items" :key="item.text" :value="JSON.stringify(item)">{{item.text}}</option>
1111
</select>
1212
</span>
1313

@@ -25,7 +25,7 @@
2525
<div>-</div>
2626

2727
<div>error:{{error}}</div>
28-
<div>period:{{periodAttrs.value}}</div>
28+
<div>period:{{period.attrs.value}}</div>
2929
<div v-for="f in fields" :key="'div'+f.id">{{f.id}}: {{f.attrs.value}}, {{f.cron}}, {{f.selectedStr}}</div>
3030
</div>
3131
</template>

‎core/dev/serve.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from 'vue'
2+
import example from './example-usage.vue'
3+
4+
Vue.config.productionTip = false
5+
6+
new Vue({
7+
render: h => h(example),
8+
}).$mount('#app')

‎core/package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
},
1111
"scripts": {
1212
"test": "jest",
13-
"serve": "vue serve examples/vue-cron.vue",
13+
"serve": "vue-cli-service serve dev/serve.js",
1414
"build": "yarn build:umd & yarn run build:es & yarn run build:unpkg",
1515
"build:umd": "yarn rollup --config build/rollup.config.js --format umd --file dist/core.umd.js",
1616
"build:es": "yarn rollup --config build/rollup.config.js --format es --file dist/core.esm.js",
@@ -27,5 +27,8 @@
2727
"license": "MIT",
2828
"dependencies": {
2929
"mustache": "^4.2.0"
30+
},
31+
"devDependencies": {
32+
"@vue/cli-service": "^4.5.15"
3033
}
3134
}

‎core/src/core.vue

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,11 @@ export default {
106106
handler: function(){
107107
this.selectedToCron(this.selected)
108108
},
109+
},
110+
error: {
111+
handler: function(error){
112+
this.$emit('error', error)
113+
}
109114
}
110115
},
111116
@@ -144,19 +149,19 @@ export default {
144149
error: this.error,
145150
fields: fieldProps,
146151
147-
periodAttrs: {
148-
value: this.selectedPeriod.value
149-
},
150-
periodEvents: {
151-
input: (evt) => {
152-
this.selectedPeriod = evt
153-
}
154-
},
155-
periodData: {
152+
period:{
153+
attrs:{
154+
value: this.selectedPeriod.value
155+
},
156+
events:{
157+
input: (evt) => {
158+
this.selectedPeriod = evt
159+
}
160+
},
156161
items: this.periods,
157162
prefix: this.customLocale.periodPrefix,
158163
suffix: this.customLocale.periodSuffix
159-
},
164+
}
160165
})
161166
},
162167

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

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<v-app>
3+
4+
5+
<CronCore v-model="value">
6+
<template #default="{fields, period, error}">
7+
<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>
15+
16+
<v-row align="baseline" dense>
17+
18+
<!-- period selection -->
19+
<v-col v-if="period.prefix" class="flex-grow-0">{{period.prefix}}</v-col>
20+
<v-col cols="auto">
21+
<v-select class="fit" v-bind="period.attrs" :items="period.items" @input="period.events.input" return-object dense :menu-props="{'offset-y': true}"></v-select>
22+
</v-col>
23+
<v-col v-if="period.suffix" class="flex-grow-0">{{period.suffix}}</v-col>
24+
25+
<!-- cron expression fields -->
26+
<template v-for="f in fields">
27+
<v-col v-if="f.prefix" class="flex-grow-0" :key="f.id+'-prefix'">{{f.prefix}}</v-col>
28+
29+
<!-- custom select -->
30+
<v-menu offset-y :key="f.id" :close-on-content-click="false" max-height="300">
31+
32+
<!-- menu activator -->
33+
<template v-slot:activator="{ on, attrs }">
34+
<v-col v-on="on" v-bind="attrs">
35+
<v-text-field :value="f.selectedStr" dense readonly></v-text-field>
36+
</v-col>
37+
</template>
38+
39+
<!-- list of field items -->
40+
<v-list dense>
41+
<v-list-item-group v-bind="f.attrs" @change="f.events.input" multiple>
42+
<v-list-item v-for="item in f.items" :value="item.value" :key="item.value">
43+
<v-list-item-content>
44+
<v-list-item-title v-text="item.text"></v-list-item-title>
45+
</v-list-item-content>
46+
</v-list-item>
47+
</v-list-item-group>
48+
</v-list>
49+
50+
</v-menu>
51+
52+
<v-col v-if="f.suffix" class="flex-grow-0" :key="f.id+'-suffix'">{{f.suffix}}</v-col>
53+
</template>
54+
55+
</v-row>
56+
</div>
57+
</template>
58+
</CronCore>
59+
</v-app>
60+
</template>
61+
62+
<script>
63+
export default {
64+
data() {
65+
return {
66+
value: '* * * * *'
67+
}
68+
},
69+
methods:{
70+
71+
}
72+
}
73+
</script>

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<v-app>
3+
4+
<!-- editable cron expression -->
5+
<v-row>
6+
<v-col>
7+
<v-text-field :value="value" @change="value = $event" label="cron expression" :error-messages="error" />
8+
</v-col>
9+
</v-row>
10+
11+
<CronVuetify v-model="value" @error="error=$event"></CronVuetify>
12+
13+
</v-app>
14+
</template>
15+
16+
<script>
17+
export default {
18+
data() {
19+
return {
20+
value: '* * * * *',
21+
error: ''
22+
}
23+
},
24+
methods:{
25+
26+
}
27+
}
28+
</script>

‎docs/src/.vuepress/config.js

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ module.exports = {
1818
head: [
1919
['meta', { name: 'theme-color', content: '#3eaf7c' }],
2020
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
21-
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
21+
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
22+
['link', { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' }],
23+
['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css' }],
2224
],
2325

2426
/**
@@ -38,12 +40,8 @@ module.exports = {
3840
link: '/guide/',
3941
},
4042
{
41-
text: 'Config',
42-
link: '/config/'
43-
},
44-
{
45-
text: 'VuePress',
46-
link: 'https://v1.vuepress.vuejs.org'
43+
text: 'Github',
44+
link: 'https://github.com/abichinger/vue-js-cron'
4745
}
4846
],
4947
sidebar: {
@@ -52,7 +50,6 @@ module.exports = {
5250
title: 'Guide',
5351
collapsable: false,
5452
children: [
55-
'',
5653
'getting-started',
5754
]
5855
}

‎docs/src/.vuepress/enhanceApp.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import Buefy from 'buefy'
2-
import 'buefy/dist/buefy.css'
31
import CronCore from '@vue-js-cron/core'
42
import CronVuetify from '@vue-js-cron/vuetify'
53
import Vuetify from "vuetify";
@@ -14,7 +12,6 @@ export default ({
1412
}) => {
1513
Vue.use(Vuetify);
1614
options.vuetify = new Vuetify({})
17-
Vue.use(Buefy)
1815
Vue.use(CronCore);
1916
Vue.use(CronVuetify);
2017
}

‎docs/src/.vuepress/styles/index.styl

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,6 @@
66

77
.home .hero img
88
max-width 450px!important
9+
10+
.v-application--wrap
11+
min-height: 0px!important

‎docs/src/config/README.md

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

‎docs/src/guide/README.md

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

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

Lines changed: 56 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,79 @@
11
# Getting Started
22

33
The fastest way to get a component, which can generate cron expression, is to install one of the prebuilt components.
4-
For now Vue-js-cron provides a prebuilt component for [Vuetify.js](/guide/getting-started.html#quick-start-vuetify)
4+
For now Vue-js-cron provides a prebuilt component for [Vuetify.js](/guide/getting-started.html#quick-start-vuetify).
55
If you would like to use a different UI framework, follow the quick start guide on how to use the renderless component.
66

7-
## Quick Start - Renderless
7+
## Quick Start - Vuetify
88

9-
This guide will explain how to use the renderless component of vue-js-cron.
10-
In this example [Buefy](https://buefy.org/) will be used to render the component, but you should be able to follow along using any UI framework.
9+
#### Installation
1110

12-
<br />
13-
First open up a terminal and run the following command:
11+
Open up a terminal and run the following command:
1412

15-
<code-group>
16-
<code-block title="YARN" active>
1713
```bash
18-
yarn add @vue-js-cron/core buefy
14+
yarn add @vue-js-cron/vuetify
1915
```
20-
</code-block>
16+
or
2117

22-
<code-block title="NPM">
2318
```bash
24-
npm install @vue-js-cron/core buefy
19+
npm install @vue-js-cron/vuetify
20+
```
21+
#### Usage
22+
23+
Then you need to register `vue-js-cron/vuetify` with `Vue.use()`
24+
25+
```js
26+
import cronVuetify from '@vue-js-cron/vuetify'
27+
Vue.use(cronVuetify)
2528
```
26-
</code-block>
27-
</code-group>
2829

29-
<b-input placeholder="No label"></b-input>
30+
Now you can use the component `CronVuetify`.
3031

31-
<example-selection-grid />
32+
#### Code
3233

33-
## Quick Start - Vuetify
34+
<<< @/src/.vuepress/components/getting-started-vuetify.vue
3435

35-
Open up a terminal and run the following command:
36+
#### Result
37+
38+
<getting-started-vuetify />
39+
40+
## Quick Start - Renderless
41+
42+
This guide will explain how to use the renderless component of vue-js-cron.
43+
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.
44+
45+
#### Installation
46+
47+
First open up a terminal and run the following command:
3648

37-
<code-group>
38-
<code-block title="YARN" active>
3949
```bash
40-
yarn add @vue-js-cron/vuetify
50+
yarn add @vue-js-cron/core
4151
```
42-
</code-block>
52+
or
4353

44-
<code-block title="NPM">
4554
```bash
46-
npm install @vue-js-cron/vuetify
55+
npm install @vue-js-cron/core
56+
```
57+
58+
#### Usage
59+
60+
Then you need to register `vue-js-cron/core` with `Vue.use()`
61+
62+
```js
63+
import cronCore from '@vue-js-cron/core'
64+
Vue.use(cronCore)
4765
```
48-
</code-block>
49-
</code-group>
50-
51-
<v-app id="app">
52-
<v-card>
53-
<v-card-text>
54-
<CronVuetify></CronVuetify>
55-
</v-card-text>
56-
</v-card>
57-
</v-app>
66+
67+
Now you can use the component `CronCore`. The default [scoped slot](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots) of `CronCore` provides the following **props**:
68+
69+
- `fields` - each field corresponds to one position in the cron expression. Default fields: month, day, day of week, hour and minute.
70+
- `period` - defines which fields are visible
71+
- `error` - error message
72+
73+
#### Code
74+
75+
<<< @/src/.vuepress/components/getting-started-renderless.vue
76+
77+
#### Result
78+
79+
<getting-started-renderless />

0 commit comments

Comments
 (0)