docs: add documentation for @vue-js-cron/light

Author: abichinger

README.md

@@ -15,6 +15,7 @@ Read the [docs](https://abichinger.github.io/vue-js-cron/)
 This monorepo includes the following packages:
 
 - core - a renderless Vue.js component to generate cron expressions.
+- light - a lightweight cron editor without external dependencies
 - vuetify - Vuetify component to edit cron expressions.
 - docs - Vue.js Cron documentation with [VuePress](https://vuepress.vuejs.org/)
 

docs/package.json

@@ -18,7 +18,8 @@
     "vuepress": "^1.8.2"
   },
   "dependencies": {
-    "@vue-js-cron/core": "1.0.0",
-    "@vue-js-cron/vuetify": "1.0.1"
+    "@vue-js-cron/core": "2.0.0",
+    "@vue-js-cron/light": "^1.0.0",
+    "@vue-js-cron/vuetify": "2.0.0"
   }
 }

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="getting-started-light">
+    <div>{{value}}</div>
+    <CronLight v-model="value" @error="error=$event"></CronLight>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: '30 12,19 24 12 *',
+      error: ''
+    }
+  },
+  methods:{
+    
+  }
+}
+</script>
+
+<style scoped>
+
+.getting-started-light > div {
+  margin-top: 10px;
+  margin-bottom: 6px;
+}
+
+</style>

docs/src/.vuepress/config.js

@@ -70,6 +70,13 @@ module.exports = {
             'core',
           ]
         },
+        {
+          title: 'Light',
+          collapsable: false,
+          children: [
+            'light',
+          ]
+        },
         {
           title: 'Vuetify',
           collapsable: false,

docs/src/.vuepress/enhanceApp.js

@@ -1,8 +1,10 @@
 import CronCore from '@vue-js-cron/core'
 import CronVuetify from '@vue-js-cron/vuetify'
+import '@vue-js-cron/vuetify/dist/vuetify.css'
 import Vuetify from "vuetify";
 import "vuetify/dist/vuetify.min.css";
-import '@vue-js-cron/vuetify/dist/vuetify.css'
+import CronLight from '@vue-js-cron/light'
+import '@vue-js-cron/light/dist/light.css'
 
 export default ({
   Vue, // the version of Vue being used in the VuePress app
@@ -14,4 +16,5 @@ export default ({
   options.vuetify = new Vuetify({})
   Vue.use(CronCore);
   Vue.use(CronVuetify);
+  Vue.use(CronLight)
 }

docs/src/api/light.md

@@ -0,0 +1,33 @@
+# CronLight - 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 />

docs/src/guide/getting-started.md

@@ -1,10 +1,51 @@
 # Getting Started
 
-The fastest way to get a component, which can generate cron expression, is to install one of the prebuilt components.
-For now Vue-js-cron provides a prebuilt component for [Vuetify.js](/guide/getting-started.html#quick-start-vuetify).
-If you would like to use a different UI framework, follow the quick start guide on how to use the renderless component.
+The fastest way to get started, is to install one of the prebuilt components.
+For now `vue-js-cron` provides the following prebuilt components:
+- [CronLight](#quick-start-cronlight) - a lightweight cron editor without external dependencies
+- [CronVuetify](#quick-start-cronvuetify) - a cron editor for [Vuetify.js](/guide/getting-started.html#quick-start-vuetify).
 
-## Quick Start - Vuetify
+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).
+
+## Quick Start - CronLight
+
+#### Installation
+
+Open up a terminal and run the following command:
+
+```bash 
+yarn add @vue-js-cron/light
+```
+or
+
+```bash 
+npm install @vue-js-cron/light
+```
+#### Usage
+
+Then you need to register `vue-js-cron/light` with `Vue.use()`
+
+```js
+import cronLight from '@vue-js-cron/light'
+import '@vue-js-cron/light/dist/light.css'
+Vue.use(cronLight)
+```
+
+Now you can use the component `CronLight`.
+
+#### Code
+
+<<< @/src/.vuepress/components/getting-started-light.vue
+
+#### Result 
+
+<getting-started-light />
+
+#### API
+
+- [CronLight](../api/light)
+
+## Quick Start - CronVuetify
 
 #### Installation
 

yarn.lock

@@ -2026,14 +2026,6 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@vue-js-cron/vuetify@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@vue-js-cron/vuetify/-/vuetify-1.0.1.tgz#cdca9e457f8776f4bb03124fe0bba7d9f5153685"
-  integrity sha512-gbR5FYmUR2u5FS91hC57THvEp8/OE26QWquV/0KVvaCIjvNLI7BKXf0ncMNbbT85yewG1mBLTOMBCwJW0e1QwA==
-  dependencies:
-    "@vue-js-cron/core" "1.0.0"
-    vuetify "^2.4.6"
-
 "@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"