[INIT] repo

.eslintrc.js

@@ -0,0 +1,42 @@
+module.exports = {
+  root : true,
+  env : {
+    node : true,
+    jest : true,
+    es2020 : true
+  },
+  extends : [
+    'plugin:vue/essential',
+    'eslint:recommended'
+  ],
+  ignorePatterns : ['/dist/**'],
+  rules : {
+    'no-console' : process.env.NODE_ENV !== 'development' ?  ['error', { allow : ['warn', 'error'] }] : 'off',
+    'no-debugger' : process.env.NODE_ENV !== 'development' ? 'error' : 'off',
+    'vue/component-name-in-template-casing' : ['error', 'kebab-case'],
+    'no-var' : 'off',
+    semi : ['error', 'always'],
+    indent : [1, 'tab'],
+    'space-before-function-paren' : [
+      'warn',
+      {
+        anonymous : 'always',
+        named : 'never'
+      }
+    ],
+    'key-spacing' : [
+      'warn',
+      {
+        beforeColon : true
+      }
+    ],
+    'operator-linebreak' : ['error', 'after'],
+    'no-nested-ternary' : 'error',
+    quotes : ['error', 'single'],
+    'arrow-parens' : ['error', 'always']
+  },
+  plugins : ['vue'],
+  parserOptions : {
+    parser : 'babel-eslint'
+  }
+};

.github/workflows/release.yml

@@ -0,0 +1,38 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - 'master'
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+
+      - name: Get package version
+        id: version
+        run: echo "::set-output name=version::$(node -p "require('./package.json').version")"
+
+      - name: Publish to npm
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
+          npm publish --access public
+
+      - name: Create GitHub Release
+        uses: actions/create-release@v1
+        with:
+          tag_name: v${{ steps.version.outputs.version }}
+          release_name: Release vue2 easy toc version ${{ steps.version.outputs.version }}
+          draft: false
+          prerelease: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+
+tests/coverage
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

LICENSE

@@ -0,0 +1,13 @@
+Copyright 2023 RovaHub Technologies
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

README.md

@@ -0,0 +1,68 @@
+[![](https://img.shields.io/npm/v/%40rovahub%2Fvue-easy-toc/latest.svg?style=flat-square)](https://npmjs.com/package/%40rovahub%2Fvue-easy-toc)
+[![](https://img.shields.io/npm/dt/%40rovahub%2Fvue-easy-toc.svg?style=flat-square)](https://npmjs.com/package/%40rovahub%2Fvue-easy-toc)
+
+
+# @rovahub/vue-easy-toc
+
+This Vue2 plugin allows you to automatically generate a table of contents and insert it into your webpage.
+
+## Install
+``` bash
+# Npm
+npm install @rovahub/vue-easy-toc --save
+
+# Yarn
+yarn add @rovahub/vue-easy-toc
+```
+
+## Quickstart
+
+### Vue 2
+
+Import the @rovahub/vue-easy-toc in your main JavaScript file in src/ folder.
+
+```bash
+# src/main.js
+
+// main.js
+
+import Vue from "vue";
+import App from "./App.vue";
+import VueEasyTocPlugin from "@rovahub/vue-easy-toc";
+
+Vue.config.productionTip = false;
+
+Vue.use(VueEasyTocPlugin);
+
+new Vue({
+  render: h => h(App)
+}).$mount("#app");
+
+```
+
+### Nuxt JS
+
+Create JS file in /plugins/ folder and add content to the plugin file.
+```bash
+# plugins/vue-easy-toc.js
+
+import Vue from 'vue';
+import VueEasyTocPlugin from "@rovahub/vue-easy-toc";
+
+Vue.use(VueEasyTocPlugin);
+```
+
+In your nuxt.config.js file, add the plugin to the plugins array:
+```bash
+# nuxt.config.js
+
+module.exports = {
+  // ...
+  plugins: [
+    { src: "~/plugins/vue-easy-toc.js", mode: "client" }
+  ],
+  // ...
+}
+```
+
+## Options

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets : [
+    '@vue/cli-plugin-babel/preset'
+  ]
+};

jest.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+  moduleFileExtensions : ['js', 'jsx', 'json', 'vue'],
+  transform : {
+    '^.+\\.vue$' : 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$' : 'jest-transform-stub',
+    '^.+\\.jsx?$' : 'babel-jest',
+  },
+  transformIgnorePatterns : [
+    '/node_modules/',
+  ],
+  moduleNameMapper : {
+    '^@/(.*)$' : '<rootDir>/src/$1',
+  },
+  snapshotSerializers : [
+    'jest-serializer-vue',
+  ],
+  testMatch : [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
+  ],
+  testURL : 'http://localhost/',
+  watchPlugins : [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+  ],
+  setupFiles : ['./tests/setup'],
+  collectCoverage : true,
+  collectCoverageFrom : [
+    'src/*.js',
+    // exclude node_modules
+    '!**/node_modules/**',
+  ],
+  coverageDirectory : '<rootDir>/tests/coverage/',
+};

package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@rovahub/vue-easy-toc",
+  "version": "1.0.0",
+  "description": "This Vue2 plugin allows you to automatically generate a table of contents and insert it into your webpage.",
+  "homepage": "https://github.com/rovahub/vue-easy-toc#readme",
+  "bugs": {
+    "url": "https://github.com/rovahub/vue-easy-toc/issues",
+    "email": "support@rovahub.vn"
+  },
+  "author": "RovaHub Technologies <info@rovahub.vn> (https://rovahub.vn)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rovahub/vue-easy-toc.git",
+    "repository": "rovahub/vue-easy-toc"
+  },
+  "main": "dist/vue-easy-toc.js",
+  "scripts": {
+    "build": "webpack --config webpack.config.js --mode=production",
+    "lint": "vue-cli-service lint",
+    "test:unit": "NODE_ENV=test vue-cli-service test:unit"
+  },
+  "license": "Apache-2.0",
+  "keywords": [
+    "rovahub",
+    "rovahub technologies",
+    "vue-easy-toc",
+    "nuxt-easy-toc",
+    "table of contents"
+  ],
+  "files": [
+    "README.md",
+    "LICENSE",
+    "dist/*"
+  ],
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-plugin-unit-jest": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "@vue/test-utils": "2.4.1",
+    "babel-eslint": "10.1.0",
+    "babel-jest": "29.6.4",
+    "core-js": "3.32.1",
+    "eslint": "8.48.0",
+    "eslint-plugin-vue": "9.17.0",
+    "sass": "1.57.1",
+    "sass-loader": "13.2.0",
+    "vue": "2.7.14",
+    "vue-loader": "15.10.2",
+    "vue-template-compiler": "2.7.14",
+    "webpack-cli": "5.1.4"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  }
+}

src/components/VueEasyToc.vue

@@ -0,0 +1,42 @@
+<template>
+  <ul id="vue-easy-toc" v-toc="{ content, heading}"/>
+</template>
+<script>
+export default {
+  name: 'VueEasyToc',
+  props: {
+    content: {
+      type: String,
+      default: 'body'
+    },
+    heading: {
+      type: String,
+      default: 'h1,h2,h3,h4,h5,h6'
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+#vue-easy-toc {
+  list-style: none;
+  background: #F9F9F9;
+  border: 1px solid #AAAAAA;
+  border-radius: 4px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  display: table;
+  margin: 0 0 1em;
+  padding: 10px;
+  position: relative;
+  width: auto;
+
+  li {
+    a {
+
+    }
+  }
+
+  ul {
+    list-style: none;
+  }
+}
+</style>

src/index.js

@@ -0,0 +1,46 @@
+import VueEasyToc from './components/VueEasyToc.vue';
+import {generateId} from "./utils";
+
+export default {
+  install(Vue) {
+    Vue.directive('toc', {
+      bind(element, binding) {
+        const contentSelector = binding.value.content || 'body';
+        const headingSelectors = (binding.value.heading || 'h1,h2,h3,h4,h5,h6').split(',');
+
+        const headings = document.querySelectorAll(`${contentSelector} ${headingSelectors.join(',')}`);
+
+        // Initialize an empty stack for maintaining the current level of headings
+        const stack = [];
+
+        headings.forEach(heading => {
+          const level = parseInt(heading.tagName[1]);
+          const id = heading.getAttribute('id') || generateId(heading.textContent);
+          heading.setAttribute('id', id);
+          const listItem = document.createElement('li');
+          const link = document.createElement('a');
+          link.href = `#${id}`;
+          link.textContent = heading.textContent.trim();
+          listItem.appendChild(link);
+
+          // Determine the parent UL element for this heading based on its level
+          while (stack.length > 0 && stack[stack.length - 1].level >= level) {
+            stack.pop();
+          }
+
+          if (stack.length === 0) {
+            // If the stack is empty, append the listItem directly to the root element
+            element.appendChild(listItem);
+          } else {
+            // Otherwise, append the listItem to the last UL element in the stack
+            stack[stack.length - 1].ul.appendChild(listItem);
+          }
+
+          // Push the current heading and UL element to the stack
+          stack.push({level, ul: listItem.appendChild(document.createElement('ul'))});
+        });
+      }
+    });
+    Vue.component('VueEasyToc', VueEasyToc);
+  },
+};