├── packages
    ├── test-e2e
    │   ├── .eslintignore
    │   ├── .browserslistrc
    │   ├── cypress.json
    │   ├── src
    │   │   ├── views
    │   │   │   ├── Home.vue
    │   │   │   ├── Limit.vue
    │   │   │   ├── OmitKey.vue
    │   │   │   ├── InsertSpace.vue
    │   │   │   ├── MapInsert.vue
    │   │   │   ├── ItemSlot.vue
    │   │   │   ├── Defaults.vue
    │   │   │   ├── WrappedInput.vue
    │   │   │   ├── ContentEditable.vue
    │   │   │   ├── Events.vue
    │   │   │   └── MultipleCollections.vue
    │   │   ├── App.vue
    │   │   ├── main.js
    │   │   └── router.js
    │   ├── babel.config.js
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── index.html
    │   ├── .editorconfig
    │   ├── tests
    │   │   └── e2e
    │   │   │   ├── .eslintrc.js
    │   │   │   ├── specs
    │   │   │       ├── item-slot.js
    │   │   │       ├── insert-options.js
    │   │   │       ├── wrapped-input.js
    │   │   │       ├── limit.js
    │   │   │       ├── multiple-collections.js
    │   │   │       ├── events.js
    │   │   │       ├── content-editable.js
    │   │   │       └── defaults.js
    │   │   │   ├── support
    │   │   │       ├── index.js
    │   │   │       └── commands.js
    │   │   │   └── plugins
    │   │   │       └── index.js
    │   ├── .gitignore
    │   ├── README.md
    │   ├── .eslintrc.js
    │   └── package.json
    ├── vue-mention
    │   ├── .npmignore
    │   ├── src
    │   │   ├── global-shim.d.ts
    │   │   ├── vue-shim.d.ts
    │   │   ├── index.ts
    │   │   └── Mentionable.vue
    │   ├── babel.config.js
    │   ├── tsconfig.json
    │   ├── vite.config.ts
    │   ├── .eslintrc.js
    │   ├── README.md
    │   └── package.json
    └── docs
    │   ├── package.json
    │   └── src
    │       ├── .vuepress
    │           ├── config.js
    │           ├── components
    │           │   ├── GettingStartedDemo.vue
    │           │   ├── AsyncItemsDemo.vue
    │           │   └── Demo.vue
    │           ├── styles
    │           │   └── index.styl
    │           └── public
    │           │   └── vue-mention.svg
    │       ├── guide
    │           ├── README.md
    │           └── async-items.md
    │       └── README.md
├── .github
    ├── FUNDING.yml
    └── workflows
    │   ├── changelog.yml
    │   └── ci.yml
├── lerna.json
├── package.json
├── LICENSE
├── .gitignore
└── README.md


/packages/test-e2e/.eslintignore:
--------------------------------------------------------------------------------
1 | vue-mention
2 | 


--------------------------------------------------------------------------------
/packages/vue-mention/.npmignore:
--------------------------------------------------------------------------------
1 | docs/
2 | docs-src/
3 | .babelrc
4 | 


--------------------------------------------------------------------------------
/packages/test-e2e/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/packages/vue-mention/src/global-shim.d.ts:
--------------------------------------------------------------------------------
1 | declare const VERSION: string
2 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 | 
3 | github: Akryum
4 | 


--------------------------------------------------------------------------------
/packages/test-e2e/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 |   "pluginsFile": "tests/e2e/plugins/index.js"
3 | }
4 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/views/Home.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="home">
3 |     Home
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/packages/test-e2e/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset',
4 |   ],
5 | }
6 | 


--------------------------------------------------------------------------------
/packages/test-e2e/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Akryum/vue-mention/HEAD/packages/test-e2e/public/favicon.ico


--------------------------------------------------------------------------------
/packages/vue-mention/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     [require('@babel/preset-env'), { modules: false }],
4 |   ],
5 | }
6 | 


--------------------------------------------------------------------------------
/packages/vue-mention/src/vue-shim.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   const component: any
4 |   export default component
5 | }
6 | 


--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 |   "npmClient": "yarn",
3 |   "useWorkspaces": true,
4 |   "version": "2.0.0-alpha.3",
5 |   "packages": [
6 |     "packages/*"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/packages/test-e2e/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view/>
 3 | </template>
 4 | 
 5 | <style>
 6 | body {
 7 |   font-family: sans-serif;
 8 | }
 9 | </style>
10 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: [
 3 |     'cypress',
 4 |   ],
 5 |   env: {
 6 |     mocha: true,
 7 |     'cypress/globals': true,
 8 |   },
 9 |   rules: {
10 |     strict: 'off',
11 |   },
12 | }
13 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import VueMention from 'vue-mention'
 3 | import App from './App.vue'
 4 | import router from './router'
 5 | import 'floating-vue/dist/style.css'
 6 | 
 7 | const app = createApp(App)
 8 | 
 9 | app.use(VueMention)
10 | app.use(router)
11 | 
12 | app.mount('#app')
13 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/specs/item-slot.js:
--------------------------------------------------------------------------------
 1 | describe('default item slot', () => {
 2 |   it('display custom item content', () => {
 3 |     cy.visit('/item-slot')
 4 |     cy.get('.input').type('@')
 5 |     cy.get('.mention-item')
 6 |       .should('contain', 'Guillaume')
 7 |       .should('contain', 'Eduardo')
 8 |       .should('contain', 'Sébastien')
 9 |   })
10 | })
11 | 


--------------------------------------------------------------------------------
/packages/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-mention-docs",
 3 |   "version": "0.1.7",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vuepress dev src",
 7 |     "build": "vuepress build src"
 8 |   },
 9 |   "dependencies": {
10 |     "v-tooltip": "^2.0.3",
11 |     "vue-mention": "^1.0.0"
12 |   },
13 |   "devDependencies": {
14 |     "vuepress": "^1.4.1"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/packages/test-e2e/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | /tests/e2e/videos/
 6 | /tests/e2e/screenshots/
 7 | 
 8 | # local env files
 9 | .env.local
10 | .env.*.local
11 | 
12 | # Log files
13 | npm-debug.log*
14 | yarn-debug.log*
15 | yarn-error.log*
16 | 
17 | # Editor directories and files
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-mention-monorepo",
 3 |   "version": "2.0.0-alpha.3",
 4 |   "private": true,
 5 |   "workspaces": [
 6 |     "packages/*"
 7 |   ],
 8 |   "scripts": {
 9 |     "build": "lerna run build",
10 |     "lint": "lerna run lint",
11 |     "release": "yarn run lint && lerna publish --dist-tag next"
12 |   },
13 |   "devDependencies": {
14 |     "lerna": "^3.20.2"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/packages/test-e2e/README.md:
--------------------------------------------------------------------------------
 1 | # test-e2e
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Run your end-to-end tests
19 | ```
20 | yarn test:e2e
21 | ```
22 | 
23 | ### Lints and fixes files
24 | ```
25 | yarn lint
26 | ```
27 | 
28 | ### Customize configuration
29 | See [Configuration Reference](https://cli.vuejs.org/config/).
30 | 


--------------------------------------------------------------------------------
/packages/vue-mention/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2018",
 4 |     "module": "ESNext",
 5 |     "strict": true,
 6 |     "declaration": true,
 7 |     "lib": [
 8 |       "ESNext",
 9 |       "DOM",
10 |       "DOM.Iterable"
11 |     ],
12 |     "jsx": "preserve",
13 |     "outDir": "dist",
14 |     "moduleResolution": "node"
15 |   },
16 |   "include": [
17 |     "src/**/*.ts",
18 |     "src/**/*.vue"
19 |   ],
20 |   "exclude": [
21 |     "node_modules",
22 |     "dist",
23 |     "**/*.js"
24 |   ]
25 | }


--------------------------------------------------------------------------------
/packages/test-e2e/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard',
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint',
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 |     // trailing comma
17 |     'comma-dangle': ['error', 'always-multiline'],
18 |     'vue/multi-word-component-names': 'off',
19 |   },
20 | }
21 | 


--------------------------------------------------------------------------------
/packages/test-e2e/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/views/Limit.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   data () {
 4 |     return {
 5 |       text: '',
 6 |       items: [],
 7 |     }
 8 |   },
 9 | 
10 |   created () {
11 |     for (let i = 0; i < 100; i++) {
12 |       this.items.push({
13 |         value: `item-${String(i).padStart(3, '0')}`,
14 |       })
15 |     }
16 |   },
17 | }
18 | </script>
19 | 
20 | <template>
21 |   <div
22 |     class="demo"
23 |   >
24 |     <Mentionable
25 |       :keys="['@']"
26 |       :items="items"
27 |       :limit="10"
28 |     >
29 |       <textarea
30 |         v-model="text"
31 |         rows="6"
32 |         class="input"
33 |       />
34 |     </Mentionable>
35 | 
36 |     <div class="preview">{{ text }}</div>
37 |   </div>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/specs/insert-options.js:
--------------------------------------------------------------------------------
 1 | describe('insert space', () => {
 2 |   it('inserts a space after mention', () => {
 3 |     cy.visit('/insert-space')
 4 |     cy.get('.input').type('@{enter}abc')
 5 |     cy.get('.preview').should('contain', '@akryum abc')
 6 |   })
 7 | })
 8 | 
 9 | describe('omit key', () => {
10 |   it('does not insert the key before mention', () => {
11 |     cy.visit('/omit-key')
12 |     cy.get('.input').type('@{enter}')
13 |     cy.get('.preview').should('contain', 'akryum')
14 |   })
15 | })
16 | 
17 | describe('map insert', () => {
18 |   it('maps the inserted value', () => {
19 |     cy.visit('/map-insert')
20 |     cy.get('.input').type('@{enter}')
21 |     cy.get('.preview').should('contain', '@AKRYUM')
22 |   })
23 | })
24 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/support/index.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************************
 2 | // This example support/index.js is processed and
 3 | // loaded automatically before your test files.
 4 | //
 5 | // This is a great place to put global configuration and
 6 | // behavior that modifies Cypress.
 7 | //
 8 | // You can change the location of this file or turn off
 9 | // automatically serving support files with the
10 | // 'supportFile' configuration option.
11 | //
12 | // You can read more here:
13 | // https://on.cypress.io/configuration
14 | // ***********************************************************
15 | 
16 | // Import commands.js using ES2015 syntax:
17 | import './commands'
18 | 
19 | // Alternatively you can use CommonJS syntax:
20 | // require('./commands')
21 | 


--------------------------------------------------------------------------------
/packages/vue-mention/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { App } from 'vue'
 2 | import Mentionable from './Mentionable.vue'
 3 | 
 4 | export {
 5 |   Mentionable,
 6 | }
 7 | 
 8 | function registerComponents (app: App, prefix: string) {
 9 |   app.component(`${prefix}mentionable`, Mentionable)
10 |   app.component(`${prefix}Mentionable`, Mentionable)
11 | }
12 | 
13 | export function install (app: App, options: string) {
14 |   const finalOptions = Object.assign({}, {
15 |     installComponents: true,
16 |     componentsPrefix: '',
17 |   }, options)
18 | 
19 |   if (finalOptions.installComponents) {
20 |     registerComponents(app, finalOptions.componentsPrefix)
21 |   }
22 | }
23 | 
24 | const plugin = {
25 |   // eslint-disable-next-line no-undef
26 |   version: VERSION,
27 |   install,
28 | }
29 | 
30 | export default plugin
31 | 


--------------------------------------------------------------------------------
/packages/vue-mention/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'path'
 2 | import { defineConfig } from 'vite'
 3 | import vue from '@vitejs/plugin-vue'
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [
 7 |     vue(),
 8 |   ],
 9 |   build: {
10 |     lib: {
11 |       entry: resolve(__dirname, './src/index.ts'),
12 |       name: 'VueMention',
13 |     },
14 |     rollupOptions: {
15 |       external: [
16 |         'vue',
17 |         'floating-vue',
18 |       ],
19 |       output: {
20 |         globals: {
21 |           vue: 'Vue',
22 |           'floating-vue': 'FloatingVue',
23 |         },
24 |       },
25 |     },
26 |   },
27 |   define: {
28 |     // eslint-disable-next-line @typescript-eslint/no-var-requires
29 |     VERSION: JSON.stringify(require('./package.json').version),
30 |   },
31 | })
32 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/views/OmitKey.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   data () {
 4 |     return {
 5 |       text: '',
 6 |       items: [
 7 |         {
 8 |           value: 'akryum',
 9 |           firstName: 'Guillaume',
10 |         },
11 |         {
12 |           value: 'posva',
13 |           firstName: 'Eduardo',
14 |         },
15 |         {
16 |           value: 'atinux',
17 |           firstName: 'Sébastien',
18 |         },
19 |       ],
20 |     }
21 |   },
22 | }
23 | </script>
24 | 
25 | <template>
26 |   <div
27 |     class="demo"
28 |   >
29 |     <Mentionable
30 |       :keys="['@']"
31 |       :items="items"
32 |       omit-key
33 |     >
34 |       <textarea
35 |         v-model="text"
36 |         rows="6"
37 |         class="input"
38 |       />
39 |     </Mentionable>
40 | 
41 |     <div class="preview">{{ text }}</div>
42 |   </div>
43 | </template>
44 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/views/InsertSpace.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   data () {
 4 |     return {
 5 |       text: '',
 6 |       items: [
 7 |         {
 8 |           value: 'akryum',
 9 |           firstName: 'Guillaume',
10 |         },
11 |         {
12 |           value: 'posva',
13 |           firstName: 'Eduardo',
14 |         },
15 |         {
16 |           value: 'atinux',
17 |           firstName: 'Sébastien',
18 |         },
19 |       ],
20 |     }
21 |   },
22 | }
23 | </script>
24 | 
25 | <template>
26 |   <div
27 |     class="demo"
28 |   >
29 |     <Mentionable
30 |       :keys="['@']"
31 |       :items="items"
32 |       insert-space
33 |     >
34 |       <textarea
35 |         v-model="text"
36 |         rows="6"
37 |         class="input"
38 |       />
39 |     </Mentionable>
40 | 
41 |     <div class="preview">{{ text }}</div>
42 |   </div>
43 | </template>
44 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/specs/wrapped-input.js:
--------------------------------------------------------------------------------
 1 | describe('wrapped input support', () => {
 2 |   it('finds the textarea', () => {
 3 |     cy.visit('/wrapped-input')
 4 |     cy.get('.input').type('abc')
 5 |     cy.get('.v-popper__popper').should('not.exist')
 6 |     cy.get('.input').type(' @')
 7 |     cy.get('.v-popper__popper').should('be.visible')
 8 |       .should('contain', 'akryum')
 9 |       .should('contain', 'posva')
10 |       .should('contain', 'atinux')
11 |   })
12 | 
13 |   it('finds the input', () => {
14 |     cy.visit('/wrapped-input')
15 |     cy.get('.toggle').click()
16 |     cy.get('.input').type('abc')
17 |     cy.get('.v-popper__popper').should('not.exist')
18 |     cy.get('.input').type(' @')
19 |     cy.get('.v-popper__popper').should('be.visible')
20 |       .should('contain', 'akryum')
21 |       .should('contain', 'posva')
22 |       .should('contain', 'atinux')
23 |   })
24 | })
25 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/views/MapInsert.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   data () {
 4 |     return {
 5 |       text: '',
 6 |       items: [
 7 |         {
 8 |           value: 'akryum',
 9 |           firstName: 'Guillaume',
10 |         },
11 |         {
12 |           value: 'posva',
13 |           firstName: 'Eduardo',
14 |         },
15 |         {
16 |           value: 'atinux',
17 |           firstName: 'Sébastien',
18 |         },
19 |       ],
20 |     }
21 |   },
22 | }
23 | </script>
24 | 
25 | <template>
26 |   <div
27 |     class="demo"
28 |   >
29 |     <Mentionable
30 |       :keys="['@']"
31 |       :items="items"
32 |       :map-insert="item => item.value.toUpperCase()"
33 |     >
34 |       <textarea
35 |         v-model="text"
36 |         rows="6"
37 |         class="input"
38 |       />
39 |     </Mentionable>
40 | 
41 |     <div class="preview">{{ text }}</div>
42 |   </div>
43 | </template>
44 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/views/ItemSlot.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   data () {
 4 |     return {
 5 |       text: '',
 6 |       items: [
 7 |         {
 8 |           value: 'akryum',
 9 |           firstName: 'Guillaume',
10 |         },
11 |         {
12 |           value: 'posva',
13 |           firstName: 'Eduardo',
14 |         },
15 |         {
16 |           value: 'atinux',
17 |           firstName: 'Sébastien',
18 |         },
19 |       ],
20 |     }
21 |   },
22 | }
23 | </script>
24 | 
25 | <template>
26 |   <div
27 |     class="demo"
28 |   >
29 |     <Mentionable
30 |       :keys="['@']"
31 |       :items="items"
32 |     >
33 |       <textarea
34 |         v-model="text"
35 |         rows="6"
36 |         class="input"
37 |       />
38 | 
39 |       <template #item="{ item }">
40 |         {{ item.firstName }}
41 |       </template>
42 |     </Mentionable>
43 | 
44 |     <div class="preview">{{ text }}</div>
45 |   </div>
46 | </template>
47 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/support/commands.js:
--------------------------------------------------------------------------------
 1 | // ***********************************************
 2 | // This example commands.js shows you how to
 3 | // create various custom commands and overwrite
 4 | // existing commands.
 5 | //
 6 | // For more comprehensive examples of custom
 7 | // commands please read more here:
 8 | // https://on.cypress.io/custom-commands
 9 | // ***********************************************
10 | //
11 | //
12 | // -- This is a parent command --
13 | // Cypress.Commands.add("login", (email, password) => { ... })
14 | //
15 | //
16 | // -- This is a child command --
17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18 | //
19 | //
20 | // -- This is a dual command --
21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22 | //
23 | //
24 | // -- This is will overwrite an existing command --
25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
26 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/views/Defaults.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   data () {
 4 |     return {
 5 |       text: '',
 6 |       items: [
 7 |         {
 8 |           value: 'akryum',
 9 |           firstName: 'Guillaume',
10 |         },
11 |         {
12 |           value: 'posva',
13 |           firstName: 'Eduardo',
14 |         },
15 |         {
16 |           value: 'atinux',
17 |           firstName: 'Sébastien',
18 |         },
19 |       ],
20 |     }
21 |   },
22 | }
23 | </script>
24 | 
25 | <template>
26 |   <div
27 |     class="demo"
28 |   >
29 |     <Mentionable
30 |       :keys="['@']"
31 |       :items="items"
32 |       popper-class="defaults-mention"
33 |     >
34 |       <textarea
35 |         v-model="text"
36 |         rows="6"
37 |         class="input"
38 |       />
39 |     </Mentionable>
40 | 
41 |     <div class="preview">{{ text }}</div>
42 |   </div>
43 | </template>
44 | 
45 | <style>
46 | .defaults-mention .mention-selected {
47 |   background: #aaffc7;
48 | }
49 | </style>
50 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/plugins/index.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable arrow-body-style */
 2 | // https://docs.cypress.io/guides/guides/plugins-guide.html
 3 | 
 4 | // if you need a custom webpack configuration you can uncomment the following import
 5 | // and then use the `file:preprocessor` event
 6 | // as explained in the cypress docs
 7 | // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
 8 | 
 9 | // /* eslint-disable import/no-extraneous-dependencies, global-require */
10 | // const webpack = require('@cypress/webpack-preprocessor')
11 | 
12 | module.exports = (on, config) => {
13 |   // on('file:preprocessor', webpack({
14 |   //  webpackOptions: require('@vue/cli-service/webpack.config'),
15 |   //  watchOptions: {}
16 |   // }))
17 | 
18 |   return Object.assign({}, config, {
19 |     fixturesFolder: 'tests/e2e/fixtures',
20 |     integrationFolder: 'tests/e2e/specs',
21 |     screenshotsFolder: 'tests/e2e/screenshots',
22 |     videosFolder: 'tests/e2e/videos',
23 |     supportFile: 'tests/e2e/support/index.js',
24 |   })
25 | }
26 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/specs/limit.js:
--------------------------------------------------------------------------------
 1 | describe('limit', () => {
 2 |   it('displays the first 10 items', () => {
 3 |     cy.visit('/limit')
 4 |     cy.get('.input').type('@')
 5 |     cy.get('.mention-item').should('have.length', 10)
 6 |     for (let i = 0; i < 10; i++) {
 7 |       cy.get('.v-popper__popper').should('contain', `item-${String(i).padStart(3, '0')}`)
 8 |     }
 9 |     // Loops
10 |     cy.get('.input').type('{uparrow}{enter}')
11 |     cy.get('.preview').should('contain', 'item-009')
12 |   })
13 | 
14 |   it('searches and displays the first 10 matched items', () => {
15 |     cy.visit('/limit')
16 |     cy.get('.input').type('@1')
17 |     cy.get('.mention-item').should('have.length', 10)
18 |     cy.get('.v-popper__popper').should('contain', 'item-001')
19 |     for (let i = 0; i < 9; i++) {
20 |       cy.get('.v-popper__popper').should('contain', `item-${String(10 + i).padStart(3, '0')}`)
21 |     }
22 |     // Loops
23 |     cy.get('.input').type('{uparrow}{enter}')
24 |     cy.get('.preview').should('contain', 'item-018')
25 |   })
26 | })
27 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/specs/multiple-collections.js:
--------------------------------------------------------------------------------
 1 | describe('with multiple collections and @open', () => {
 2 |   it('shows user suggestions with @open', () => {
 3 |     cy.visit('/multiple-collections')
 4 |     cy.get('.input').type('@')
 5 |     cy.get('.v-popper__popper').should('be.visible')
 6 |       .should('contain', 'akryum')
 7 |       .should('contain', 'posva')
 8 |       .should('contain', 'atinux')
 9 |     cy.get('.user').should('have.length', 3)
10 |   })
11 | 
12 |   it('shows issue suggestions with @open', () => {
13 |     cy.visit('/multiple-collections')
14 |     cy.get('.input').type('#')
15 |     cy.get('.v-popper__popper').should('be.visible')
16 |       .should('contain', '#123')
17 |       .should('contain', '#42')
18 |       .should('contain', '#77')
19 |     cy.get('.issue').should('have.length', 3)
20 |   })
21 | 
22 |   it('shows custom no-result content', () => {
23 |     cy.visit('/multiple-collections')
24 |     cy.get('.input').type('@zzz')
25 |     cy.get('.v-popper__popper').should('be.visible')
26 |     cy.get('.custom-no-result').should('be.visible')
27 |   })
28 | })
29 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Guillaume Chau
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/packages/test-e2e/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "test-e2e",
 3 |   "version": "2.0.0-alpha.3",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "test:e2e": "vue-cli-service test:e2e",
 9 |     "lint": "vue-cli-service lint",
10 |     "test:e2e:run": "yarn test:e2e --headless"
11 |   },
12 |   "dependencies": {
13 |     "core-js": "^3.6.4",
14 |     "floating-vue": "^2.0.0-beta.1",
15 |     "vue": "^3.2.26",
16 |     "vue-mention": "^2.0.0-alpha.1",
17 |     "vue-router": "^4.0.12"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.5.15",
21 |     "@vue/cli-plugin-e2e-cypress": "~4.5.15",
22 |     "@vue/cli-plugin-eslint": "~4.5.15",
23 |     "@vue/cli-plugin-router": "~4.5.15",
24 |     "@vue/cli-service": "~4.5.15",
25 |     "@vue/eslint-config-standard": "^6.1.0",
26 |     "babel-eslint": "^10.1.0",
27 |     "eslint": "^7.24.0",
28 |     "eslint-plugin-import": "^2.20.2",
29 |     "eslint-plugin-node": "^11.1.0",
30 |     "eslint-plugin-promise": "^6.0.0",
31 |     "eslint-plugin-standard": "^5.0.0",
32 |     "eslint-plugin-vue": "^8.2.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/specs/events.js:
--------------------------------------------------------------------------------
 1 | describe('events', () => {
 2 |   it('emits search event', () => {
 3 |     cy.visit('/search-event')
 4 |     cy.get('.input').type('@pos')
 5 |     cy.get('.v-popper__popper').should('be.visible')
 6 |     cy.get('.search').should('contain', 'pos')
 7 |   })
 8 | 
 9 |   it('emits open and close events', () => {
10 |     cy.visit('/search-event')
11 |     cy.get('.input').type('@pos')
12 |     cy.get('.v-popper__popper').should('be.visible')
13 |     cy.get('.open').should('contain', '@')
14 |     cy.get('.close').should('not.contain', '@')
15 |     cy.get('.input').clear()
16 |     cy.get('.v-popper__popper').should('not.be.visible')
17 |     cy.get('.close').should('contain', '@')
18 |   })
19 | 
20 |   it('emits apply event', () => {
21 |     cy.visit('/search-event')
22 |     cy.get('.input').type('@pos')
23 |     cy.get('.v-popper__popper').should('be.visible')
24 |     cy.get('.apply').should('not.contain', '"item":')
25 |     cy.get('.input').type('{downArrow}{enter}')
26 |     cy.get('.apply').should('contain', 'value: posva')
27 |       .should('contain', 'key: @')
28 |       .should('contain', 'replacedWith: @posva')
29 |   })
30 | })
31 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/views/WrappedInput.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   components: {
 4 |     WrappedTextarea: {
 5 |       render () {
 6 |         return <div>
 7 |           <textarea class="input"/>
 8 |         </div>
 9 |       },
10 |     },
11 | 
12 |     WrappedInput: {
13 |       render () {
14 |         return <div>
15 |           <input class="input"/>
16 |         </div>
17 |       },
18 |     },
19 |   },
20 | 
21 |   data () {
22 |     return {
23 |       items: [
24 |         {
25 |           value: 'akryum',
26 |           firstName: 'Guillaume',
27 |         },
28 |         {
29 |           value: 'posva',
30 |           firstName: 'Eduardo',
31 |         },
32 |         {
33 |           value: 'atinux',
34 |           firstName: 'Sébastien',
35 |         },
36 |       ],
37 |       useTextarea: true,
38 |     }
39 |   },
40 | }
41 | </script>
42 | 
43 | <template>
44 |   <div
45 |     class="demo"
46 |   >
47 |     <label class="toggle">
48 |       <input type="checkbox" v-model="useTextarea">
49 |       Use textarea
50 |     </label>
51 | 
52 |     <Mentionable
53 |       :keys="['@']"
54 |       :items="items"
55 |     >
56 |       <WrappedTextarea v-if="useTextarea" />
57 | 
58 |       <WrappedInput v-else />
59 |     </Mentionable>
60 |   </div>
61 | </template>
62 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/router.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | 
 3 | const routes = [
 4 |   {
 5 |     path: '/',
 6 |     component: () => import('./views/Home.vue'),
 7 |   },
 8 |   {
 9 |     path: '/defaults',
10 |     component: () => import('./views/Defaults.vue'),
11 |   },
12 |   {
13 |     path: '/multiple-collections',
14 |     component: () => import('./views/MultipleCollections.vue'),
15 |   },
16 |   {
17 |     path: '/search-event',
18 |     component: () => import('./views/Events.vue'),
19 |   },
20 |   {
21 |     path: '/insert-space',
22 |     component: () => import('./views/InsertSpace.vue'),
23 |   },
24 |   {
25 |     path: '/omit-key',
26 |     component: () => import('./views/OmitKey.vue'),
27 |   },
28 |   {
29 |     path: '/map-insert',
30 |     component: () => import('./views/MapInsert.vue'),
31 |   },
32 |   {
33 |     path: '/limit',
34 |     component: () => import('./views/Limit.vue'),
35 |   },
36 |   {
37 |     path: '/item-slot',
38 |     component: () => import('./views/ItemSlot.vue'),
39 |   },
40 |   {
41 |     path: '/wrapped-input',
42 |     component: () => import('./views/WrappedInput.vue'),
43 |   },
44 |   {
45 |     path: '/content-editable',
46 |     component: () => import('./views/ContentEditable.vue'),
47 |   },
48 | ]
49 | 
50 | const router = createRouter({
51 |   history: createWebHistory(process.env.BASE_URL),
52 |   routes,
53 | })
54 | 
55 | export default router
56 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/views/ContentEditable.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   data () {
 4 |     return {
 5 |       text: '<i>Edit <b>me</b></i>',
 6 |       items: [
 7 |         {
 8 |           value: 'akryum',
 9 |           firstName: 'Guillaume',
10 |         },
11 |         {
12 |           value: 'posva',
13 |           firstName: 'Eduardo',
14 |         },
15 |         {
16 |           value: 'atinux',
17 |           firstName: 'Sébastien',
18 |         },
19 |       ],
20 |     }
21 |   },
22 | 
23 |   watch: {
24 |     text: 'updateText',
25 |   },
26 | 
27 |   mounted () {
28 |     this.updateText()
29 |   },
30 | 
31 |   methods: {
32 |     updateText () {
33 |       const el = this.$refs.input
34 |       if (el.innerHTML !== this.text) {
35 |         el.innerHTML = this.text
36 |       }
37 |     },
38 |   },
39 | }
40 | </script>
41 | 
42 | <template>
43 |   <div
44 |     class="demo"
45 |   >
46 |     <h1>Content editable</h1>
47 | 
48 |     <Mentionable
49 |       :keys="['@']"
50 |       :items="items"
51 |       placement="bottom-start"
52 |     >
53 |       <div
54 |         ref="input"
55 |         class="input"
56 |         contenteditable="true"
57 |         @input="text = $event.currentTarget.innerHTML"
58 |       />
59 |     </Mentionable>
60 | 
61 |     <pre class="preview">{{ text }}</pre>
62 |   </div>
63 | </template>
64 | 
65 | <style lang="postcss" scoped>
66 | .demo {
67 |   margin: 100px;
68 | }
69 | </style>
70 | 


--------------------------------------------------------------------------------
/packages/vue-mention/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/recommended',
 8 |     '@vue/standard',
 9 |     '@vue/typescript/recommended',
10 |   ],
11 |   parserOptions: {
12 |     ecmaVersion: 2020,
13 |   },
14 |   globals: {
15 |     name: 'off',
16 |   },
17 |   rules: {
18 |     'arrow-parens': 0,
19 |     'generator-star-spacing': 0,
20 |     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
21 |     'comma-dangle': ['error', 'always-multiline'],
22 |     'vue/multi-word-component-names': 'off',
23 |     'vue/html-closing-bracket-newline': [
24 |       'error',
25 |       {
26 |         singleline: 'never',
27 |         multiline: 'always',
28 |       },
29 |     ],
30 |     'no-var': ['error'],
31 |     '@typescript-eslint/member-delimiter-style': [
32 |       'error',
33 |       {
34 |         multiline: {
35 |           delimiter: 'none',
36 |         },
37 |         singleline: {
38 |           delimiter: 'comma',
39 |         },
40 |       },
41 |     ],
42 |     '@typescript-eslint/ban-ts-comment': 'warn',
43 |     '@typescript-eslint/no-use-before-define': 'off',
44 |     'no-use-before-define': 'off',
45 |     '@typescript-eslint/indent': ['error', 2],
46 |     quotes: ['error', 'single', { allowTemplateLiterals: true }],
47 |   },
48 |   ignorePatterns: [
49 |     'node_modules/',
50 |     'dist/',
51 |     '!.*',
52 |   ],
53 | }
54 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/views/Events.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   data () {
 4 |     return {
 5 |       text: '',
 6 |       items: [
 7 |         {
 8 |           value: 'akryum',
 9 |           firstName: 'Guillaume',
10 |         },
11 |         {
12 |           value: 'posva',
13 |           firstName: 'Eduardo',
14 |         },
15 |         {
16 |           value: 'atinux',
17 |           firstName: 'Sébastien',
18 |         },
19 |       ],
20 |       searchText: null,
21 |       openKey: null,
22 |       closeKey: null,
23 |       applyEvent: null,
24 |     }
25 |   },
26 | }
27 | </script>
28 | 
29 | <template>
30 |   <div
31 |     class="demo"
32 |   >
33 |     <Mentionable
34 |       :keys="['@']"
35 |       :items="items"
36 |       @search="searchText = $event"
37 |       @open="openKey = $event"
38 |       @close="closeKey = $event"
39 |       @apply="(item, key, replacedWith) => applyEvent = { item, key, replacedWith }"
40 |     >
41 |       <textarea
42 |         v-model="text"
43 |         rows="6"
44 |         class="input"
45 |       />
46 |     </Mentionable>
47 | 
48 |     <div class="search">{{ searchText }}</div>
49 |     <div class="open">{{ openKey }}</div>
50 |     <div class="close">{{ closeKey }}</div>
51 |     <div class="apply">
52 |       value: {{ applyEvent ? applyEvent.item.value : null }}
53 |       key: {{ applyEvent ? applyEvent.key : null }}
54 |       replacedWith: {{ applyEvent ? applyEvent.replacedWith : null }}
55 |     </div>
56 |   </div>
57 | </template>
58 | 


--------------------------------------------------------------------------------
/packages/docs/src/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   title: 'vue-mention',
 3 |   head: [
 4 |     ['script', {
 5 |       src: 'https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CPromise%2CArray.from%2CEvent',
 6 |     }],
 7 |     ['script', {
 8 |       src: 'https://unpkg.com/shim-keyboard-event-key',
 9 |       async: true,
10 |     }],
11 |     ['link', { rel: 'icon', href: '/vue-mention.svg' }],
12 |   ],
13 |   themeConfig: {
14 |     logo: '/vue-mention.svg',
15 |     repo: 'Akryum/vue-mention',
16 |     docsDir: 'packages/docs',
17 |     locales: {
18 |       '/': {
19 |         lang: 'en-US',
20 |         title: 'vue-mention',
21 |         description: 'Mention for Vue.js',
22 |       },
23 |     },
24 |     editLinks: true,
25 |     lastUpdated: true,
26 |     smoothScroll: true,
27 |     sidebarDepth: 3,
28 |     locales: {
29 |       '/': {
30 |         label: 'English',
31 |         selectText: 'Languages',
32 |         lastUpdated: 'Last Updated',
33 |         editLinkText: 'Edit this page on GitHub',
34 |         nav: [
35 |           { text: 'Home', link: '/' },
36 |           { text: 'Guide', link: '/guide/' },
37 |         ],
38 |         sidebar: {
39 |           '/guide/': [
40 |             {
41 |               title: 'Guide',
42 |               collapsable: false,
43 |               children: [
44 |                 '/guide/',
45 |                 '/guide/async-items',
46 |               ],
47 |             },
48 |           ],
49 |         },
50 |       },
51 |     },
52 |   },
53 | }
54 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/specs/content-editable.js:
--------------------------------------------------------------------------------
 1 | describe('contenteditable support', () => {
 2 |   it('shows suggestions', () => {
 3 |     cy.visit('/content-editable')
 4 |     cy.get('.input').type('abc')
 5 |     cy.get('.v-popper__popper').should('not.exist')
 6 |     cy.get('.input').type(' @')
 7 |     cy.get('.v-popper__popper').should('be.visible')
 8 |       .should('contain', 'akryum')
 9 |       .should('contain', 'posva')
10 |       .should('contain', 'atinux')
11 |   })
12 | 
13 |   it('hides menu on space character', () => {
14 |     cy.visit('/content-editable')
15 |     cy.get('.input').type(' @')
16 |     cy.get('.v-popper__popper').should('be.visible')
17 |     cy.get('.input').type(' ')
18 |     cy.get('.v-popper__popper').should('not.be.visible')
19 |   })
20 | 
21 |   it('inserts suggestion on enter', () => {
22 |     cy.visit('/content-editable')
23 |     cy.get('.input').type(' @')
24 |     cy.get('.v-popper__popper').should('be.visible')
25 |     cy.get('.input').type('{enter}')
26 |     cy.get('.preview').should('contain', '@akryum')
27 |   })
28 | 
29 |   it('searches through suggestions', () => {
30 |     cy.visit('/content-editable')
31 |     cy.get('.input').type(' @pos')
32 |     cy.get('.v-popper__popper').should('be.visible')
33 |     cy.get('.mention-item').should('have.length', 1)
34 |       .should('contain', 'posva')
35 |     cy.get('.input').type('{enter}')
36 |     cy.get('.preview').should('contain', '@posva')
37 |   })
38 | 
39 |   it('does not insert a space after mention', () => {
40 |     cy.visit('/content-editable')
41 |     cy.get('.input').type(' @{enter}abc')
42 |     cy.get('.preview').should('contain', '@akryumabc')
43 |   })
44 | })
45 | 


--------------------------------------------------------------------------------
/.github/workflows/changelog.yml:
--------------------------------------------------------------------------------
 1 | # This is a basic workflow to help you get started with Actions
 2 | 
 3 | name: Release Changelog
 4 | 
 5 | # Controls when the action will run. 
 6 | on:
 7 |   # Triggers the workflow on push or pull request events but only for the master branch
 8 |   push:
 9 |     branches: [ master ]
10 |   pull_request:
11 |     branches: [ master ]
12 | 
13 |   # Allows you to run this workflow manually from the Actions tab
14 |   workflow_dispatch:
15 | 
16 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel
17 | jobs:
18 |   # This workflow contains a single job called "build"
19 |   changelog:
20 |     # The type of runner that the job will run on
21 |     runs-on: ubuntu-latest
22 | 
23 |     # Steps represent a sequence of tasks that will be executed as part of the job
24 |     steps:
25 |       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
26 |       - uses: actions/checkout@v2
27 | 
28 |       - name: Conventional Changelog Action
29 |         id: changelog
30 |         uses: TriPSs/conventional-changelog-action@v3
31 |         with:
32 |           github-token: ${{ secrets.github_token }}
33 |           output-file: "false"
34 |           skip-commit: "true"
35 |           version-file: "./packages/vue-mention/package.json"
36 | 
37 |       - name: Create Release
38 |         uses: actions/create-release@v1
39 |         if: ${{ steps.changelog.outputs.skipped == 'false' }}
40 |         env:
41 |           GITHUB_TOKEN: ${{ secrets.github_token }}
42 |         with:
43 |           tag_name: ${{ steps.changelog.outputs.tag }}
44 |           release_name: ${{ steps.changelog.outputs.tag }}
45 |           body: ${{ steps.changelog.outputs.clean_changelog }}
46 | 


--------------------------------------------------------------------------------
/packages/docs/src/.vuepress/components/GettingStartedDemo.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { Mentionable } from 'vue-mention'
 3 | 
 4 | export default {
 5 |   components: {
 6 |     Mentionable,
 7 |   },
 8 | 
 9 |   data () {
10 |     return {
11 |       text: '',
12 |       items: [
13 |         {
14 |           value: 'cat',
15 |           label: 'Mr Cat',
16 |         },
17 |         {
18 |           value: 'dog',
19 |           label: 'Mr Dog',
20 |         },
21 |       ],
22 |     }
23 |   },
24 | }
25 | </script>
26 | 
27 | <template>
28 |   <div
29 |     class="demo"
30 |   >
31 |     <Mentionable
32 |       :keys="['@']"
33 |       :items="items"
34 |       offset="6"
35 |     >
36 |       <textarea
37 |         v-model="text"
38 |         rows="6"
39 |         class="input"
40 |         placeholder="Enter text and then type @ to trigger the mention"
41 |       />
42 | 
43 |       <template #item="{ item }">
44 |         <div class="item">
45 |           {{ item.label }}
46 |         </div>
47 |       </template>
48 |     </Mentionable>
49 | 
50 |     <div class="preview">{{ text }}</div>
51 |   </div>
52 | </template>
53 | 
54 | <style scoped>
55 | .demo {
56 |   margin: 24px 0;
57 | }
58 | 
59 | .input {
60 |   width: 100%;
61 |   border: #ccc 1px solid;
62 |   border-radius: 6px;
63 |   resize: vertical;
64 |   min-height: 42px;
65 |   padding: 12px;
66 |   box-sizing: border-box;
67 |   line-height: 1.2em;
68 |   font-size: inherit;
69 | }
70 | 
71 | .item {
72 |   padding: 4px 10px;
73 |   border-radius: 4px;
74 | }
75 | 
76 | .mention-selected .item {
77 |   background: rgb(192, 250, 153);
78 | }
79 | 
80 | .preview {
81 |   font-family: monospace;
82 |   white-space: pre-wrap;
83 |   margin-top: 12px;
84 |   padding: 12px;
85 |   background: #f8f8f8;
86 |   border-radius: 6px;
87 | }
88 | </style>
89 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 


--------------------------------------------------------------------------------
/packages/docs/src/guide/README.md:
--------------------------------------------------------------------------------
  1 | # Getting Started
  2 | 
  3 | <p align="center">
  4 |   <a href="https://guillaume-chau.info/sponsors/" target="_blank">
  5 |     <img src='https://akryum.netlify.app/sponsors.svg'/>
  6 |   </a>
  7 | </p>
  8 | 
  9 | ## Installation
 10 | 
 11 | vue-mention requires [v-tooltip](https://github.com/Akryum/v-tooltip).
 12 | 
 13 | Install the `vue-mention` package:
 14 | 
 15 | ```sh
 16 | npm i vue-mention
 17 | ```
 18 | 
 19 | Or
 20 | 
 21 | ```sh
 22 | yarn add vue-mention
 23 | ```
 24 | 
 25 | ## Quick start
 26 | 
 27 | Import the `Mentionable` component from `vue-mention`:
 28 | 
 29 | ```vue{2,6}
 30 | <script>
 31 | import { Mentionable } from 'vue-mention'
 32 | 
 33 | export default {
 34 |   components: {
 35 |     Mentionable,
 36 |   },
 37 | 
 38 |   data () {
 39 |     return {
 40 |       text: '',
 41 |     }
 42 |   },
 43 | }
 44 | </script>
 45 | ```
 46 | 
 47 | Add some items for the suggestions:
 48 | 
 49 | ```vue{12-21}
 50 | <script>
 51 | import { Mentionable } from 'vue-mention'
 52 | 
 53 | export default {
 54 |   components: {
 55 |     Mentionable,
 56 |   },
 57 | 
 58 |   data () {
 59 |     return {
 60 |       text: '',
 61 |       items: [
 62 |         {
 63 |           value: 'cat',
 64 |           label: 'Mr Cat',
 65 |         },
 66 |         {
 67 |           value: 'dog',
 68 |           label: 'Mr Dog',
 69 |         },
 70 |       ],
 71 |     }
 72 |   },
 73 | }
 74 | </script>
 75 | ```
 76 | 
 77 | The `value` properties will be used as the text replacement.
 78 | 
 79 | Wrap your `<textarea>` element with the `Mentionable` component:
 80 | 
 81 | ```vue
 82 | <template>
 83 |   <Mentionable
 84 |     :keys="['@']"
 85 |     :items="items"
 86 |     offset="6"
 87 |   >
 88 |     <textarea v-model="text"/>
 89 |   </Mentionable>
 90 | </template>
 91 | ```
 92 | 
 93 | The `keys` prop defines which characters will trigger the mention.
 94 | 
 95 | Add some styling for the mention items:
 96 | 
 97 | ```vue
 98 | <style>
 99 | .mention-item {
100 |   padding: 4px 10px;
101 |   border-radius: 4px;
102 | }
103 | 
104 | .mention-selected {
105 |   background: rgb(192, 250, 153);
106 | }
107 | </style>
108 | ```
109 | 
110 | That's it!
111 | 
112 | Here is the result:
113 | 
114 | <GettingStartedDemo />
115 | 


--------------------------------------------------------------------------------
/packages/vue-mention/README.md:
--------------------------------------------------------------------------------
  1 | <img src="../docs/src/.vuepress/public/vue-mention.svg" alt="logo" width="128">
  2 | 
  3 | # vue-mention
  4 | 
  5 | Mention popper for input and textarea
  6 | 
  7 | [Documentation](https://vue-mention.netlify.app/)
  8 | 
  9 | <p align="center">
 10 |   <a href="https://guillaume-chau.info/sponsors/" target="_blank">
 11 |     <img src='https://akryum.netlify.app/sponsors.svg'/>
 12 |   </a>
 13 | </p>
 14 | 
 15 | ## Quick start
 16 | 
 17 | ```vue
 18 | <script>
 19 | import { Mentionable } from 'vue-mention'
 20 | 
 21 | const users = [
 22 |   {
 23 |     value: 'akryum',
 24 |     firstName: 'Guillaume',
 25 |   },
 26 |   {
 27 |     value: 'posva',
 28 |     firstName: 'Eduardo',
 29 |   },
 30 |   {
 31 |     value: 'atinux',
 32 |     firstName: 'Sébastien',
 33 |   },
 34 | ]
 35 | 
 36 | const issues = [
 37 |   {
 38 |     value: 123,
 39 |     label: 'Error with foo bar',
 40 |     searchText: 'foo bar'
 41 |   },
 42 |   {
 43 |     value: 42,
 44 |     label: 'Cannot read line',
 45 |     searchText: 'foo bar line'
 46 |   },
 47 |   {
 48 |     value: 77,
 49 |     label: 'I have a feature suggestion',
 50 |     searchText: 'feature'
 51 |   }
 52 | ]
 53 | 
 54 | export default {
 55 |   components: {
 56 |     Mentionable,
 57 |   },
 58 | 
 59 |   data () {
 60 |     return {
 61 |       text: '',
 62 |       items: [],
 63 |     }
 64 |   },
 65 | 
 66 |   methods: {
 67 |     onOpen (key) {
 68 |       this.items = key === '@' ? users : issues
 69 |     },
 70 |   },
 71 | }
 72 | </script>
 73 | 
 74 | <template>
 75 |   <Mentionable
 76 |     :keys="['@', '#']"
 77 |     :items="items"
 78 |     offset="6"
 79 |     insert-space
 80 |     @open="onOpen"
 81 |   >
 82 |     <textarea
 83 |       v-model="text"
 84 |     />
 85 | 
 86 |     <template #no-result>
 87 |       <div class="dim">
 88 |         No result
 89 |       </div>
 90 |     </template>
 91 | 
 92 |     <template #item-@="{ item }">
 93 |       <div class="user">
 94 |         {{ item.value }}
 95 |         <span class="dim">
 96 |           ({{ item.firstName }})
 97 |         </span>
 98 |       </div>
 99 |     </template>
100 | 
101 |     <template #item-#="{ item }">
102 |       <div class="issue">
103 |         <span class="number">
104 |           #{{ item.value }}
105 |         </span>
106 |         <span class="dim">
107 |           {{ item.label }}
108 |         </span>
109 |       </div>
110 |     </template>
111 |   </Mentionable>
112 | </template>
113 | ```
114 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | # This is a basic workflow to help you get started with Actions
 2 | 
 3 | name: CI
 4 | 
 5 | # Controls when the action will run. Triggers the workflow on push or pull request
 6 | # events but only for the master branch
 7 | on:
 8 |   push:
 9 |     branches: [ master ]
10 |   pull_request:
11 |     branches: [ master ]
12 | 
13 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel
14 | jobs:
15 |   # This workflow contains a single job called "build"
16 |   build:
17 |     # The type of runner that the job will run on
18 |     runs-on: ubuntu-latest
19 | 
20 |     # Steps represent a sequence of tasks that will be executed as part of the job
21 |     steps:
22 |     # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
23 |     - uses: actions/checkout@v2
24 |     
25 |     - name: Get yarn cache directory path
26 |       id: yarn-cache-dir-path
27 |       run: echo "::set-output name=dir::$(yarn cache dir)"
28 |     
29 |     - name: Yarn cache
30 |       uses: actions/cache@v1
31 |       id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
32 |       with:
33 |         path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
34 |         key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
35 |         restore-keys: |
36 |           ${{ runner.os }}-yarn-
37 |     
38 |     - name: Dependencies cache
39 |       uses: actions/cache@v2
40 |       with:
41 |         path: |
42 |           node_modules
43 |           **/node_modules
44 |         key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
45 |     
46 |     - name: Cypress cache
47 |       uses: actions/cache@v1
48 |       with:
49 |         path: /home/runner/.cache/Cypress
50 |         key: ${{ runner.os }}-Cypress-v1
51 |     
52 |     - name: Install
53 |       run: yarn --frozen-lockfile
54 | 
55 |     # Runs a single command using the runners shell
56 |     - name: Lint
57 |       run: |
58 |         cd packages/vue-mention
59 |         yarn run lint
60 |     
61 |     - name: Build vue-mention
62 |       run: |
63 |         cd packages/vue-mention
64 |         yarn run build
65 | 
66 |     # Runs a set of commands using the runners shell
67 |     - name: E2E tests
68 |       run: |
69 |         cd packages/test-e2e
70 |         yarn run test:e2e:run
71 | 
72 |     - uses: actions/upload-artifact@v1
73 |       with:
74 |         name: Cypress Videos
75 |         path: packages/test-e2e/tests/e2e/videos
76 | 


--------------------------------------------------------------------------------
/packages/test-e2e/src/views/MultipleCollections.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | const users = [
  3 |   {
  4 |     value: 'akryum',
  5 |     firstName: 'Guillaume',
  6 |   },
  7 |   {
  8 |     value: 'posva',
  9 |     firstName: 'Eduardo',
 10 |   },
 11 |   {
 12 |     value: 'atinux',
 13 |     firstName: 'Sébastien',
 14 |   },
 15 | ]
 16 | 
 17 | const issues = [
 18 |   {
 19 |     value: 123,
 20 |     label: 'Error with foo bar',
 21 |     searchText: 'foo bar',
 22 |   },
 23 |   {
 24 |     value: 42,
 25 |     label: 'Cannot read line',
 26 |     searchText: 'foo bar line',
 27 |   },
 28 |   {
 29 |     value: 77,
 30 |     label: 'I have a feature suggestion',
 31 |     searchText: 'feature',
 32 |   },
 33 | ]
 34 | 
 35 | export default {
 36 |   data () {
 37 |     return {
 38 |       text: '',
 39 |       items: [],
 40 |     }
 41 |   },
 42 | 
 43 |   methods: {
 44 |     onOpen (key) {
 45 |       this.items = key === '@' ? users : issues
 46 |     },
 47 |   },
 48 | }
 49 | </script>
 50 | 
 51 | <template>
 52 |   <div
 53 |     class="demo"
 54 |   >
 55 |     <Mentionable
 56 |       :keys="['@', '#']"
 57 |       :items="items"
 58 |       @open="onOpen"
 59 |     >
 60 |       <textarea
 61 |         v-model="text"
 62 |         rows="6"
 63 |         class="input"
 64 |       />
 65 | 
 66 |       <template #no-result>
 67 |         <div class="dim custom-no-result">
 68 |           No result
 69 |         </div>
 70 |       </template>
 71 | 
 72 |       <template #item-@="{ item }">
 73 |         <div class="user">
 74 |           {{ item.value }}
 75 |           <span class="dim">
 76 |             ({{ item.firstName }})
 77 |           </span>
 78 |         </div>
 79 |       </template>
 80 | 
 81 |       <template #item-#="{ item }">
 82 |         <div class="issue">
 83 |           <span class="number">
 84 |             #{{ item.value }}
 85 |           </span>
 86 |           <span class="dim">
 87 |             {{ item.label }}
 88 |           </span>
 89 |         </div>
 90 |       </template>
 91 |     </Mentionable>
 92 | 
 93 |     <div class="preview">{{ text }}</div>
 94 |   </div>
 95 | </template>
 96 | 
 97 | <style scoped>
 98 | .user,
 99 | .issue {
100 |   padding: 4px 6px;
101 |   border-radius: 4px;
102 |   cursor: pointer;
103 | }
104 | 
105 | .mention-selected .user {
106 |   background: rgb(192, 250, 153);
107 | }
108 | 
109 | .mention-selected .issue {
110 |   background: rgb(139, 212, 255);
111 | }
112 | 
113 | .issue .number {
114 |   font-family: monospace;
115 | }
116 | 
117 | .dim {
118 |   color: #666;
119 | }
120 | </style>
121 | 


--------------------------------------------------------------------------------
/packages/vue-mention/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-mention",
 3 |   "description": "Mention popper for input and textarea",
 4 |   "version": "2.0.0-alpha.3",
 5 |   "author": {
 6 |     "name": "Guillaume Chau",
 7 |     "email": "guillaume.b.chau@gmail.com"
 8 |   },
 9 |   "keywords": [
10 |     "vue",
11 |     "vuejs",
12 |     "plugin",
13 |     "mention",
14 |     "popper"
15 |   ],
16 |   "license": "MIT",
17 |   "main": "dist/vue-mention.umd.js",
18 |   "module": "dist/vue-mention.es.js",
19 |   "types": "dist/index.d.ts",
20 |   "exports": {
21 |     ".": {
22 |       "import": "./dist/vue-mention.es.js",
23 |       "require": "./dist/vue-mention.umd.js"
24 |     }
25 |   },
26 |   "scripts": {
27 |     "dev": "cross-env NODE_ENV=development vite build --watch",
28 |     "build": "cross-env NODE_ENV=production vite build && tsc -d --emitDeclarationOnly && vue-typegen gen -s src -o dist",
29 |     "prepublishOnly": "npm run lint && npm run build && npm run test",
30 |     "lint": "eslint --ext .ts,.js,.vue src",
31 |     "test": "cd ../test-e2e && yarn run test:e2e:run"
32 |   },
33 |   "repository": {
34 |     "type": "git",
35 |     "url": "git+https://github.com/Akryum/vue-mention.git",
36 |     "directory": "packages/vue-mention"
37 |   },
38 |   "bugs": {
39 |     "url": "https://github.com/Akryum/vue-mention/issues"
40 |   },
41 |   "homepage": "https://github.com/Akryum/vue-mention#readme",
42 |   "publishConfig": {
43 |     "access": "public"
44 |   },
45 |   "dependencies": {
46 |     "textarea-caret": "^3.1.0"
47 |   },
48 |   "peerDependencies": {
49 |     "floating-vue": "^2.0.0-beta.1",
50 |     "vue": "^3.2"
51 |   },
52 |   "devDependencies": {
53 |     "@babel/core": "^7.9.0",
54 |     "@babel/preset-env": "^7.9.0",
55 |     "@typescript-eslint/eslint-plugin": "^5.6.0",
56 |     "@typescript-eslint/parser": "^5.6.0",
57 |     "@vitejs/plugin-vue": "^2.0.1",
58 |     "@vue/eslint-config-standard": "^5.0.0",
59 |     "@vue/eslint-config-typescript": "^5.0.2",
60 |     "autoprefixer": "^9.7.5",
61 |     "clean-css": "^4.1.8",
62 |     "cross-env": "^7.0.2",
63 |     "eslint": "^7.24.0",
64 |     "eslint-config-standard": "^16.0.2",
65 |     "eslint-plugin-html": "^6.0.0",
66 |     "eslint-plugin-import": "^2.7.0",
67 |     "eslint-plugin-node": "^11.0.0",
68 |     "eslint-plugin-promise": "^5.1.0",
69 |     "eslint-plugin-standard": "^5.0.0",
70 |     "eslint-plugin-vue": "^8.2.0",
71 |     "typescript": "^4.5.4",
72 |     "vite": "^2.7.10",
73 |     "vue": "^3.2.26",
74 |     "vue-typegen": "^0.1.1",
75 |     "floating-vue": "^2.0.0-beta.1"
76 |   },
77 |   "browserslist": [
78 |     "> 1%",
79 |     "last 2 versions",
80 |     "not ie > 0",
81 |     "not ie_mob > 0"
82 |   ],
83 |   "files": [
84 |     "dist"
85 |   ]
86 | }
87 | 


--------------------------------------------------------------------------------
/packages/docs/src/.vuepress/styles/index.styl:
--------------------------------------------------------------------------------
  1 | .tooltip {
  2 |   display: block !important;
  3 |   z-index: 10000;
  4 | }
  5 | 
  6 | .tooltip .tooltip-inner {
  7 |   background: black;
  8 |   color: white;
  9 |   border-radius: 16px;
 10 |   padding: 5px 10px 4px;
 11 | }
 12 | 
 13 | .tooltip .tooltip-arrow {
 14 |   width: 0;
 15 |   height: 0;
 16 |   border-style: solid;
 17 |   position: absolute;
 18 |   margin: 5px;
 19 |   border-color: black;
 20 |   z-index: 1;
 21 | }
 22 | 
 23 | .tooltip[x-placement^="top"] {
 24 |   margin-bottom: 5px;
 25 | }
 26 | 
 27 | .tooltip[x-placement^="top"] .tooltip-arrow {
 28 |   border-width: 5px 5px 0 5px;
 29 |   border-left-color: transparent !important;
 30 |   border-right-color: transparent !important;
 31 |   border-bottom-color: transparent !important;
 32 |   bottom: -5px;
 33 |   left: calc(50% - 5px);
 34 |   margin-top: 0;
 35 |   margin-bottom: 0;
 36 | }
 37 | 
 38 | .tooltip[x-placement^="bottom"] {
 39 |   margin-top: 5px;
 40 | }
 41 | 
 42 | .tooltip[x-placement^="bottom"] .tooltip-arrow {
 43 |   border-width: 0 5px 5px 5px;
 44 |   border-left-color: transparent !important;
 45 |   border-right-color: transparent !important;
 46 |   border-top-color: transparent !important;
 47 |   top: -5px;
 48 |   left: calc(50% - 5px);
 49 |   margin-top: 0;
 50 |   margin-bottom: 0;
 51 | }
 52 | 
 53 | .tooltip[x-placement^="right"] {
 54 |   margin-left: 5px;
 55 | }
 56 | 
 57 | .tooltip[x-placement^="right"] .tooltip-arrow {
 58 |   border-width: 5px 5px 5px 0;
 59 |   border-left-color: transparent !important;
 60 |   border-top-color: transparent !important;
 61 |   border-bottom-color: transparent !important;
 62 |   left: -5px;
 63 |   top: calc(50% - 5px);
 64 |   margin-left: 0;
 65 |   margin-right: 0;
 66 | }
 67 | 
 68 | .tooltip[x-placement^="left"] {
 69 |   margin-right: 5px;
 70 | }
 71 | 
 72 | .tooltip[x-placement^="left"] .tooltip-arrow {
 73 |   border-width: 5px 0 5px 5px;
 74 |   border-top-color: transparent !important;
 75 |   border-right-color: transparent !important;
 76 |   border-bottom-color: transparent !important;
 77 |   right: -5px;
 78 |   top: calc(50% - 5px);
 79 |   margin-left: 0;
 80 |   margin-right: 0;
 81 | }
 82 | 
 83 | .tooltip.popover .popover-inner {
 84 |   background: #f9f9f9;
 85 |   color: black;
 86 |   padding: 12px;
 87 |   border-radius: 5px;
 88 |   box-shadow: 0 5px 12px rgba(0, 0, 0, .1);
 89 | }
 90 | 
 91 | .tooltip.popover .popover-arrow {
 92 |   border-color: #f9f9f9;
 93 | }
 94 | 
 95 | .tooltip[aria-hidden='true'] {
 96 |   visibility: hidden;
 97 |   opacity: 0;
 98 |   transition: opacity .15s, visibility .15s;
 99 | }
100 | 
101 | .tooltip[aria-hidden='false'] {
102 |   visibility: visible;
103 |   opacity: 1;
104 |   transition: opacity .15s;
105 | }
106 | 


--------------------------------------------------------------------------------
/packages/docs/src/README.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | home: true
  3 | heroImage: /vue-mention.svg
  4 | heroText: vue-mention
  5 | tagline: Easy mentions for Vue.js
  6 | actionText: Get Started →
  7 | actionLink: /guide/
  8 | features:
  9 | - title: Simple & Minimalist
 10 |   details: Easy to get started, minimal weight
 11 | - title: Flexible
 12 |   details: Flexible enough for your use case
 13 | - title: Vue-Powered
 14 |   details: Use the full power of Vue with props, events and slots
 15 | footer: MIT Licensed | Copyright © 2020-present Guillaume Chau
 16 | ---
 17 | 
 18 | 
 19 | ## Demo
 20 | 
 21 | <Demo />
 22 | 
 23 | ```vue
 24 | <script>
 25 | import { Mentionable } from 'vue-mention'
 26 | 
 27 | const users = [
 28 |   {
 29 |     value: 'akryum',
 30 |     firstName: 'Guillaume',
 31 |   },
 32 |   {
 33 |     value: 'posva',
 34 |     firstName: 'Eduardo',
 35 |   },
 36 |   {
 37 |     value: 'atinux',
 38 |     firstName: 'Sébastien',
 39 |   },
 40 | ]
 41 | 
 42 | const issues = [
 43 |   {
 44 |     value: 123,
 45 |     label: 'Error with foo bar',
 46 |     searchText: 'foo bar'
 47 |   },
 48 |   {
 49 |     value: 42,
 50 |     label: 'Cannot read line',
 51 |     searchText: 'foo bar line'
 52 |   },
 53 |   {
 54 |     value: 77,
 55 |     label: 'I have a feature suggestion',
 56 |     searchText: 'feature'
 57 |   }
 58 | ]
 59 | 
 60 | export default {
 61 |   components: {
 62 |     Mentionable,
 63 |   },
 64 | 
 65 |   data () {
 66 |     return {
 67 |       text: '',
 68 |       items: [],
 69 |     }
 70 |   },
 71 | 
 72 |   methods: {
 73 |     onOpen (key) {
 74 |       this.items = key === '@' ? users : issues
 75 |     },
 76 | 
 77 |     onApply (item, key, replacedWith) {
 78 |       console.log(item, `has been replaced with ${replacedWith}`)
 79 |     }
 80 |   },
 81 | }
 82 | </script>
 83 | 
 84 | <template>
 85 |   <Mentionable
 86 |     :keys="['@', '#']"
 87 |     :items="items"
 88 |     offset="6"
 89 |     insert-space
 90 |     @open="onOpen"
 91 |     @apply="onApply"
 92 |   >
 93 |     <textarea
 94 |       v-model="text"
 95 |     />
 96 | 
 97 |     <template #no-result>
 98 |       <div class="dim">
 99 |         No result
100 |       </div>
101 |     </template>
102 | 
103 |     <template #item-@="{ item }">
104 |       <div class="user">
105 |         {{ item.value }}
106 |         <span class="dim">
107 |           ({{ item.firstName }})
108 |         </span>
109 |       </div>
110 |     </template>
111 | 
112 |     <template #item-#="{ item }">
113 |       <div class="issue">
114 |         <span class="number">
115 |           #{{ item.value }}
116 |         </span>
117 |         <span class="dim">
118 |           {{ item.label }}
119 |         </span>
120 |       </div>
121 |     </template>
122 |   </Mentionable>
123 | </template>
124 | ```
125 | 
126 | ## Sponsors
127 | 
128 | <p align="center">
129 |   <a href="https://guillaume-chau.info/sponsors/" target="_blank">
130 |     <img src='https://akryum.netlify.app/sponsors.svg'/>
131 |   </a>
132 | </p>
133 | 


--------------------------------------------------------------------------------
/packages/docs/src/.vuepress/components/AsyncItemsDemo.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import { Mentionable } from 'vue-mention'
  3 | 
  4 | const issues = [
  5 |   {
  6 |     value: 123,
  7 |     label: 'Error with foo bar'
  8 |   },
  9 |   {
 10 |     value: 42,
 11 |     label: 'Cannot read line'
 12 |   },
 13 |   {
 14 |     value: 77,
 15 |     label: 'I have a feature suggestion'
 16 |   }
 17 | ]
 18 | 
 19 | function fetchIssues (searchText = null) {
 20 |   return new Promise(resolve => {
 21 |     setTimeout(() => {
 22 |       if (!searchText) {
 23 |         resolve(issues)
 24 |       } else {
 25 |         const reg = new RegExp(searchText, 'i')
 26 |         resolve(issues.filter(issue => reg.test(issue.label)))
 27 |       }
 28 |     }, 1000)
 29 |   })
 30 | }
 31 | 
 32 | export default {
 33 |   components: {
 34 |     Mentionable,
 35 |   },
 36 | 
 37 |   data () {
 38 |     return {
 39 |       text: '',
 40 |       items: [],
 41 |       loading: false,
 42 |     }
 43 |   },
 44 | 
 45 |   methods: {
 46 |     async loadIssues (searchText = null) {
 47 |       this.loading = true
 48 |       this.items = await fetchIssues(searchText)
 49 |       this.loading = false
 50 |     }
 51 |   },
 52 | }
 53 | </script>
 54 | 
 55 | <template>
 56 |   <div
 57 |     class="demo"
 58 |   >
 59 |     <Mentionable
 60 |       :keys="['#']"
 61 |       :items="items"
 62 |       offset="6"
 63 |       filtering-disabled
 64 |       @open="loadIssues()"
 65 |       @search="loadIssues($event)"
 66 |     >
 67 |       <textarea
 68 |         v-model="text"
 69 |         rows="6"
 70 |         class="input"
 71 |         placeholder="Enter text and then type # to trigger the mention"
 72 |       />
 73 | 
 74 |       <template #no-result>
 75 |         <div class="dim">
 76 |           {{ loading ? 'Loading...' : 'No result' }}
 77 |         </div>
 78 |       </template>
 79 | 
 80 |       <template #item-#="{ item }">
 81 |         <div class="issue">
 82 |           <span class="number">
 83 |             #{{ item.value }}
 84 |           </span>
 85 |           <span class="dim">
 86 |             {{ item.label }}
 87 |           </span>
 88 |         </div>
 89 |       </template>
 90 |     </Mentionable>
 91 | 
 92 |     <div class="preview">{{ text }}</div>
 93 |   </div>
 94 | </template>
 95 | 
 96 | <style scoped>
 97 | .demo {
 98 |   margin: 24px 0;
 99 | }
100 | 
101 | .input {
102 |   width: 100%;
103 |   border: #ccc 1px solid;
104 |   border-radius: 6px;
105 |   resize: vertical;
106 |   min-height: 42px;
107 |   padding: 12px;
108 |   box-sizing: border-box;
109 |   line-height: 1.2em;
110 |   font-size: inherit;
111 | }
112 | 
113 | .issue {
114 |   padding: 4px 6px;
115 |   border-radius: 4px;
116 |   cursor: pointer;
117 | }
118 | 
119 | .mention-selected .issue {
120 |   background: rgb(139, 212, 255);
121 | }
122 | 
123 | .issue .number {
124 |   font-family: monospace;
125 | }
126 | 
127 | .dim {
128 |   color: #666;
129 | }
130 | 
131 | .preview {
132 |   font-family: monospace;
133 |   white-space: pre-wrap;
134 |   margin-top: 12px;
135 |   padding: 12px;
136 |   background: #f8f8f8;
137 |   border-radius: 6px;
138 | }
139 | </style>
140 | 


--------------------------------------------------------------------------------
/packages/docs/src/.vuepress/components/Demo.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import { Mentionable } from 'vue-mention'
  3 | 
  4 | const users = [
  5 |   {
  6 |     value: 'akryum',
  7 |     firstName: 'Guillaume',
  8 |   },
  9 |   {
 10 |     value: 'posva',
 11 |     firstName: 'Eduardo',
 12 |   },
 13 |   {
 14 |     value: 'atinux',
 15 |     firstName: 'Sébastien',
 16 |   },
 17 | ]
 18 | 
 19 | const issues = [
 20 |   {
 21 |     value: 123,
 22 |     label: 'Error with foo bar',
 23 |     searchText: 'foo bar'
 24 |   },
 25 |   {
 26 |     value: 42,
 27 |     label: 'Cannot read line',
 28 |     searchText: 'foo bar line'
 29 |   },
 30 |   {
 31 |     value: 77,
 32 |     label: 'I have a feature suggestion',
 33 |     searchText: 'feature'
 34 |   }
 35 | ]
 36 | 
 37 | export default {
 38 |   components: {
 39 |     Mentionable,
 40 |   },
 41 | 
 42 |   data () {
 43 |     return {
 44 |       text: '',
 45 |       items: [],
 46 |     }
 47 |   },
 48 | 
 49 |   methods: {
 50 |     onOpen (key) {
 51 |       this.items = key === '@' ? users : issues
 52 |     },
 53 | 
 54 |     onEnter () {
 55 |       console.log('Enter pressed')
 56 |     },
 57 |   },
 58 | }
 59 | </script>
 60 | 
 61 | <template>
 62 |   <div
 63 |     class="demo"
 64 |     @keyup.enter="onEnter"
 65 |   >
 66 |     <Mentionable
 67 |       :keys="['@', '#']"
 68 |       :items="items"
 69 |       offset="6"
 70 |       insert-space
 71 |       @open="onOpen"
 72 |     >
 73 |       <textarea
 74 |         v-model="text"
 75 |         rows="6"
 76 |         class="input"
 77 |         placeholder="Enter text and then type @ or # to trigger the mention"
 78 |       />
 79 | 
 80 |       <template #no-result>
 81 |         <div class="dim">
 82 |           No result
 83 |         </div>
 84 |       </template>
 85 | 
 86 |       <template #item-@="{ item }">
 87 |         <div class="user">
 88 |           {{ item.value }}
 89 |           <span class="dim">
 90 |             ({{ item.firstName }})
 91 |           </span>
 92 |         </div>
 93 |       </template>
 94 | 
 95 |       <template #item-#="{ item }">
 96 |         <div class="issue">
 97 |           <span class="number">
 98 |             #{{ item.value }}
 99 |           </span>
100 |           <span class="dim">
101 |             {{ item.label }}
102 |           </span>
103 |         </div>
104 |       </template>
105 |     </Mentionable>
106 | 
107 |     <div class="preview">{{ text }}</div>
108 |   </div>
109 | </template>
110 | 
111 | <style scoped>
112 | .demo {
113 |   margin: 24px 0;
114 | }
115 | 
116 | .input {
117 |   width: 100%;
118 |   border: #ccc 1px solid;
119 |   border-radius: 6px;
120 |   resize: vertical;
121 |   min-height: 42px;
122 |   padding: 12px;
123 |   box-sizing: border-box;
124 |   line-height: 1.2em;
125 |   font-size: inherit;
126 | }
127 | 
128 | .user,
129 | .issue {
130 |   padding: 4px 6px;
131 |   border-radius: 4px;
132 |   cursor: pointer;
133 | }
134 | 
135 | .mention-selected .user {
136 |   background: rgb(192, 250, 153);
137 | }
138 | 
139 | .mention-selected .issue {
140 |   background: rgb(139, 212, 255);
141 | }
142 | 
143 | .issue .number {
144 |   font-family: monospace;
145 | }
146 | 
147 | .dim {
148 |   color: #666;
149 | }
150 | 
151 | .preview {
152 |   font-family: monospace;
153 |   white-space: pre-wrap;
154 |   margin-top: 12px;
155 |   padding: 12px;
156 |   background: #f8f8f8;
157 |   border-radius: 6px;
158 | }
159 | </style>
160 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <p align="center">
  2 |   <a href="https://vue-mention.netlify.app/" target="_blank">
  3 |     <img src="./packages/docs/src/.vuepress/public/vue-mention.svg" alt="logo" width="128">
  4 |   </a>
  5 | </p>
  6 | 
  7 | <p align="center">
  8 |   <a href="https://www.npmjs.com/package/vue-mention">
  9 |     <img src="https://img.shields.io/npm/v/vue-mention.svg" alt="Version">
 10 |   </a>
 11 |   <a href="https://www.npmjs.com/package/vue-mention">
 12 |     <img src="https://img.shields.io/npm/dm/vue-mention.svg" alt="Downloads">
 13 |   </a>
 14 | </p>
 15 | 
 16 | # vue-mention
 17 | 
 18 | Mention popper for input and textarea
 19 | 
 20 | [Documentation](https://vue-mention.netlify.app/)
 21 | 
 22 | ## Vue 3 support
 23 | 
 24 | Install the v2 for Vue 3 support:
 25 | 
 26 | ```
 27 | pnpm i vue-mention@next
 28 | ```
 29 | 
 30 | You also need to install `floating-vue`:
 31 | 
 32 | ```
 33 | pnpm i floating-vue
 34 | ```
 35 | 
 36 | And add the default `floating-vue` styles:
 37 | 
 38 | ```js
 39 | import 'floating-vue/dist/style.css'
 40 | ```
 41 | 
 42 | ## floating-vue 1 (Vue 2)
 43 | 
 44 | Install the special version for floating-vue v1 (for Vue 2) support:
 45 | 
 46 | ```
 47 | pnpm i vue-mention@1.0.0-floating-vue1
 48 | ```
 49 | 
 50 | **:warning: Use the exact version range `1.0.0-floating-vue1` otherwise you'll install `v1.1.0` which is for v-tooltip 2.**
 51 | 
 52 | You also need to install `floating-vue` v1:
 53 | 
 54 | ```
 55 | pnpm i floating-vue@vue2
 56 | ```
 57 | 
 58 | And add the default `floating-vue` styles:
 59 | 
 60 | ```js
 61 | import 'floating-vue/dist/style.css'
 62 | ```
 63 | 
 64 | ## Sponsors
 65 | 
 66 | <p align="center">
 67 |   <a href="https://guillaume-chau.info/sponsors/" target="_blank">
 68 |     <img src='https://akryum.netlify.app/sponsors.svg'/>
 69 |   </a>
 70 | </p>
 71 | 
 72 | ## Quick start
 73 | 
 74 | ```vue
 75 | <script>
 76 | import { Mentionable } from 'vue-mention'
 77 | 
 78 | const users = [
 79 |   {
 80 |     value: 'akryum',
 81 |     firstName: 'Guillaume',
 82 |   },
 83 |   {
 84 |     value: 'posva',
 85 |     firstName: 'Eduardo',
 86 |   },
 87 |   {
 88 |     value: 'atinux',
 89 |     firstName: 'Sébastien',
 90 |   },
 91 | ]
 92 | 
 93 | const issues = [
 94 |   {
 95 |     value: 123,
 96 |     label: 'Error with foo bar',
 97 |     searchText: 'foo bar'
 98 |   },
 99 |   {
100 |     value: 42,
101 |     label: 'Cannot read line',
102 |     searchText: 'foo bar line'
103 |   },
104 |   {
105 |     value: 77,
106 |     label: 'I have a feature suggestion',
107 |     searchText: 'feature'
108 |   }
109 | ]
110 | 
111 | export default {
112 |   components: {
113 |     Mentionable,
114 |   },
115 | 
116 |   data () {
117 |     return {
118 |       text: '',
119 |       items: [],
120 |     }
121 |   },
122 | 
123 |   methods: {
124 |     onOpen (key) {
125 |       this.items = key === '@' ? users : issues
126 |     },
127 |   },
128 | }
129 | </script>
130 | 
131 | <template>
132 |   <Mentionable
133 |     :keys="['@', '#']"
134 |     :items="items"
135 |     offset="6"
136 |     insert-space
137 |     @open="onOpen"
138 |   >
139 |     <textarea
140 |       v-model="text"
141 |     />
142 | 
143 |     <template #no-result>
144 |       <div class="dim">
145 |         No result
146 |       </div>
147 |     </template>
148 | 
149 |     <template #item-@="{ item }">
150 |       <div class="user">
151 |         {{ item.value }}
152 |         <span class="dim">
153 |           ({{ item.firstName }})
154 |         </span>
155 |       </div>
156 |     </template>
157 | 
158 |     <template #item-#="{ item }">
159 |       <div class="issue">
160 |         <span class="number">
161 |           #{{ item.value }}
162 |         </span>
163 |         <span class="dim">
164 |           {{ item.label }}
165 |         </span>
166 |       </div>
167 |     </template>
168 |   </Mentionable>
169 | </template>
170 | ```
171 | 


--------------------------------------------------------------------------------
/packages/docs/src/.vuepress/public/vue-mention.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg
 3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
 4 |    xmlns:cc="http://creativecommons.org/ns#"
 5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
 6 |    xmlns:svg="http://www.w3.org/2000/svg"
 7 |    xmlns="http://www.w3.org/2000/svg"
 8 |    id="svg5592"
 9 |    version="1.1"
10 |    viewBox="0 0 270.93333 270.93334"
11 |    height="1024"
12 |    width="1024">
13 |   <defs
14 |      id="defs5586" />
15 |   <metadata
16 |      id="metadata5589">
17 |     <rdf:RDF>
18 |       <cc:Work
19 |          rdf:about="">
20 |         <dc:format>image/svg+xml</dc:format>
21 |         <dc:type
22 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
23 |         <dc:title></dc:title>
24 |       </cc:Work>
25 |     </rdf:RDF>
26 |   </metadata>
27 |   <g
28 |      transform="translate(0,-26.066642)"
29 |      id="layer1">
30 |     <path
31 |        id="rect816"
32 |        d="M 22.754169,40.883308 H 248.17916 c 6.74265,0 12.17084,5.428192 12.17084,12.170834 V 181.11247 c 0,6.74264 -5.42819,12.17083 -12.17084,12.17083 l -129.64583,1e-5 -25.399996,27.51667 -25.4,-27.51667 -44.979165,-1e-5 c -6.742642,0 -12.170834,-5.42819 -12.170834,-12.17083 V 53.054142 c 0,-6.742642 5.428192,-12.170834 12.170834,-12.170834 z"
33 |        style="opacity:1;fill:none;fill-opacity:1;stroke:#41b883;stroke-width:4.23333359;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
34 |     <rect
35 |        style="opacity:1;fill:#41b883;fill-opacity:1;stroke:none;stroke-width:4.23333406;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
36 |        id="rect818"
37 |        width="228.60001"
38 |        height="38.100002"
39 |        x="21.166668"
40 |        y="51.46664"
41 |        rx="8.4666672"
42 |        ry="8.4666672" />
43 |     <rect
44 |        ry="8.4666672"
45 |        rx="8.4666672"
46 |        y="98.03331"
47 |        x="21.166664"
48 |        height="38.100002"
49 |        width="228.60001"
50 |        id="rect824"
51 |        style="opacity:1;fill:#41b883;fill-opacity:0.41949152;stroke:none;stroke-width:4.23333406;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
52 |     <rect
53 |        style="opacity:1;fill:#41b883;fill-opacity:0.41949152;stroke:none;stroke-width:4.23333406;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
54 |        id="rect826"
55 |        width="228.60001"
56 |        height="38.100002"
57 |        x="21.166668"
58 |        y="144.59998"
59 |        rx="8.4666672"
60 |        ry="8.4666672" />
61 |     <path
62 |        id="path828"
63 |        d="M 10.61348,280.06664 H 129.10704"
64 |        style="fill:none;fill-rule:evenodd;stroke:#40b883;stroke-width:4.23333359;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.41960784" />
65 |     <path
66 |        style="fill:none;fill-rule:evenodd;stroke:#40b883;stroke-width:4.23333359;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.41960784"
67 |        d="M 9.7047739,237.73331 H 79.174709"
68 |        id="path830" />
69 |     <path
70 |        id="path832"
71 |        d="M 106.25845,237.7333 H 256.10992"
72 |        style="fill:none;fill-rule:evenodd;stroke:#40b883;stroke-width:4.23333359;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.41960784" />
73 |     <path
74 |        id="path834"
75 |        d="M 10.61348,258.89998 H 197.9987"
76 |        style="fill:none;fill-rule:evenodd;stroke:#40b883;stroke-width:4.23333359;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.41960784" />
77 |   </g>
78 | </svg>
79 | 


--------------------------------------------------------------------------------
/packages/test-e2e/tests/e2e/specs/defaults.js:
--------------------------------------------------------------------------------
  1 | describe('with default props', () => {
  2 |   it('shows suggestions', () => {
  3 |     cy.visit('/defaults')
  4 |     cy.get('.input').type('abc')
  5 |     cy.get('.v-popper__popper').should('not.exist')
  6 |     cy.get('.input').type(' @')
  7 |     cy.get('.v-popper__popper').should('be.visible')
  8 |       .should('contain', 'akryum')
  9 |       .should('contain', 'posva')
 10 |       .should('contain', 'atinux')
 11 |   })
 12 | 
 13 |   it('hides menu on blur', () => {
 14 |     cy.visit('/defaults')
 15 |     cy.get('.input').type('@')
 16 |     cy.get('.v-popper__popper').should('be.visible')
 17 |     cy.get('.preview').click()
 18 |     cy.get('.v-popper__popper').should('not.be.visible')
 19 |   })
 20 | 
 21 |   it('hides menu on space character', () => {
 22 |     cy.visit('/defaults')
 23 |     cy.get('.input').type('@')
 24 |     cy.get('.v-popper__popper').should('be.visible')
 25 |     cy.get('.input').type(' ')
 26 |     cy.get('.v-popper__popper').should('not.be.visible')
 27 |   })
 28 | 
 29 |   it('inserts suggestion on click', () => {
 30 |     cy.visit('/defaults')
 31 |     cy.get('.input').type('@')
 32 |     cy.get('.v-popper__popper').should('be.visible')
 33 |     cy.get('.mention-item').eq(0).click()
 34 |     cy.get('.preview').should('contain', '@akryum')
 35 |   })
 36 | 
 37 |   it('inserts suggestion on enter', () => {
 38 |     cy.visit('/defaults')
 39 |     cy.get('.input').type('@')
 40 |     cy.get('.v-popper__popper').should('be.visible')
 41 |     cy.get('.input').type('{enter}')
 42 |     cy.get('.preview').should('contain', '@akryum')
 43 |   })
 44 | 
 45 |   // https://github.com/cypress-io/cypress/issues/311
 46 |   // it('insert suggestion on tab', () => {
 47 |   //   cy.visit('/defaults')
 48 |   //   cy.get('.input').type('@')
 49 |   //   cy.get('.v-popper__popper').should('be.visible')
 50 |   //   cy.get('.input').tab()
 51 |   //   cy.get('.preview').should('contain', '@akryum')
 52 |   // })
 53 | 
 54 |   it('selects another suggestion with key down', () => {
 55 |     cy.visit('/defaults')
 56 |     cy.get('.input').type('@')
 57 |     cy.get('.v-popper__popper').should('be.visible')
 58 |     cy.get('.input').type('{downarrow}{downarrow}{enter}')
 59 |     cy.get('.preview').should('contain', '@atinux')
 60 |   })
 61 | 
 62 |   it('loops key down', () => {
 63 |     cy.visit('/defaults')
 64 |     cy.get('.input').type('@')
 65 |     cy.get('.v-popper__popper').should('be.visible')
 66 |     cy.get('.input').type('{downarrow}{downarrow}{downarrow}{enter}')
 67 |     cy.get('.preview').should('contain', '@akryum')
 68 |   })
 69 | 
 70 |   it('loops key up', () => {
 71 |     cy.visit('/defaults')
 72 |     cy.get('.input').type('@')
 73 |     cy.get('.v-popper__popper').should('be.visible')
 74 |     cy.get('.input').type('{uparrow}{enter}')
 75 |     cy.get('.preview').should('contain', '@atinux')
 76 |   })
 77 | 
 78 |   it('searches through suggestions', () => {
 79 |     cy.visit('/defaults')
 80 |     cy.get('.input').type('@pos')
 81 |     cy.get('.v-popper__popper').should('be.visible')
 82 |     cy.get('.mention-item').should('have.length', 1)
 83 |       .should('contain', 'posva')
 84 |     cy.get('.input').type('{enter}')
 85 |     cy.get('.preview').should('contain', '@posva')
 86 |   })
 87 | 
 88 |   it('searches with no result', () => {
 89 |     cy.visit('/defaults')
 90 |     cy.get('.input').type('@zzz')
 91 |     cy.get('.v-popper__popper').should('be.visible')
 92 |       .should('contain', 'No result')
 93 |   })
 94 | 
 95 |   it('does not insert a space after mention', () => {
 96 |     cy.visit('/defaults')
 97 |     cy.get('.input').type('@{enter}abc')
 98 |     cy.get('.preview').should('contain', '@akryumabc')
 99 |   })
100 | 
101 |   it('no error with special characters', () => {
102 |     cy.visit('/defaults')
103 |     cy.get('.input').type('@\\')
104 |     cy.get('.v-popper__popper').should('be.visible')
105 |       .should('contain', 'No result')
106 |   })
107 | 
108 |   it('show suggestion when previous input is space', () => {
109 |     cy.visit('/defaults')
110 |     cy.get('.input').type(' @zzz')
111 |     cy.get('.v-popper__popper').should('be.visible')
112 |     cy.get('.input').type('　@zzz')
113 |     cy.get('.v-popper__popper').should('be.visible')
114 |     cy.get('.input').type('\n@zzz')
115 |     cy.get('.v-popper__popper').should('be.visible')
116 |   })
117 | 
118 |   it('does not show suggestion when text is email address', () => {
119 |     cy.visit('/defaults')
120 |     cy.get('.input').type('aaa@zzz.com')
121 |     cy.get('.v-popper__popper').should('not.exist')
122 |   })
123 | })
124 | 


--------------------------------------------------------------------------------
/packages/docs/src/guide/async-items.md:
--------------------------------------------------------------------------------
  1 | # Async items
  2 | 
  3 | To load the items asynchronously, listen for the `open` event then fetch the suggestion items:
  4 | 
  5 | ```vue{11-13,22}
  6 | <script>
  7 | export default {
  8 |   data () {
  9 |     return {
 10 |       text: '',
 11 |       items: [],
 12 |     }
 13 |   },
 14 | 
 15 |   methods: {
 16 |     async loadIssues () {
 17 |       this.items = await fetchIssues()
 18 |     }
 19 |   },
 20 | }
 21 | </script>
 22 | 
 23 | <template>
 24 |   <Mentionable
 25 |     :keys="['#']"
 26 |     :items="items"
 27 |     @open="loadIssues()"
 28 |   >
 29 |     <textarea
 30 |       v-model="text"
 31 |     />
 32 |   </Mentionable>
 33 | </template>
 34 | ```
 35 | 
 36 | ## Loading state
 37 | 
 38 | Store your loading state in a data property:
 39 | 
 40 | ```js{6,12,14}
 41 | export default {
 42 |   data () {
 43 |     return {
 44 |       text: '',
 45 |       items: [],
 46 |       loading: false,
 47 |     }
 48 |   },
 49 | 
 50 |   methods: {
 51 |     async loadIssues () {
 52 |       this.loading = true
 53 |       this.items = await fetchIssues()
 54 |       this.loading = false
 55 |     }
 56 |   },
 57 | }
 58 | ```
 59 | 
 60 | Then display a different content for the loading state in the `no-result` slot:
 61 | 
 62 | ```vue{11-13}
 63 | <template>
 64 |   <Mentionable
 65 |     :keys="['#']"
 66 |     :items="items"
 67 |     @open="loadIssues()"
 68 |   >
 69 |     <textarea
 70 |       v-model="text"
 71 |     />
 72 | 
 73 |     <template #no-result>
 74 |       {{ loading ? 'Loading...' : 'No result' }}
 75 |     </template>
 76 |   </Mentionable>
 77 | </template>
 78 | ```
 79 | 
 80 | ## Handle search
 81 | 
 82 | Listen for the `search` event to fetch the issues again with an additional `searchText` parameter:
 83 | 
 84 | ```vue{12,14,26}
 85 | <script>
 86 | export default {
 87 |   data () {
 88 |     return {
 89 |       text: '',
 90 |       items: [],
 91 |       loading: false,
 92 |     }
 93 |   },
 94 | 
 95 |   methods: {
 96 |     async loadIssues (searchText = null) {
 97 |       this.loading = true
 98 |       this.items = await fetchIssues(searchText)
 99 |       this.loading = false
100 |     }
101 |   },
102 | }
103 | </script>
104 | 
105 | <template>
106 |   <Mentionable
107 |     :keys="['#']"
108 |     :items="items"
109 |     @open="loadIssues()"
110 |     @search="loadIssues($event)"
111 |   >
112 |     <textarea
113 |       v-model="text"
114 |     />
115 | 
116 |     <template #no-result>
117 |       {{ loading ? 'Loading...' : 'No result' }}
118 |     </template>
119 |   </Mentionable>
120 | </template>
121 | ```
122 | 
123 | The first payload of the `search` event is the text entered by the user after the key. In the code above we access it with `$event`.
124 | 
125 | `Mentionable` has a builtin filtering feature that we need to disable since the server will take care of it:
126 | 
127 | ```vue{5}
128 | <template>
129 |   <Mentionable
130 |     :keys="['#']"
131 |     :items="items"
132 |     filtering-disabled
133 |     @open="loadIssues()"
134 |     @search="loadIssues($event)"
135 |   >
136 |     <textarea
137 |       v-model="text"
138 |     />
139 | 
140 |     <template #no-result>
141 |       {{ loading ? 'Loading...' : 'No result' }}
142 |     </template>
143 |   </Mentionable>
144 | </template>
145 | ```
146 | 
147 | ## Final demo
148 | 
149 | This demo fakes the loading of issues with a one second delay:
150 | 
151 | <AsyncItemsDemo />
152 | 
153 | ```vue
154 | <script>
155 | import { Mentionable } from 'vue-mention'
156 | 
157 | const issues = [
158 |   {
159 |     value: 123,
160 |     label: 'Error with foo bar'
161 |   },
162 |   {
163 |     value: 42,
164 |     label: 'Cannot read line'
165 |   },
166 |   {
167 |     value: 77,
168 |     label: 'I have a feature suggestion'
169 |   }
170 | ]
171 | 
172 | function fetchIssues (searchText = null) {
173 |   return new Promise(resolve => {
174 |     setTimeout(() => {
175 |       if (!searchText) {
176 |         resolve(issues)
177 |       } else {
178 |         const reg = new RegExp(searchText, 'i')
179 |         resolve(issues.filter(issue => reg.test(issue.label)))
180 |       }
181 |     }, 1000)
182 |   })
183 | }
184 | 
185 | export default {
186 |   components: {
187 |     Mentionable,
188 |   },
189 | 
190 |   data () {
191 |     return {
192 |       text: '',
193 |       items: [],
194 |       loading: false,
195 |     }
196 |   },
197 | 
198 |   methods: {
199 |     async loadIssues (searchText = null) {
200 |       this.loading = true
201 |       this.items = await fetchIssues(searchText)
202 |       this.loading = false
203 |     }
204 |   },
205 | }
206 | </script>
207 | 
208 | <template>
209 |   <div
210 |     class="demo"
211 |   >
212 |     <Mentionable
213 |       :keys="['#']"
214 |       :items="items"
215 |       offset="6"
216 |       filtering-disabled
217 |       @open="loadIssues()"
218 |       @search="loadIssues($event)"
219 |     >
220 |       <textarea
221 |         v-model="text"
222 |         rows="6"
223 |         class="input"
224 |         placeholder="Enter text and then type # to trigger the mention"
225 |       />
226 | 
227 |       <template #no-result>
228 |         <div class="dim">
229 |           {{ loading ? 'Loading...' : 'No result' }}
230 |         </div>
231 |       </template>
232 | 
233 |       <template #item-#="{ item }">
234 |         <div class="issue">
235 |           <span class="number">
236 |             #{{ item.value }}
237 |           </span>
238 |           <span class="dim">
239 |             {{ item.label }}
240 |           </span>
241 |         </div>
242 |       </template>
243 |     </Mentionable>
244 | 
245 |     <div class="preview">{{ text }}</div>
246 |   </div>
247 | </template>
248 | 
249 | <style scoped>
250 | .demo {
251 |   margin: 24px 0;
252 | }
253 | 
254 | .input {
255 |   width: 100%;
256 |   border: #ccc 1px solid;
257 |   border-radius: 6px;
258 |   resize: vertical;
259 |   min-height: 42px;
260 |   padding: 12px;
261 |   box-sizing: border-box;
262 |   line-height: 1.2em;
263 |   font-size: inherit;
264 | }
265 | 
266 | .issue {
267 |   padding: 4px 6px;
268 |   border-radius: 4px;
269 |   cursor: pointer;
270 | }
271 | 
272 | .mention-selected .issue {
273 |   background: rgb(139, 212, 255);
274 | }
275 | 
276 | .issue .number {
277 |   font-family: monospace;
278 | }
279 | 
280 | .dim {
281 |   color: #666;
282 | }
283 | 
284 | .preview {
285 |   font-family: monospace;
286 |   white-space: pre-wrap;
287 |   margin-top: 12px;
288 |   padding: 12px;
289 |   background: #f8f8f8;
290 |   border-radius: 6px;
291 | }
292 | </style>
293 | ```
294 | 


--------------------------------------------------------------------------------
/packages/vue-mention/src/Mentionable.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | import getCaretPosition from 'textarea-caret'
  3 | import { Dropdown, options } from 'floating-vue'
  4 | import { defineComponent, computed, onMounted, onUnmounted, onUpdated, ref, watch, nextTick, PropType } from 'vue'
  5 | 
  6 | options.themes.mentionable = {
  7 |   $extend: 'dropdown',
  8 |   placement: 'top-start',
  9 |   arrowPadding: 6,
 10 |   arrowOverflow: false,
 11 | }
 12 | 
 13 | export interface MentionItem {
 14 |   searchText?: string
 15 |   label?: string
 16 |   value: any
 17 | }
 18 | 
 19 | export default defineComponent({
 20 |   components: {
 21 |     VDropdown: Dropdown,
 22 |   },
 23 | 
 24 |   inheritAttrs: false,
 25 | 
 26 |   props: {
 27 |     keys: {
 28 |       type: Array as PropType<string[]>,
 29 |       required: true,
 30 |     },
 31 | 
 32 |     items: {
 33 |       type: Array as PropType<MentionItem[]>,
 34 |       default: () => [],
 35 |     },
 36 | 
 37 |     omitKey: {
 38 |       type: Boolean,
 39 |       default: false,
 40 |     },
 41 | 
 42 |     filteringDisabled: {
 43 |       type: Boolean,
 44 |       default: false,
 45 |     },
 46 | 
 47 |     insertSpace: {
 48 |       type: Boolean,
 49 |       default: false,
 50 |     },
 51 | 
 52 |     mapInsert: {
 53 |       type: Function as PropType<(item: MentionItem, key: string) => string>,
 54 |       default: null,
 55 |     },
 56 | 
 57 |     limit: {
 58 |       type: Number,
 59 |       default: 8,
 60 |     },
 61 | 
 62 |     theme: {
 63 |       type: String,
 64 |       default: 'mentionable',
 65 |     },
 66 | 
 67 |     caretHeight: {
 68 |       type: Number,
 69 |       default: 0,
 70 |     },
 71 |   },
 72 | 
 73 |   emits: ['search', 'open', 'close', 'apply'],
 74 | 
 75 |   setup (props, { emit }) {
 76 |     const currentKey = ref<string>(null)
 77 |     let currentKeyIndex: number
 78 |     const oldKey = ref<string>(null)
 79 | 
 80 |     // Items
 81 | 
 82 |     const searchText = ref<string>(null)
 83 | 
 84 |     watch(searchText, (value, oldValue) => {
 85 |       if (value) {
 86 |         emit('search', value, oldValue)
 87 |       }
 88 |     })
 89 | 
 90 |     const filteredItems = computed(() => {
 91 |       if (!searchText.value || props.filteringDisabled) {
 92 |         return props.items
 93 |       }
 94 | 
 95 |       const finalSearchText = searchText.value.toLowerCase()
 96 | 
 97 |       return props.items.filter(item => {
 98 |         let text: string
 99 |         if (item.searchText) {
100 |           text = item.searchText
101 |         } else if (item.label) {
102 |           text = item.label
103 |         } else {
104 |           text = ''
105 |           for (const key in item) {
106 |             text += item[key]
107 |           }
108 |         }
109 |         return text.toLowerCase().includes(finalSearchText)
110 |       })
111 |     })
112 | 
113 |     const displayedItems = computed(() => filteredItems.value.slice(0, props.limit))
114 | 
115 |     // Selection
116 | 
117 |     const selectedIndex = ref(0)
118 | 
119 |     watch(displayedItems, () => {
120 |       selectedIndex.value = 0
121 |     }, {
122 |       deep: true,
123 |     })
124 | 
125 |     // Input element management
126 | 
127 |     let input: HTMLElement
128 |     const el = ref<HTMLDivElement>(null)
129 | 
130 |     function getInput () {
131 |       return el.value.querySelector('input') ?? el.value.querySelector('textarea') ?? el.value.querySelector('[contenteditable="true"]')
132 |     }
133 | 
134 |     onMounted(() => {
135 |       input = getInput()
136 |       attach()
137 |     })
138 | 
139 |     onUpdated(() => {
140 |       const newInput = getInput()
141 |       if (newInput !== input) {
142 |         detach()
143 |         input = newInput
144 |         attach()
145 |       }
146 |     })
147 | 
148 |     onUnmounted(() => {
149 |       detach()
150 |     })
151 | 
152 |     // Events
153 | 
154 |     function attach () {
155 |       if (input) {
156 |         input.addEventListener('input', onInput)
157 |         input.addEventListener('keydown', onKeyDown)
158 |         input.addEventListener('keyup', onKeyUp)
159 |         input.addEventListener('scroll', onScroll)
160 |         input.addEventListener('blur', onBlur)
161 |       }
162 |     }
163 | 
164 |     function detach () {
165 |       if (input) {
166 |         input.removeEventListener('input', onInput)
167 |         input.removeEventListener('keydown', onKeyDown)
168 |         input.removeEventListener('keyup', onKeyUp)
169 |         input.removeEventListener('scroll', onScroll)
170 |         input.removeEventListener('blur', onBlur)
171 |       }
172 |     }
173 | 
174 |     function onInput () {
175 |       checkKey()
176 |     }
177 | 
178 |     function onBlur () {
179 |       closeMenu()
180 |     }
181 | 
182 |     function onKeyDown (e: KeyboardEvent) {
183 |       if (currentKey.value) {
184 |         if (e.key === 'ArrowDown') {
185 |           selectedIndex.value++
186 |           if (selectedIndex.value >= displayedItems.value.length) {
187 |             selectedIndex.value = 0
188 |           }
189 |           cancelEvent(e)
190 |         }
191 |         if (e.key === 'ArrowUp') {
192 |           selectedIndex.value--
193 |           if (selectedIndex.value < 0) {
194 |             selectedIndex.value = displayedItems.value.length - 1
195 |           }
196 |           cancelEvent(e)
197 |         }
198 |         if ((e.key === 'Enter' || e.key === 'Tab') &&
199 |           displayedItems.value.length > 0) {
200 |           applyMention(selectedIndex.value)
201 |           cancelEvent(e)
202 |         }
203 |         if (e.key === 'Escape') {
204 |           closeMenu()
205 |           cancelEvent(e)
206 |         }
207 |       }
208 |     }
209 | 
210 |     let cancelKeyUp = null
211 | 
212 |     function onKeyUp (e: KeyboardEvent) {
213 |       if (cancelKeyUp && e.key === cancelKeyUp) {
214 |         cancelEvent(e)
215 |       }
216 |       cancelKeyUp = null
217 |     }
218 | 
219 |     function cancelEvent (e: KeyboardEvent) {
220 |       e.preventDefault()
221 |       e.stopPropagation()
222 |       cancelKeyUp = e.key
223 |     }
224 | 
225 |     function onScroll () {
226 |       updateCaretPosition()
227 |     }
228 | 
229 |     function getSelectionStart () {
230 |       return input.isContentEditable ? window.getSelection().anchorOffset : (input as HTMLInputElement).selectionStart
231 |     }
232 | 
233 |     function setCaretPosition (index: number) {
234 |       nextTick(() => {
235 |         (input as HTMLInputElement).selectionEnd = index
236 |       })
237 |     }
238 | 
239 |     function getValue () {
240 |       return input.isContentEditable ? window.getSelection().anchorNode.textContent : (input as HTMLInputElement).value
241 |     }
242 | 
243 |     function setValue (value) {
244 |       (input as HTMLInputElement).value = value
245 |       emitInputEvent('input')
246 |     }
247 | 
248 |     function emitInputEvent (type: string) {
249 |       input.dispatchEvent(new Event(type))
250 |     }
251 | 
252 |     let lastSearchText: string = null
253 | 
254 |     function checkKey () {
255 |       const index = getSelectionStart()
256 |       if (index >= 0) {
257 |         const { key, keyIndex } = getLastKeyBeforeCaret(index)
258 |         const text = lastSearchText = getLastSearchText(index, keyIndex)
259 |         if (!(keyIndex < 1 || /\s/.test(getValue()[keyIndex - 1]))) {
260 |           return false
261 |         }
262 |         if (text != null) {
263 |           openMenu(key, keyIndex)
264 |           searchText.value = text
265 |           return true
266 |         }
267 |       }
268 |       closeMenu()
269 |       return false
270 |     }
271 | 
272 |     function getLastKeyBeforeCaret (caretIndex: number) {
273 |       const [keyData] = props.keys.map(key => ({
274 |         key,
275 |         keyIndex: getValue().lastIndexOf(key, caretIndex - 1),
276 |       })).sort((a, b) => b.keyIndex - a.keyIndex)
277 |       return keyData
278 |     }
279 | 
280 |     function getLastSearchText (caretIndex: number, keyIndex: number) {
281 |       if (keyIndex !== -1) {
282 |         const text = getValue().substring(keyIndex + 1, caretIndex)
283 |         // If there is a space we close the menu
284 |         if (!/\s/.test(text)) {
285 |           return text
286 |         }
287 |       }
288 |       return null
289 |     }
290 | 
291 |     // Position of the popper
292 | 
293 |     const caretPosition = ref<{ top: number, left: number, height: number }>(null)
294 | 
295 |     function updateCaretPosition () {
296 |       if (currentKey.value) {
297 |         if (input.isContentEditable) {
298 |           const rect = window.getSelection().getRangeAt(0).getBoundingClientRect()
299 |           const inputRect = input.getBoundingClientRect()
300 |           caretPosition.value = {
301 |             left: rect.left - inputRect.left,
302 |             top: rect.top - inputRect.top,
303 |             height: rect.height,
304 |           }
305 |         } else {
306 |           caretPosition.value = getCaretPosition(input, currentKeyIndex)
307 |         }
308 |         caretPosition.value.top -= input.scrollTop
309 |         if (props.caretHeight) {
310 |           caretPosition.value.height = props.caretHeight
311 |         } else if (isNaN(caretPosition.value.height)) {
312 |           caretPosition.value.height = 16
313 |         }
314 |       }
315 |     }
316 | 
317 |     // Open/close
318 | 
319 |     function openMenu (key: string, keyIndex: number) {
320 |       if (currentKey.value !== key) {
321 |         currentKey.value = key
322 |         currentKeyIndex = keyIndex
323 |         updateCaretPosition()
324 |         selectedIndex.value = 0
325 |         emit('open', currentKey.value)
326 |       }
327 |     }
328 | 
329 |     function closeMenu () {
330 |       if (currentKey.value != null) {
331 |         oldKey.value = currentKey.value
332 |         currentKey.value = null
333 |         emit('close', oldKey.value)
334 |       }
335 |     }
336 | 
337 |     // Apply
338 | 
339 |     function applyMention (itemIndex: number) {
340 |       const item = displayedItems.value[itemIndex]
341 |       const value = (props.omitKey ? '' : currentKey.value) + String(props.mapInsert ? props.mapInsert(item, currentKey.value) : item.value) + (props.insertSpace ? ' ' : '')
342 |       if (input.isContentEditable) {
343 |         const range = window.getSelection().getRangeAt(0)
344 |         range.setStart(range.startContainer, range.startOffset - currentKey.value.length - (lastSearchText ? lastSearchText.length : 0))
345 |         range.deleteContents()
346 |         range.insertNode(document.createTextNode(value))
347 |         range.setStart(range.endContainer, range.endOffset)
348 |         emitInputEvent('input')
349 |       } else {
350 |         setValue(replaceText(getValue(), searchText.value, value, currentKeyIndex))
351 |         setCaretPosition(currentKeyIndex + value.length)
352 |       }
353 |       emit('apply', item, currentKey.value, value)
354 |       closeMenu()
355 |     }
356 | 
357 |     function replaceText (text: string, searchString: string, newText: string, index: number) {
358 |       return text.slice(0, index) + newText + text.slice(index + searchString.length + 1, text.length)
359 |     }
360 | 
361 |     return {
362 |       el,
363 |       currentKey,
364 |       oldKey,
365 |       caretPosition,
366 |       displayedItems,
367 |       selectedIndex,
368 |       applyMention,
369 |     }
370 |   },
371 | })
372 | </script>
373 | 
374 | <template>
375 |   <div
376 |     ref="el"
377 |     class="mentionable"
378 |     :class="$attrs.class"
379 |     style="position:relative;"
380 |   >
381 |     <slot />
382 | 
383 |     <VDropdown
384 |       ref="popper"
385 |       v-bind="{ ...$attrs, class: undefined }"
386 |       :shown="!!currentKey"
387 |       :triggers="[]"
388 |       :auto-hide="false"
389 |       :theme="theme"
390 |       class="popper"
391 |       style="position:absolute;"
392 |       :style="caretPosition ? {
393 |         top: `${caretPosition.top}px`,
394 |         left: `${caretPosition.left}px`,
395 |       } : {}"
396 |     >
397 |       <div
398 |         :style="caretPosition ? {
399 |           height: `${caretPosition.height}px`,
400 |         } : {}"
401 |       />
402 | 
403 |       <template #popper>
404 |         <div v-if="!displayedItems.length">
405 |           <slot name="no-result">
406 |             No result
407 |           </slot>
408 |         </div>
409 | 
410 |         <template v-else>
411 |           <div
412 |             v-for="(item, index) of displayedItems"
413 |             :key="index"
414 |             class="mention-item"
415 |             :class="{
416 |               'mention-selected': selectedIndex === index,
417 |             }"
418 |             @mouseover="selectedIndex = index"
419 |             @mousedown="applyMention(index)"
420 |           >
421 |             <slot
422 |               :name="`item-${currentKey || oldKey}`"
423 |               :item="item"
424 |               :index="index"
425 |             >
426 |               <slot
427 |                 name="item"
428 |                 :item="item"
429 |                 :index="index"
430 |               >
431 |                 {{ item.label || item.value }}
432 |               </slot>
433 |             </slot>
434 |           </div>
435 |         </template>
436 |       </template>
437 |     </VDropdown>
438 |   </div>
439 | </template>
440 | 


--------------------------------------------------------------------------------