Skip to content

Latest commit

 

History

History
112 lines (82 loc) · 3.03 KB

README.md

File metadata and controls

112 lines (82 loc) · 3.03 KB
Raw

vue-mentionable

npm

Vue-mentionable is a series of Vue components where users can mention with any identifier, like @admin or #156, etc.

Roadmap

  1. Mentionable Textarea ✅
  2. Mentionable Input 🔜

Installation

  • npm i vue-mentionable
  • (optional) Add fontawesome to your `index.html for loading icon

Register in main.js

import vueMentionable from 'vue-mentionable';

Vue.use(vueMentionable);

Use in any component

<mentionable-textarea :modeIdentifiers="modeIdentifiers" />

See here for examples

Docs

For props and events, see: https://tunayagci.github.io/vue-mentionable/#/docs

1. Mode Identifiers

  • A mode is simply which suggestion component is being displayed.
  • You have to register your modes to mentionable-textarea.
  • A simple example follows:
{
  mode: 0, // a unique id
  key: '@', // the actual identifier
  comp: MentionableUser // suggestion component
}
import MentionableIncident from "./MentionableIncident.vue";
import MentionableUser from "./MentionableUser.vue";

const MODE_USER = 0;
const MODE_INCIDENT = 1;

const userMention = {
    mode: MODE_USER,
    key: '@',
    comp: MentionableUser,
    valueKey: 'name'
};

const incidentMention = {
    mode: MODE_INCIDENT,
    key: '#',
    comp: MentionableIncident,
    valueKey: 'serial'
};

export {userMention, incidentMention, MODE_INCIDENT, MODE_USER};

2. Listening mention events

  • Mention events are triggered whenever user inputs while any mode is active.
  • You are expected to update your suggestions in this lifecycle.

Here is an example:

<mentionable-textarea onMention="onMention" />
onMention(event) {
    this.currentMode = event.mode;
    this.searchParam = event.searchParam;
    if (this.currentMode === MODE_INCIDENT) {
        this.searchTvSeries();
    }
}
  • event is of type {mode: <number>, searchParam: <string>}
  • mode is a number which is described a little above.
  • In above code you can see I'm not updating user suggestion component. This is because user suggestion component is reactive and it is watching this.searchParam.
  • Fetching tv series in this case is not reactive since I need to make an http call.

Note: you should most likely use debounce for user inputs. See here for example

Example

See the source code for live example

Keyboard Shortcuts

  • Up/Down arrow key to highlight suggestion
  • Escape key to close suggestions list
  • Enter/Tab key to select current highlighted suggestion