docs: add custom cron expression

Author: abichinger

docs/src/.vuepress/components/custom-fields.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-app>
+    <div class="mb-2">{{value}}</div>
+    <CronLight v-model="value" :periods="periods" :fields="fields" @error="error=$event" :custom-locale="customLocale"></CronLight>
+  </v-app>
+</template>
+
+
+
+<script>
+
+import core from '@vue-js-cron/core'
+const { locale, util } = core
+
+export default {
+  data() {
+
+    let defaultItems = locale.defaultItems('en')
+
+    return {
+      value: '* * * * *',
+      error: '',
+      periods: [
+          { id: 'year', text: 'year', value: ['month', 'day', 'hour', 'minute', 'second'] },
+          { id: 'hour', text: 'hour', value: ['minute', 'second'] },
+          { id: 'minute', text: 'minute', value: ['second'] },
+          { id: 'second', text: 'second', value: [] },
+      ],
+      fields: [
+          { id: 'second', items: util.genItems(0, 59)},
+          { id: 'minute', items: defaultItems.minuteItems},
+          { id: 'hour', items: defaultItems.hourItems},
+          { id: 'day', items: defaultItems.dayItems},
+          { id: 'month', items: defaultItems.monthItems},
+      ],
+      customLocale: {
+        eachPeriod: {
+          secondField: {
+            prefix: ':'
+          }
+        },
+        hourPeriod: {
+          minuteField: {
+            prefix: 'at',
+            suffix: '',
+            empty: 'every minute'
+          }
+        },
+        minutePeriod: {
+          secondField: {
+            prefix: 'at',
+            suffix: 'second(s)',
+            empty: 'every'
+          }
+        }
+      }
+    }
+  },
+}
+</script>

docs/src/.vuepress/components/custom-periods.vue

@@ -1,7 +1,8 @@
 <template>
   <v-app>
 
-    <CronVuetify v-model="value" :periods="periods" @error="error=$event"></CronVuetify>
+    <div class="mb-2">{{value}}</div>
+    <CronLight v-model="value" :periods="periods" @error="error=$event"></CronLight>
 
   </v-app>
 </template>

docs/src/.vuepress/config.js

@@ -58,7 +58,8 @@ module.exports = {
           collapsable: false,
           children: [
             'getting-started',
-            'custom-periods'
+            'custom-periods',
+            'custom-fields'
           ]
         }
       ],

docs/src/guide/custom-fields.md

@@ -0,0 +1,10 @@
+# Custom Cron Expression
+
+<code-example title="cron expression with seconds">
+<template v-slot:source>
+
+<<< @/src/.vuepress/components/custom-fields.vue
+
+</template>
+<custom-fields />
+</code-example>