docs: add api

Author: abichinger

docs/src/.vuepress/components/api/core-events.vue

@@ -0,0 +1,28 @@
+<template>
+    <md-table :headers="headers" :items="items"></md-table>
+</template>
+
+<script>
+
+export default {
+    props:{
+        appendItems: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data: function(){
+        return {
+            headers: [
+                {name:'Name', value: 'name'},
+                {name:'Description', value: 'desc'},
+            ],
+            items: [
+                {name: 'input', desc: `emitted when the cron expression changed`},
+                {name: 'error', desc: `emitted when the cron expression is invalid`},
+                ...this.appendItems
+            ]
+        }
+    }
+}
+</script>

docs/src/.vuepress/components/api/core-props.vue

@@ -0,0 +1,40 @@
+<template>
+    <md-table :headers="headers" :items="items" ref="table">
+        
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"/>
+        </template>
+
+    </md-table>
+</template>
+
+<script>
+
+export default {
+    props:{
+        appendItems: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data: function(){
+
+        return {
+            headers: [
+                {name:'Name', value: 'name'},
+                {name:'Type', value: 'type'},
+                {name:'Default', value: 'default'},
+                {name:'Description', value: 'desc'},
+            ],
+            items: [
+                {name: 'value', type:"`string`", default: 'required', desc: 'the current cron expression'},
+                {name: 'fields', type:"`Field[]`", default: '...', desc: 'each field defines on position of the cron expression'},
+                {name: 'periods', type:"`Period[]`", default: '...', desc: 'the `value` porperty of a period determines which fields are visible'},
+                {name: 'locale', type:"`string`", default: '`"en"`', desc: ''},
+                {name: 'custom-locale', type:"`Locale`", default: '...', desc: ''},
+                ...this.appendItems
+            ]
+        }
+    }
+}
+</script>

docs/src/.vuepress/components/api/core-slots.vue

@@ -0,0 +1,35 @@
+<template>
+    <md-table :headers="headers" :items="items" ref="table">
+        
+        <template v-for="(_, name) in $slots" v-slot:[name]>
+            <slot :name="name"/>
+        </template>
+
+    </md-table>
+</template>
+
+<script>
+
+export default {
+    props:{
+        appendItems: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data: function(){
+
+        return {
+            headers: [
+                {name:'Name', value: 'name'},
+                {name:'Description', value: 'desc'},
+                {name:'Slot Props', value: 'props'}
+            ],
+            items: [
+                {name: 'default', desc:"used to render the cron editor", props: '`CronState`'},
+                ...this.appendItems
+            ]
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,22 @@
+<template>
+  <v-app>
+
+    <CronVuetify v-model="value" :periods="periods" @error="error=$event"></CronVuetify>
+
+  </v-app>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: '* * * * *',
+      error: '',
+      periods: [
+          { id: 'month', text: 'Month', value: ['day', /*'dayOfWeek',*/ 'hour', 'minute'] },
+          { id: 'day', text: 'Day', value: ['hour', 'minute'] },
+      ]
+    }
+  },
+}
+</script>

docs/src/.vuepress/components/md-table.vue

@@ -0,0 +1,42 @@
+<template>
+  <table>
+    <tr>
+      <th v-for="header in headers" :key="header.value">{{header.name}}</th>
+    </tr>
+    <tr v-for="item, i in items" :key="i">
+      <template v-for="header, j in headers">
+        <td :key="j">
+          <slot :name="'r'+i+'c'+j">
+            <span v-html="renderMd(item[header.value])" />
+          </slot>
+        </td>
+      </template>
+      
+    </tr>
+  </table>
+</template>
+
+<script>
+import markdownIt from 'markdown-it/dist/markdown-it';
+
+export default {
+  props:{
+    headers: {
+      type: Array,
+      required: true
+    },
+    items: {
+      type: Array,
+      required: true
+    }
+  },
+  methods:{
+    renderMd(mdStr){
+      let md = new markdownIt({ 
+        html: true,
+      })
+      return md.render(mdStr)
+    }
+  }
+}
+</script>

docs/src/.vuepress/config.js

@@ -40,7 +40,11 @@ module.exports = {
     nav: [
       {
         text: 'Guide',
-        link: '/guide/',
+        link: '/guide/getting-started',
+      },
+      {
+        text: 'API',
+        link: '/api/core',
       },
       {
         text: 'Github',
@@ -54,9 +58,26 @@ module.exports = {
           collapsable: false,
           children: [
             'getting-started',
+            'custom-periods'
           ]
         }
       ],
+      '/api/': [
+        {
+          title: 'Core',
+          collapsable: false,
+          children: [
+            'core',
+          ]
+        },
+        {
+          title: 'Vuetify',
+          collapsable: false,
+          children: [
+            'vuetify',
+          ]
+        }
+      ]
     }
   },
 

docs/src/api/core.md

@@ -0,0 +1,41 @@
+# CronCore - Component
+
+## Props
+
+<api-core-props>
+<template v-slot:r1c2>
+
+<<< @/src/api/default/fields.js
+
+</template>
+<template v-slot:r2c2>
+
+<<< @/src/api/default/periods.js
+
+</template>
+<template v-slot:r4c2>
+
+[en.js](https://github.com/abichinger/vue-js-cron/blob/main/core/src/locale/en.js)
+
+</template>
+</api-core-props>
+
+### Types
+
+<<< @/src/api/types/field.ts
+
+<<< @/src/api/types/period.ts
+
+<<< @/src/api/types/locale.ts
+
+## Events
+
+<api-core-events />
+
+## Slots
+
+<api-core-slots />
+
+### Types
+
+<<< @/src/api/types/cronState.ts

docs/src/api/default/fields.js

@@ -0,0 +1,7 @@
+[
+    {id: 'minute', items: defaultItems(this.locale).minuteItems},
+    {id: 'hour', items: defaultItems(this.locale).hourItems},
+    {id: 'day', items: defaultItems(this.locale).dayItems},
+    {id: 'month', items: defaultItems(this.locale).monthItems},
+    {id: 'dayOfWeek', items: defaultItems(this.locale).dayOfWeekItems},
+]

docs/src/api/default/periods.js

@@ -0,0 +1,8 @@
+[
+    { id: 'minute', text: 'Minute', value: [] },
+    { id: 'hour', text: 'Hour', value: ['minute'] },
+    { id: 'day', text: 'Day', value: ['hour', 'minute'] },
+    { id: 'week', text: 'Week', value: ['dayOfWeek', 'hour', 'minute'] },
+    { id: 'month', text: 'Month', value: ['day', 'dayOfWeek', 'hour', 'minute'] },
+    { id: 'year', text: 'Year', value: ['month', 'day', 'dayOfWeek', 'hour', 'minute'] },
+]

docs/src/api/types/cronState.ts

@@ -0,0 +1,28 @@
+type CronState = {
+    fields: Array<{
+        attrs: { 
+            value: Array<number> //array item values
+        },
+        events: {
+            input: (arg1: Array<number>) => void
+        },
+        id: string,
+        items: Array<Object> //see type Field
+        cron: string,
+        selectedStr: string,
+        prefix: string,
+        suffix: string
+    }>,
+    period: {
+        attrs: { 
+            value: Array<string> //array of period ids
+        },
+        events: {
+            input: (arg1: Period) => void
+        },
+        items: Array<Period>,
+        prefix: string,
+        suffix: string
+    },
+    error: string
+}

docs/src/api/types/field.ts

@@ -0,0 +1,8 @@
+type Field = {
+    id: string,
+    items: Array<{
+        text: string
+        alt: string
+        value: string
+    }>
+}

docs/src/api/types/locale.ts

@@ -0,0 +1,40 @@
+type Locale = {
+    periodPrefix: string,
+    periodSuffix: string
+    eachPeriod: {
+        eachField: {
+            empty: string,
+            value: string,
+            range: string,
+            everyX: string,
+            prefix: string,
+            suffix: string,
+        },
+        '{{fieldId}}Field': {
+            empty: string,
+            value: string,
+            range: string,
+            everyX: string,
+            prefix: string,
+            suffix: string,
+        }
+    }
+    '{{periodId}}Period': {
+        eachField: {
+            empty: string,
+            value: string,
+            range: string,
+            everyX: string,
+            prefix: string,
+            suffix: string,
+        },
+        '{{fieldId}}Field': {
+            empty: string,
+            value: string,
+            range: string,
+            everyX: string,
+            prefix: string,
+            suffix: string,
+        }
+    }
+}

docs/src/api/types/period.ts

@@ -0,0 +1,5 @@
+type Period = {
+    id: string,
+    text: string,
+    value: string[]
+}

docs/src/api/vuetify.md

@@ -0,0 +1,33 @@
+# CronVuetify - Component
+
+## Props
+
+<api-core-props>
+<template v-slot:r1c2>
+
+<<< @/src/api/default/fields.js
+
+</template>
+<template v-slot:r2c2>
+
+<<< @/src/api/default/periods.js
+
+</template>
+<template v-slot:r4c2>
+
+[en.js](https://github.com/abichinger/vue-js-cron/blob/main/core/src/locale/en.js)
+
+</template>
+</api-core-props>
+
+### Types
+
+<<< @/src/api/types/field.ts
+
+<<< @/src/api/types/period.ts
+
+<<< @/src/api/types/locale.ts
+
+## Events
+
+<api-core-events />