How to use @pluginjs/select - 10 common examples
To help you get started, we’ve selected a few @pluginjs/select examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
pluginjs / pluginjs / modules / link-picker / src / target.js View on Github 
classes: this.instance.classes,
field: this.instance.getClassName(
this.instance.classes.NAMESPACE,
'target'
),
openMode: this.instance.translate('openMode')
})
this.$wrap = parseHTML(html)
this.$content = query(`.${this.instance.classes.FIELDCONTENT}`, this.$wrap)
this.element = query(
`.${this.instance.classes.SELECTTRIGGER}`,
this.$content
)
this.element.value = this.instance.value.target
this.SELECT = Select.of(this.element, {
// value: this.instance.value.target,
source: this.instance.options.targetValue,
keyboard: true,
onChange: value => {
if (this.instance.is('disabled')) {
return
}
this.instance.value.target = value
}
})
}build() {
this.$opac = parseHTML(
`<div class="${this.classes.HEXBOX}">
<input type="text" class="pj-input ${this.classes.HEXANGLE}">
<div class="${this.classes.HEXUNIT}">%</div>
</div>`
)
const $selector = parseHTML(
`<div class="${this.classes.HEXMODE}"><input type="text"></div>`
)
this.element.append($selector, this.$opac)
this.$el = query(`.${this.classes.HEXMODE}>input`, this.element)
// this.$selector = query(`.${this.classes.HEXMODE}>div`, this.element)
this.SELECT = Select.of(this.$el, {
value: this.classify,
source: this.data,
onChange: res => {
this.updateColor(res, this.color)
}
})
}const html = template.compile(this.instance.options.size.template())({
classes: this.instance.classes,
field: this.instance.getClassName(
this.instance.classes.NAMESPACE,
'size'
),
bgSize: this.instance.translate('bgSize')
})
this.$wrap = parseHTML(html)
this.$trigger = query(`.${this.instance.classes.SELECTTRIGGER}`, this.$wrap)
const data = this.values.map(val => ({ label: val, value: val }))
const that = this
this.$trigger.value = this.defaultValue
this.$sizeSelect = Select.of(this.$trigger, {
source: data,
keyboard: true,
onChange: val => {
if (that.instance.disabled) {
return
}
this.instance.value.size = val
setStyle('background-size', val, this.instance.$image)
setStyle('background-size', val, this.instance.TRIGGER.$fillImage)
}
})
}<input type="text" class="pj-input pj-input-sm ${this.classes.HEXANGLE}">
<div class="${this.classes.HEXUNIT}">%</div>
`
)
const $selector = parseHTML(
`<div class="${this.classes.HEXMODE}"><input value="${this.data[0].value}" type="text"></div>`
)
if (this.instance.module.alpha) {
this.element.append($selector, this.$opac)
} else {
this.element.append($selector)
}
this.$el = query(`.${this.classes.HEXMODE}>input`, this.element)
this.SELECT = Select.of(this.$el, {
source: this.data,
classes: {
TRIGGER: '{namespace}-trigger pj-input pj-input-sm'
},
onChange: res => {
this.updateColor(res, this.color)
}
})
}
{
value: 3,
label: 'Option 3'
},
{
value: 4,
label: 'Option 4'
},
{
value: 5,
label: 'Option 5'
}
]
const element = query('#ajax .example')
Select.of(element, {
source(resolve) {
setTimeout(() => {
resolve(data)
}, 3000)
}
}){
value: 'c',
label: 'fujian',
slug: 'fujian'
},
{
value: 'd',
label: 'guangdong',
slug: 'guangdong'
}
]
}
]
const element = query('#data .example-data')
Select.of(element, {
source
})classes: this.instance.classes,
field: this.instance.getClassName(
this.instance.classes.NAMESPACE,
'type'
),
type: this.instance.translate('type')
})
this.$wrap = parseHTML(html)
this.$content = query(`.${this.instance.classes.FIELDCONTENT}`, this.$wrap)
this.element = query(
`.${this.instance.classes.SELECTTRIGGER}`,
this.$content
)
this.element.value = this.instance.value.type
this.SELECT = Select.of(this.element, {
source: this.instance.options.source,
keyboard: true,
onChange: value => {
if (this.instance.is('disabled')) {
return
}
this.instance.value.type = value
if (this.instance.value.type === 'internal') {
addClass(
`${this.instance.classes.TYPESHOW}`,
query('.pj-linkPicker-internal', this.instance.$dropdown)
)
removeClass(
`${this.instance.classes.TYPESHOW}`,
query('.pj-linkPicker-external', this.instance.$dropdown)
)removeClass(this.classes.OPENDISABLE, this.TRIGGER.element)
},
onUpdate: () => {
this.$fillCover.setAttribute('src', this.data.poster)
if (this.videoApi) {
this.videoApi.stop()
}
this.element.value = this.val()
removeClass(this.classes.OPENDISABLE, this.TRIGGER.element)
this.DROPDOWN.hide()
addClass(this.classes.SHOW, this.$wrap)
}
})
this.$sourceSelect = Select.of(this.$sourceTrigger, {
source: sourceData,
keyboard: true,
onChange: value => {
this.data.source = value
if (value === 'Local File') {
showElement(closest(`.${this.classes.FIELD}`, this.$localUrl))
hideElement(closest(`.${this.classes.FIELD}`, this.$videoUrl))
} else {
hideElement(closest(`.${this.classes.FIELD}`, this.$localUrl))
showElement(closest(`.${this.classes.FIELD}`, this.$videoUrl))
}
if (this.$videoPoster) {
setStyle('backgroundImage', null, this.$videoPoster)
}
removeClass(this.classes.POSTERSELECTED, this.$poster)
if (this.videoApi) {return []
},
process(value) {
if (value && isArray(value) && value.length !== 0) {
return JSON.stringify(value)
}
return ''
},
templates: {
chip() {
return '<div data-value="{option.value}" class="{classes.CHIP}">{option.label}<i class="{classes.CHIPUNSELECT}"></i></div>'
}
}
})
export const translations = deepMerge(Select.I18N.translations, {
en: {
reachMaxText: 'You can only select {max} items'
},
zh: {
reachMaxText: '最多只能选择 {max} 项'
}
})
export const dependencies = ['select']import Select from '@pluginjs/select'
import { deepMerge } from '@pluginjs/utils'
import { isString, isArray } from '@pluginjs/is'
export const namespace = 'multiSelect'
export const events = deepMerge(Select.events, {
CLEAR: 'clear',
SELECT: 'select',
UNSELECT: 'unselect',
CHANGE: 'change'
})
export const classes = deepMerge(Select.classes, {
NAMESPACE: 'pj-select',
WRAP: '{namespace} pj-select-multi',
CHIP: '{namespace}-chip',
CHIPUNSELECT: '{namespace}-chip-unselect',
REACHMAX: '{namespace}-reach-max',
REACHMAXTEXT: '{namespace}-reach-max-text',
SELECTED: '{namespace}-selected',
HIDESELECTED: '{namespace}-hide-selected',
ALLSELECTED: '{namespace}-all-selected',
FILTER: '{namespace}-filter'
})
export const methods = deepMerge(Select.methods, [])
export const defaults = deepMerge(Select.defaults, {
max: null,@pluginjs/select
A flexible modern select js plugin.
