Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-highlightable-input
Advanced tools
Readme
Highlight and style specific words as you're typing.
npm install vue-highlightable-input --save
<highlightable-input
highlight-style="background-color:yellow"
:highlight-enabled="highlightEnabled"
:highlight="highlight"
v-model="msg"
/>
import HighlightableInput from "vue-highlightable-input"
export default {
name: 'HelloWorld',
components : {
HighlightableInput
},
data() {
return {
msg: '',
highlight: [
{text:'chicken', style:"background-color:#f37373"},
{text:'noodle', style:"background-color:#fca88f"},
{text:'soup', style:"background-color:#bbe4cb"},
{text:'so', style:"background-color:#fff05e"},
"whatever",
{start: 2, end: 5, style:"background-color:#f330ff"}
],
highlightEnabled: true
}
},
}
Name | Required | Type | Default | Description | Reactive |
---|---|---|---|---|---|
highlight | Yes | String or Array | null | The string or list of words to highlight. This can be a single string value, a RegExp or you can do an array of strings or RegExp or array of Highlight Objects or array of Range Objects. | Yes |
highlightEnabled | No | Boolean | true | If true, will highlight the text | Yes |
highlightStyle | No | String or Object | background-color:yellow | If no style is provided for text, this will act as the global styling for the highlight. Can also be a dictionary instead of string. | Yes |
highlightDelay | No | Number | 500 | Determines how long in milliseconds to wait before processing the highlights. Setting this to a low value is fine for small text but setting it higher may improve performance significantly for larger text | Yes |
caseSensitive | No | Boolean | false | If true, will treat highlight strings with case sensitivity. Can be overrided per highlight object. | Yes |
value | No | String | null | Raw text value. | Yes |
fireOn | No | String | keydown | The dom event on which the highlight event should be fired. This can be any event that the div content editable can handle. | No (only because the listener is being added in mounted) |
fireOnEnabled | No | Boolean | true | If true, will process the highlights on the specified (or default) event. | No (only because the value is used in the mounted function) |
{
text:'chicken', // Required
style:"background-color:#f37373" // Optional
caseSensitive: true // Optional defaults to False
}
{
start:1, // Required
end: 9, // Required
style:"background-color:#f37373" // Optional
}
End must be greater than start. The range end is exlusive in other words ==> [start, end)
Name | Description |
---|---|
@input | Just like a regular input html element you can use this to react to input events |
Note, that you can also use v-model
For the cool highlighter pen icon: Icons made by Freepik from Flaticon is licensed by Creative Commons BY 3.0
MIT
FAQs
A Vue.js component that highlights text as you type
The npm package vue-highlightable-input receives a total of 288 weekly downloads. As such, vue-highlightable-input popularity was classified as not popular.
We found that vue-highlightable-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.