docs: 完善文档

.eslintrc.cjs

@@ -33,7 +33,11 @@ module.exports = {
     {
       files: ['*.vue'],
       extends: ['plugin:vue/vue3-recommended'],
-      plugins: ['vue']
+      plugins: ['vue'],
+
+      rules: {
+        'vue/multi-word-component-names': 'off'
+      }
     }
   ],
 

README.md

@@ -1,3 +1,3 @@
 # vue-mentions
 
-@vue @metions
+@vue @mentions

packages/docs/.vitepress/cache/deps/_metadata.json

@@ -1,17 +1,17 @@
 {
-  "hash": "e8641a9a",
-  "browserHash": "9ed3cea1",
+  "hash": "7e59de79",
+  "browserHash": "cd15e2a4",
   "optimized": {
     "vue": {
       "src": "../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "62193611",
+      "fileHash": "8ca2a83e",
       "needsInterop": false
     },
     "@theme/index": {
       "src": "../../../../../node_modules/.pnpm/vitepress@1.0.0-beta.1/node_modules/vitepress/dist/client/theme-default/index.js",
       "file": "@theme_index.js",
-      "fileHash": "a04f78f9",
+      "fileHash": "b51a24ab",
       "needsInterop": false
     }
   },

packages/docs/.vitepress/config.ts

@@ -7,23 +7,23 @@ export default defineConfig({
   description: "A mentions input base on vanilla JS.",
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
-    nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/markdown-examples' }
-    ],
+    // nav: [
+    //   { text: 'Home', link: '/' },
+    //   { text: 'Examples', link: '/markdown-examples' }
+    // ],
 
-    sidebar: [
-      {
-        text: 'Examples',
-        items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
-      }
-    ],
+    // sidebar: [
+    //   {
+    //     text: 'Examples',
+    //     items: [
+    //       { text: 'Markdown Examples', link: '/markdown-examples' },
+    //       { text: 'Runtime API Examples', link: '/api-examples' }
+    //     ]
+    //   }
+    // ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
+      { icon: 'github', link: 'https://github.com/humandetail/mentions.git' }
     ]
   }
 })

packages/docs/components/Mentions.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { createMentions } from 'mentions.js'
+import 'mentions.js/mentions.css'
+
+const inputValue = ref('')
+const containerRef = ref()
+
+const mentions = createMentions({
+  value: '',
+  options: [
+    { id: '1', name: 'John' },
+    { id: '2', name: 'Jack' },
+    { id: '3', name: 'Tom' },
+    { id: '4', name: 'Jerry' }
+  ]
+})
+
+mentions.on('change', (value) => {
+  inputValue.value = value
+})
+
+onMounted(() => {
+  mentions.mount(containerRef.value)
+})
+</script>
+
+<template>
+  <div>
+    <div ref="containerRef" />
+    <p>output:</p>
+    <output>{{ inputValue }}</output>
+  </div>
+</template>

packages/docs/index.md

@@ -1,32 +1,55 @@
----
-# https://vitepress.dev/reference/default-theme-home-page
-layout: home
-
-hero:
-  name: "mentions.js"
-  text: "A mentions input base on vanilla JS."
-  # tagline: My great project tagline
-  actions:
-    - theme: brand
-      text: Getting Started
-      link: /#getting-started
-    - theme: alt
-      text: Playground
-      link: /playground
-
-# features:
-#   - title: Feature A
-#     details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-#   - title: Feature B
-#     details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-#   - title: Feature C
-#     details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
----
+<script setup>
+import Mentions from './components/Mentions.vue'
+</script>
+
+<h1 style="font-size:56px;line-height:64px;font-weight:bold;color:#10b981">mentions.js</h1>
+<p style="font-size:56px;line-height:64px;font-weight:bold">A mentions input base on vanilla JS.</p>
 
 ## Getting Started
 
 ```bash
-npm install
+npm install mentions.js
+```
+
+## Usage Mentions
+```js
+import { createMentions } from 'mentions.js'
+import 'mentions.js/mentions.css'
+
+const mentions = createMentions({
+  value: '',
+  options: [
+    { id: 1, name: 'John' },
+    { id: 2, name: 'Jack' },
+    { id: 3, name: 'Tom' },
+    { id: 4, name: 'Jerry' },
+  ],
+})
+
+mentions.on('change', (value) => {
+  console.log(value)
+})
+
+mentions.mount(document.getElementById('container'))
 ```
 
+## createMentions Options
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| type | `input` \| `textarea` | `input` | render input type. |
+| value | `string` | `''` | The initial value of the mentions input. |
+| options | See the table below | `[]` | The options of the mentions input. |
+| placeholder | `string` | `'@'` | The placeholder of the mentions input. |
+
+### Options
+| Name | Type | Description |
+| --- | --- | --- |
+| id | `string` | The id of the option. |
+| name | `string` | The name of the option. |
+| disabled | `boolean` | Whether the option is disabled. |
+| customRender | `(option: MentionDropdownListOption, index: number) => string` | Custom render option. |
+
 ## Playground
+
+<Mentions />

packages/docs/package.json

@@ -15,5 +15,8 @@
   "devDependencies": {
     "vitepress": "^1.0.0-beta.1",
     "vue": "^3.2.47"
+  },
+  "dependencies": {
+    "mentions.js": "*"
   }
 }

packages/example/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "mentions.js": "workspace:^0.0.1",
+    "mentions.js": "workspace:*",
     "vue": "^3.2.47"
   },
   "devDependencies": {

packages/vue/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "mentions.js": "workspace:^0.0.1"
+    "mentions.js": "workspace:^*"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",