vue-mentionable
Vue-mentionable is a series of Vue components where users can mention with any identifier, like @admin or #156, etc.
Roadmap
- Mentionable Textarea
✅ - Mentionable Input
🔜
Installation
npm i vue-mentionable- (optional) Add
fontawesometo 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
}
- An enhanced example: https://github.com/TunaYagci/vue-mentionable/blob/master/src/components/MentionModes.js
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:, searchParam: } modeis 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
httpcall.
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
420 Dec 27, 2022
347 Jan 3, 2023
136 Nov 8, 2022
599 Dec 31, 2022
442 Jan 4, 2023
209 Nov 19, 2022
27 Nov 24, 2022
210 Jan 18, 2022
275 Aug 29, 2022
28 Jul 19, 2022
17 Jul 7, 2022
0 Jan 3, 2022
0 Oct 12, 2017
3 Nov 8, 2020
0 Dec 12, 2019
16 Jan 10, 2022
0 Dec 3, 2019
1 Nov 6, 2021
0 Jul 8, 2021