Research
Security News
Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
vue-uniq-ids
Advanced tools
A Vue.js plugin that helps to use id-related attributes with no side-effect
A Vue.js plugin that helps to use id-related attributes with no side-effect
It is a trend to use components. Components are cool, they are small, obvious, easy to use and modular. Untill it comes to the id
property.
Some HTML tag attributes requires using an id
property, like label[for]
, input[form]
and many of aria-*
attributes. And the problem with the id
is that it is not modular. If several id
properties on the page have the same value they can affect each other.
VueUniqIds helps you to get rid of this problem. It provides the set of id-related directives which value is automatically modified by adding unique string while keeping the attrbitue easy to read.
Install the package
$ npm install vue-uniq-ids
Install the package
$ bower install vue-uniq-ids
add script on page
<script src="/bower_components/vue-uniq-ids/dist/vue-uniq-ids.js"></script>
or you can do it with RequireJS or any similar tool.
There are three ways to setup VueUniqIds:
// Import the plugin
import VueUniqIds from 'vue-uniq-ids'
// or
import { UniqIdsPlugin } from 'vue-uniq-ids'
// Install it with Vue.use()
import Vue from 'vue'
Vue.use(VueUniqIds, /* options */)
import Vue from 'vue'
// Import the mixin generator
import { createUniqIdsMixin } from 'vue-uniq-ids'
// Create the mixin
const uniqIdsMixin = createUniqIdsMixin(/* options */)
// Install it with Vue.mixin()
Vue.mixin(uniqIdsMixin)
import Vue from 'vue'
// Import the mixin generator
import { createUniqIdsMixin } from 'vue-uniq-ids'
// Create the mixin
const uniqIdsMixin = createUniqIdsMixin(/* options */)
// Add it to the instance
new Vue({
mixins: [uniqIdsMixin],
// …
})
// … or to the component
Vue.component('name', {
mixins: [uniqIdsMixin],
// …
})
You can use those directives at any template if you add this extension by Vue.use()
or Vue.mixin()
, and in the template of the component where you specify the extension by mixin: []
property.
Here is an example of using directives in *.vue
file:
<template>
<form>
<!-- Directives are expecting the string literal or a variable -->
<label v-uni-for="'username'">Username</label>
<!-- As well you can pass the list of items by array or a string where ids are separated by space -->
<input v-uni-id="'username'"
v-uni-aria-describedby="['username-description', 'username-hint']" />
<p v-uni-id="'username-description'">Your public name</p>
<p v-uni-id="'username-hint'">Use only latin characters</p>
</form>
</template>
This will generate something like an example below:
<form>
<label for="username-pc0k8g5b">Username</label>
<input id="username-pc0k8g5b"
aria-describedby="username-description-dnw4bvwy username-hint-oytscr4i" />
<p id="username-description-dnw4bvwy">Your public name</p>
<p id="username-hint-oytscr4i">Use only latin characters</p>
</form>
The list of available attributes:
There are several options to customize the behavior of directives. You can pass them in several ways:
import VueUniqIds from 'vue-uniq-ids'
Vue.use(VueUniqIds, options)
import { createUniqIdsMixin } from 'vue-uniq-ids'
Vue.mixin(createUniqIdsMixin(options))
// or
new Vue({
mixins: [createUniqIdsMixin(options)],
// …
})
new Vue({
uniqIdsConfig: options
})
The options is an object, that can contain several properties from the example below:
const options = {
/*
* scope {object|boolean} — is an object to store a list of generated ids
*
* If object is passed it will be used to store generated ids, so you can
* share the same scope between several components
* If the value is not object, but it is equivalent to true, the scope
* object will be created automatically for current instance
* Otherwise, plugin will use the global scope if the plugin was
* initialized by Vue.use or Vue.mixin or it will create a new scope.
*
* By default it is using the global scope
*/
scope: true,
/*
* prefix {string} — a prefix for directive names
* By default it is 'uni-'
*/
prefix: 'uni-',
/*
* attrs: {array} — a list of attributes for which directives will be created
* By default it is ['id', 'for', 'form', 'aria-activedescendant', 'aria-controls', 'aria-describedby', 'aria-flowto', 'aria-labelledby', 'aria-owns']
*/
attrs: ['id', 'for'],
/*
* The rest are options for qinu — a unique string generator
* Check the link for more details https://www.npmjs.com/package/qinu
*/
/*
* template {string} — the template for unique identifiers
*
* The %qinu% will be replaced with generated uniq code, and %args[N]%'s are
* replaced by args and directive value
*
* By default it is '%arg[0]%-%qinu%'
*/
template: '%arg[0]%-%arg[1]%-%qinu%',
/*
* args {array} — predefined args for template string
*
* This are values for template string, can be useful when you want to scope
* ids with an additional name, or to avoid using value for directives in
* the components with one id only.
*
* By default it is empty
*/
args: [],
/*
* chars {string|array} — a list of characters to generate the unique string
*/
chars: '1234567890abcdef',
/*
* length {integer} — a length of unique string
*/
length: 8
}
Vue.use(VueUniqIds)
Vue.component('input-section', {
props: ['label'],
template: '\n\
<div>\n\
<label v-uni-for>{{label}}</label>\n\
<input v-uni-id />\n\
</div>',
uniqIdsConfig: {
args: ['input-section'],
scope: true
}
})
This component will be rendered to code similar to the example below:
<div>
<label for="input-section-97muvl55">LABEL</label>
<input id="input-section-97muvl55" />
</div>
Ids generated in template and those that will be generated via this.uniId()
method have the same scope inside of the same component
Vue.use(VueUniqIds)
Vue.component('input-section', {
props: ['label'],
template: '\n\
<div>\n\
<label v-uni-for="textId">{{label}}</label>\n\
<input v-uni-id="\'text\'" />\n\
</div>',
computed: {
textId: function () {
return this.uniId('text')
}
}
})
This component will be rendered to code similar to the example below:
<div>
<label for="text-97muvl55">LABEL</label>
<input id="text-97muvl55" />
</div>
MIT © Stanislav Termosa
FAQs
A Vue.js plugin that helps to use id-related attributes with no side-effect
The npm package vue-uniq-ids receives a total of 430 weekly downloads. As such, vue-uniq-ids popularity was classified as not popular.
We found that vue-uniq-ids 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.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.