some correct, rename variables

README.md

@@ -10,7 +10,7 @@
 </p>
 
 <p align="center">
-  <img src="https://raw.githubusercontent.com/oleksiikhr/vue-stripe-menu/main/docs/images/img.png?raw=true" alt="Vue Stripe Menu" height="500px">
+  <img src="https://raw.githubusercontent.com/oleksiikhr/vue-stripe-menu/main/docs/images/stripe.png?raw=true" alt="Vue Stripe Menu" height="500px">
 </p>
 
 > Creating a navigation menu with animations like on Stripe

docs/src/App.vue

@@ -1,13 +1,11 @@
 <template>
   <component :is="header" v-bind="vsmProps" />
   <main>
-    <div @click="header = 'StripeHeader'">StripeHeader</div>
-    <div @click="header = 'FigmaHeader'">FigmaHeader</div>
     <div class="mb-10">
       <small>These changes are applied on the current header and added to the Install section.</small>
     </div>
-    <conf-menu-docs @on-css="onChangeCss" @change-props="onChangeProps" />
-    <install-docs :css="css" :vsm-props="vsmProps" />
+    <configuration-docs @change-styles="onChangeStyles" @change-props="onChangeProps" />
+    <install-docs :styles="styles" :vsm-props="vsmProps" />
   </main>
   <footer>
     <a :href="homepage" title="Repository" target="_blank">
@@ -22,33 +20,31 @@
 </template>
 
 <script>
-import ConfMenuDocs from './components/docs/ConfMenu.vue';
+import ConfigurationDocs from './components/docs/Configuration.vue';
 import InstallDocs from './components/docs/Install.vue';
 import StripeHeader from './components/examples/Stripe/StripeHeader.vue';
-import FigmaHeader from './components/examples/Figma/FigmaHeader.vue';
 import { homepage } from '../../package.json';
 
 export default {
   components: {
     StripeHeader,
-    FigmaHeader,
-    ConfMenuDocs,
+    ConfigurationDocs,
     InstallDocs,
   },
   data() {
     return {
       homepage,
       header: 'StripeHeader',
-      css: '',
+      styles: '',
       vsmProps: {},
     };
   },
   methods: {
-    onChangeProps(obj) {
-      this.vsmProps = obj;
+    onChangeProps(props) {
+      this.vsmProps = props;
     },
-    onChangeCss(val) {
-      this.css = val;
+    onChangeStyles(styles) {
+      this.styles = styles;
     },
   },
 };

docs/src/components/base/Group.vue → docs/src/components/base/BaseGroup.vue

@@ -22,7 +22,7 @@
 
 <script>
 import { computed } from 'vue';
-import BaseText from './Text.vue';
+import BaseText from './BaseText.vue';
 
 export default {
   name: 'BaseGroup',

docs/src/components/docs/ConfMenu.vue → docs/src/components/docs/Configuration.vue

@@ -53,14 +53,15 @@
 </template>
 
 <script>
-import BaseTitle from '../base/Title.vue';
+import BaseTitle from '../base/BaseTitle.vue';
 import { homepage } from '../../../../package.json';
 
 export default {
+  name: 'ConfigurationDocs',
   components: {
     BaseTitle,
   },
-  emits: ['on-css', 'change-props'],
+  emits: ['change-styles', 'change-props'],
   data() {
     return {
       homepage,
@@ -276,7 +277,7 @@ export default {
   watch: {
     filteredStyles: {
       handler(val) {
-        this.$emit('on-css', val);
+        this.$emit('change-styles', val);
       },
       immediate: true,
     },

docs/src/components/docs/Install.vue

@@ -20,22 +20,23 @@
     <pre><code
       ref="codeCss"
       class="language-scss"
-    >{{ css }}</code></pre>
+    >{{ styles }}</code></pre>
   </div>
 </template>
 
 <script lang="ts">
+/* eslint-disable no-useless-escape */
 import { defineComponent, onMounted, nextTick, watch, ref } from 'vue';
 import hljs from '../../libraries/highlight';
-import BaseTitle from '../base/Title.vue';
+import BaseTitle from '../base/BaseTitle.vue';
 
 export default defineComponent({
   name: 'InstallDocs',
   components: {
     BaseTitle,
   },
   props: {
-    css: {
+    styles: {
       type: String,
       required: true,
     },
@@ -56,7 +57,7 @@ export default defineComponent({
     });
 
     watch(
-      () => props.css,
+      () => props.styles,
       () => nextTick().then(() => hljs.highlightElement(codeCss.value)),
       { immediate: true }
     );
@@ -131,7 +132,7 @@ export default {
     }
   }
 }
-<script>`;
+<\/script>`;
     },
   },
 });

docs/src/components/examples/Stripe/CompanyContent.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import BaseGroup from '../../base/Group.vue';
-import BaseText from '../../base/Text.vue';
+import BaseGroup from '../../base/BaseGroup.vue';
+import BaseText from '../../base/BaseText.vue';
 
 export default {
   components: {

docs/src/components/examples/Stripe/DevelopersContent.vue

@@ -10,8 +10,8 @@
 </template>
 
 <script>
-import BaseGroup from '../../base/Group.vue';
-import BaseText from '../../base/Text.vue';
+import BaseGroup from '../../base/BaseGroup.vue';
+import BaseText from '../../base/BaseText.vue';
 
 export default {
   components: {

docs/src/components/examples/Stripe/MobileContent.vue

@@ -10,8 +10,8 @@
 </template>
 
 <script>
-import BaseGroup from '../../base/Group.vue';
-import BaseText from '../../base/Text.vue';
+import BaseGroup from '../../base/BaseGroup.vue';
+import BaseText from '../../base/BaseText.vue';
 
 export default {
   components: {

docs/src/components/examples/Stripe/ProductsContent.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script>
-import BaseText from '../../base/Text.vue';
-import BaseGroup from '../../base/Group.vue';
+import BaseText from '../../base/BaseText.vue';
+import BaseGroup from '../../base/BaseGroup.vue';
 
 export default {
   components: {

docs/src/components/examples/Stripe/StripeHeader.vue

@@ -40,6 +40,11 @@ export default {
   data() {
     return {
       menu: [
+        {
+          title: 'Products',
+          dropdown: 'products',
+          component: 'ProductsContent',
+        },
         {
           title: 'Company',
           dropdown: 'company',
@@ -51,14 +56,9 @@ export default {
           component: 'DevelopersContent',
         },
         {
-          title: 'Products',
-          dropdown: 'products',
-          component: 'ProductsContent',
-        },
-        {
-          title: 'Pricing',
+          title: 'Repository',
           attributes: {
-            href: '#pricing',
+            href: 'https://github.com/oleksiikhr/vue-stripe-menu',
           },
         },
       ],