docs: add code-example component

Author: abichinger

docs/package.json

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

docs/src/.vuepress/components/code-example.vue

@@ -0,0 +1,67 @@
+<template>
+  <v-app>
+
+    <v-card class="code-example">
+        <v-toolbar dense class="elevation-1">
+            <v-toolbar-title v-if="title">{{title}}</v-toolbar-title>
+
+            <v-spacer></v-spacer>
+
+            <v-tooltip bottom>
+              <template #activator="{attrs, on}">
+                <v-btn v-bind="attrs" v-on="on" icon @click="viewSource = !viewSource">
+                    <v-icon>mdi-code-tags</v-icon>
+                </v-btn>
+              </template>
+              <span>View source</span>
+            </v-tooltip>
+
+        </v-toolbar>
+
+        <v-expand-transition>
+          <div v-show="viewSource" class="source">
+            <slot name="source"></slot>
+          </div>
+        </v-expand-transition>
+
+        <v-card-text>
+          <slot></slot>
+        </v-card-text>
+    </v-card>
+
+    <v-card-text>
+
+    </v-card-text>
+    <slot name="code"></slot>
+
+  </v-app>
+</template>
+
+<script>
+export default {
+  props: {
+      title: {
+          type: String,
+          default: ''
+      }
+  },
+  data() {
+    return {
+      viewSource: false
+    }
+  },
+}
+</script>
+
+<style>
+.code-example pre {
+  margin: 0 !important;
+}
+.code-example .source {
+  margin: 0.2em;
+}
+.code-example {
+  overflow-wrap: unset;
+}
+
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="getting-started-light">
-    <div>{{value}}</div>
+    <div class="mb-2">{{value}}</div>
     <CronLight v-model="value" @error="error=$event"></CronLight>
   </div>
 </template>
@@ -18,12 +18,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-.getting-started-light > div {
-  margin-top: 10px;
-  margin-bottom: 6px;
-}
-
-</style>

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

@@ -18,7 +18,7 @@
             <!-- period selection -->
             <v-col v-if="period.prefix" class="flex-grow-0">{{period.prefix}}</v-col>
             <v-col cols="auto">
-              <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>
+              <v-select class="fit" v-bind="period.attrs" :items="period.items" @input="period.events.input" item-value="id" dense :menu-props="{'offset-y': true}"></v-select>
             </v-col>
             <v-col v-if="period.suffix" class="flex-grow-0">{{period.suffix}}</v-col>
 

docs/src/guide/custom-periods.md

@@ -1,9 +1,10 @@
 # Custom Periods
 
-## Code
+<code-example>
+<template v-slot:source>
 
 <<< @/src/.vuepress/components/custom-periods.vue
 
-## Result
-
-<custom-periods />
+</template>
+<custom-periods />
+</code-example>

docs/src/guide/getting-started.md

@@ -33,13 +33,16 @@ Vue.use(cronLight)
 
 Now you can use the component `CronLight`.
 
-#### Code
+<br />
 
-<<< @/src/.vuepress/components/getting-started-light.vue
+<code-example title="CronLight example">
+<template v-slot:source>
 
-#### Result 
+<<< @/src/.vuepress/components/getting-started-light.vue
 
+</template>
 <getting-started-light />
+</code-example>
 
 #### API
 
@@ -71,13 +74,16 @@ Vue.use(cronVuetify)
 
 Now you can use the component `CronVuetify`.
 
-#### Code
+<br />
 
-<<< @/src/.vuepress/components/getting-started-vuetify.vue
+<code-example title="CronVuetify example">
+<template v-slot:source>
 
-#### Result 
+<<< @/src/.vuepress/components/getting-started-vuetify.vue
 
+</template>
 <getting-started-vuetify />
+</code-example>
 
 #### API
 
@@ -116,13 +122,16 @@ Now you can use the component `CronCore`. The default [scoped slot](https://vuej
 - `period` - defines which fields are visible
 - `error` - error message
 
-#### Code
+<br />
 
-<<< @/src/.vuepress/components/getting-started-renderless.vue
+<code-example title="CronCore example">
+<template v-slot:source>
 
-#### Result
+<<< @/src/.vuepress/components/getting-started-renderless.vue
 
+</template>
 <getting-started-renderless />
+</code-example>
 
 #### API