chore: complete docs. Build lib/docs

README.md

@@ -1,28 +1,80 @@
 # Vue Stripe Menu
 
-[Website](https://alexeykhr.github.io/vue-stripe-menu/)
+> Create a dropdown like on Stripe
 
-## Project setup
+[Demo Project](https://alexeykhr.github.io/vue-stripe-menu/)
+
+## How to install
+
+```shell script
+$ npm i vue-stripe-menu
+// or
+$ yarn add vue-stripe-menu
 ```
-npm install
+
+```vue
+import Vue from 'Vue'
+import VueStripeMenu from 'vue-stripe-menu'
+
+Vue.use(VueStripeMenu)
 ```
 
-### Compiles and hot-reloads for development
+## Basic Demo
+
+```vue
+<template>
+  <vsm-menu :menu="menu">
+    <template #default="data">
+      {{ data }}
+    </template>
+  </vsm-menu>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menu: [
+        { title: 'First item', dropdown: 'first' },
+        { title: 'Second item', dropdown: 'second' },
+        { title: 'No dropdown' }
+      ]
+    }
+  }
+}
+</script>
 ```
-npm run serve
+
+## Advanced Demo
+
+How on the site: [Link](https://github.com/Alexeykhr/vue-stripe-menu/blob/master/demo)
+
+## Contributing
+
+### Launch of a demo project (development of lib)
+```
+npm run dev
 ```
 
-### Compiles and minifies for production
+### Build a demo project
 ```
 npm run build
 ```
 
-### Run your tests
+### Build library
 ```
-npm run test
+npm run build:lib
 ```
 
-### Lints and fixes files
+### Check code on eslint
 ```
 npm run lint
 ```
+
+## Changelog
+
+Detailed changes for each release are documented in the [CHANGELOG.md](https://github.com/alexeykhr/vuejs-stripe-menu/blob/master/CHANGELOG.md).
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)

demo/App.vue

@@ -2,7 +2,10 @@
   <div>
     <base-header />
     <main>
+      <example-docs />
+      <install-docs />
       <attributes-docs />
+      <menu-object-docs />
       <slots-docs />
       <events-docs />
       <demo-docs />
@@ -13,15 +16,26 @@
 
 <script>
 import AttributesDocs from './components/docs/Attributes'
+import MenuObjectDocs from './components/docs/MenuObject'
+import ExampleDocs from './components/docs/Example'
+import InstallDocs from './components/docs/Install'
 import EventsDocs from './components/docs/Events'
+import BaseHeader from './components/BaseHeader'
+import BaseFooter from './components/BaseFooter'
 import SlotsDocs from './components/docs/Slots'
 import DemoDocs from './components/docs/Demo'
-import BaseHeader from './components/Header'
-import BaseFooter from './components/Footer'
 
 export default {
   components: {
-    BaseHeader, AttributesDocs, EventsDocs, SlotsDocs, DemoDocs, BaseFooter
+    AttributesDocs,
+    MenuObjectDocs,
+    ExampleDocs,
+    InstallDocs,
+    BaseHeader,
+    EventsDocs,
+    BaseFooter,
+    SlotsDocs,
+    DemoDocs
   }
 }
 </script>

demo/components/Header.vue → demo/components/BaseHeader.vue

@@ -48,7 +48,7 @@ export default {
         { title: 'Products', dropdown: 'products', content: VerticalContent, element: 'span' },
         { title: 'Developers', dropdown: 'developers', content: HorizontalPrimaryContent, secondary: HorizontalSecondaryContent },
         { title: 'Company', dropdown: 'company', content: DefaultContent, listeners: { mouseover: this.onMouseOver } },
-        { title: 'Source', attributes: { href: 'https://github.com/Alexeykhr/vue-stripe-menu/tree/master/demo', target: '_blank' } }
+        { title: 'Source', attributes: { href: 'https://github.com/Alexeykhr/vue-stripe-menu/blob/master/demo/components/Header.vue', target: '_blank' } }
       ]
     }
   },

demo/components/BaseTitle.vue

@@ -0,0 +1,39 @@
+<template>
+  <a
+    :href="`#${generatedId}`"
+    :id="generatedId"
+    class="section"
+  >
+    # <slot>{{ title }}</slot>
+  </a>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    generatedId () {
+      if (this.id) {
+        return this.id
+      }
+
+      let id = this.title
+
+      if (this.$slots.default) {
+        id = this.$slots.default[0].text
+      }
+
+      return id.trim().toLowerCase().replace(/[^a-z-]/gi, '-')
+    }
+  }
+}
+</script>

demo/components/docs/Attributes.vue

@@ -1,12 +1,6 @@
 <template>
   <div>
-    <a
-      href="#props"
-      id="props"
-      class="section"
-    >
-      # Props
-    </a>
+    <base-title title="Props" />
     <base-table
       :columns="columns"
       :rows="rows"
@@ -16,10 +10,11 @@
 
 <script>
 import BaseTable from '../base/Table'
+import BaseTitle from '../BaseTitle'
 
 export default {
   components: {
-    BaseTable
+    BaseTable, BaseTitle
   },
   data () {
     return {

demo/components/docs/Demo.vue

@@ -1,22 +1,20 @@
 <template>
   <div>
-    <a
-      href="#demo"
-      id="demo"
-      class="section"
-    >
-      # Demo
-    </a>
+    <base-title title="Demo" />
     <pre><code class="javascript">{{ DemoHeaderRaw }}</code></pre>
   </div>
 </template>
 
 <script>
 // eslint-disable-next-line
-import DemoHeaderRaw from '!!raw-loader!../Header'
+import DemoHeaderRaw from '!!raw-loader!../BaseHeader'
+import BaseTitle from '../BaseTitle'
 import highlight from 'highlight.js'
 
 export default {
+  components: {
+    BaseTitle
+  },
   data () {
     return {
       DemoHeaderRaw

demo/components/docs/Events.vue

@@ -1,12 +1,6 @@
 <template>
   <div>
-    <a
-      href="#events"
-      id="events"
-      class="section"
-    >
-      # Events
-    </a>
+    <base-title title="Events" />
     <base-table
       :columns="columns"
       :rows="rows"
@@ -16,10 +10,11 @@
 
 <script>
 import BaseTable from '../base/Table'
+import BaseTitle from '../BaseTitle'
 
 export default {
   components: {
-    BaseTable
+    BaseTable, BaseTitle
   },
   data () {
     return {

demo/components/docs/Example.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <base-title title="Example" />
+    <pre><code class="javascript">{{ ExampleRaw }}</code></pre>
+  </div>
+</template>
+
+<script>
+// eslint-disable-next-line
+import ExampleRaw from '!!raw-loader!./ExampleRaw'
+import BaseTitle from '../BaseTitle'
+import highlight from 'highlight.js'
+
+export default {
+  components: {
+    BaseTitle
+  },
+  data () {
+    return {
+      ExampleRaw
+    }
+  },
+  mounted () {
+    highlight.initHighlightingOnLoad()
+  }
+}
+</script>

demo/components/docs/ExampleRaw.vue

@@ -0,0 +1,21 @@
+<template>
+  <vsm-menu :menu="menu">
+    <template #default="data">
+      {{ data }}
+    </template>
+  </vsm-menu>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menu: [
+        { title: 'First item', dropdown: 'first' },
+        { title: 'Second item', dropdown: 'second' },
+        { title: 'No dropdown' }
+      ]
+    }
+  }
+}
+</script>

demo/components/docs/Install.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <base-title title="Install" />
+    <pre><code class="shell">{{ shell }}</code></pre>
+    <pre><code class="javascript">{{ vue }}</code></pre>
+  </div>
+</template>
+
+<script>
+import BaseTitle from '../BaseTitle'
+import highlight from 'highlight.js'
+
+export default {
+  components: {
+    BaseTitle
+  },
+  data () {
+    return {
+      shell: '$ npm i vue-stripe-menu\n' +
+        '// or\n' +
+        '$ yarn add vue-stripe-menu',
+      vue: 'import Vue from \'Vue\'\n' +
+        'import VueStripeMenu from \'vue-stripe-menu\'\n\n' +
+        'Vue.use(VueStripeMenu)'
+    }
+  },
+  mounted () {
+    highlight.initHighlightingOnLoad()
+  }
+}
+</script>