mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-08 16:46:35 +02:00
Update documentation
This commit is contained in:
Josh Johnson
commit
325a27cac2
20
README.md
20
README.md
|
|
@ -74,6 +74,12 @@ Or include Choices directly:
|
|||
noResultsText: 'No results found',
|
||||
noChoicesText: 'No choices to choose from',
|
||||
itemSelectText: 'Press to select',
|
||||
addItemText: (value) => {
|
||||
return `Press Enter to add <b>"${value}"</b>`;
|
||||
},
|
||||
maxItemText: (maxItemCount) => {
|
||||
return `Only ${maxItemCount} values can be added.`;
|
||||
},
|
||||
classNames: {
|
||||
containerOuter: 'choices',
|
||||
containerInner: 'choices__inner',
|
||||
|
|
@ -341,6 +347,20 @@ const example = new Choices(element, {
|
|||
|
||||
**Usage:** The text that is shown when a user hovers over a selectable choice.
|
||||
|
||||
### addItemText
|
||||
**Type:** `String/Function` **Default:** `Press Enter to add "${value}"`
|
||||
|
||||
**Input types affected:** `text`
|
||||
|
||||
**Usage:** The text that is shown when a user has inputted a new item but has not pressed the enter key. To access the current input value, pass a function with a `value` argument (see the [default config](https://github.com/jshjohnson/Choices#setup) for an example), otherwise pass a string.
|
||||
|
||||
### maxItemText
|
||||
**Type:** `String/Function` **Default:** `Only ${maxItemCount} values can be added.`
|
||||
|
||||
**Input types affected:** `text`
|
||||
|
||||
**Usage:** The text that is shown when a user has focus on the input but has already reached the [max item count](https://github.com/jshjohnson/Choices#maxitemcount). To access the max item count, pass a function with a `maxItemCount` argument (see the [default config](https://github.com/jshjohnson/Choices#setup) for an example), otherwise pass a string.
|
||||
|
||||
### classNames
|
||||
**Type:** `Object` **Default:**
|
||||
|
||||
|
|
|
|||
104
assets/scripts/dist/choices.js
vendored
104
assets/scripts/dist/choices.js
vendored
|
|
@ -74,11 +74,11 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
|
||||
var _index2 = _interopRequireDefault(_index);
|
||||
|
||||
var _index3 = __webpack_require__(22);
|
||||
var _index3 = __webpack_require__(23);
|
||||
|
||||
var _utils = __webpack_require__(23);
|
||||
var _utils = __webpack_require__(24);
|
||||
|
||||
__webpack_require__(24);
|
||||
__webpack_require__(25);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||
|
||||
|
|
@ -138,6 +138,13 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
noResultsText: 'No results found',
|
||||
noChoicesText: 'No choices to choose from',
|
||||
itemSelectText: 'Press to select',
|
||||
addItemText: function addItemText(value) {
|
||||
return 'Press Enter to add <b>"' + value + '"</b>';
|
||||
},
|
||||
maxItemText: function maxItemText(maxItemCount) {
|
||||
return 'Only ' + maxItemCount + ' values can be added.';
|
||||
},
|
||||
uniqueItemText: 'Only unique values can be added.',
|
||||
classNames: {
|
||||
containerOuter: 'choices',
|
||||
containerInner: 'choices__inner',
|
||||
|
|
@ -1243,14 +1250,14 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
key: '_canAddItem',
|
||||
value: function _canAddItem(activeItems, value) {
|
||||
var canAddItem = true;
|
||||
var notice = 'Press Enter to add <b>"' + value + '"</b>';
|
||||
var notice = (0, _utils.isType)('Function', this.config.addItemText) ? this.config.addItemText(value) : this.config.addItemText;
|
||||
|
||||
if (this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') {
|
||||
if (this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) {
|
||||
// If there is a max entry limit and we have reached that limit
|
||||
// don't update
|
||||
canAddItem = false;
|
||||
notice = 'Only ' + this.config.maxItemCount + ' values can be added.';
|
||||
notice = (0, _utils.isType)('Function', this.config.maxItemText) ? this.config.maxItemText(this.config.maxItemCount) : this.config.maxItemText;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1270,7 +1277,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
// in the array
|
||||
if (this.config.duplicateItems === false && !isUnique) {
|
||||
canAddItem = false;
|
||||
notice = 'Only unique values can be added.';
|
||||
notice = (0, _utils.isType)('Function', this.config.uniqueItemText) ? this.config.uniqueItemText(value) : this.config.uniqueItemText;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3352,7 +3359,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
|
||||
var _redux = __webpack_require__(4);
|
||||
|
||||
var _index = __webpack_require__(18);
|
||||
var _index = __webpack_require__(19);
|
||||
|
||||
var _index2 = _interopRequireDefault(_index);
|
||||
|
||||
|
|
@ -3584,23 +3591,23 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
|
||||
var _createStore2 = _interopRequireDefault(_createStore);
|
||||
|
||||
var _combineReducers = __webpack_require__(13);
|
||||
var _combineReducers = __webpack_require__(14);
|
||||
|
||||
var _combineReducers2 = _interopRequireDefault(_combineReducers);
|
||||
|
||||
var _bindActionCreators = __webpack_require__(15);
|
||||
var _bindActionCreators = __webpack_require__(16);
|
||||
|
||||
var _bindActionCreators2 = _interopRequireDefault(_bindActionCreators);
|
||||
|
||||
var _applyMiddleware = __webpack_require__(16);
|
||||
var _applyMiddleware = __webpack_require__(17);
|
||||
|
||||
var _applyMiddleware2 = _interopRequireDefault(_applyMiddleware);
|
||||
|
||||
var _compose = __webpack_require__(17);
|
||||
var _compose = __webpack_require__(18);
|
||||
|
||||
var _compose2 = _interopRequireDefault(_compose);
|
||||
|
||||
var _warning = __webpack_require__(14);
|
||||
var _warning = __webpack_require__(15);
|
||||
|
||||
var _warning2 = _interopRequireDefault(_warning);
|
||||
|
||||
|
|
@ -4041,32 +4048,55 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
/* 11 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
/* WEBPACK VAR INJECTION */(function(global) {'use strict';
|
||||
/* WEBPACK VAR INJECTION */(function(global, module) {'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
value: true
|
||||
});
|
||||
|
||||
var _ponyfill = __webpack_require__(12);
|
||||
var _ponyfill = __webpack_require__(13);
|
||||
|
||||
var _ponyfill2 = _interopRequireDefault(_ponyfill);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
||||
|
||||
var root = undefined; /* global window */
|
||||
var root; /* global window */
|
||||
|
||||
if (typeof global !== 'undefined') {
|
||||
root = global;
|
||||
|
||||
if (typeof self !== 'undefined') {
|
||||
root = self;
|
||||
} else if (typeof window !== 'undefined') {
|
||||
root = window;
|
||||
root = window;
|
||||
} else if (typeof global !== 'undefined') {
|
||||
root = global;
|
||||
} else if (true) {
|
||||
root = module;
|
||||
} else {
|
||||
root = Function('return this')();
|
||||
}
|
||||
|
||||
var result = (0, _ponyfill2['default'])(root);
|
||||
exports['default'] = result;
|
||||
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
|
||||
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(12)(module)))
|
||||
|
||||
/***/ },
|
||||
/* 12 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
module.exports = function(module) {
|
||||
if(!module.webpackPolyfill) {
|
||||
module.deprecate = function() {};
|
||||
module.paths = [];
|
||||
// module.parent = undefined by default
|
||||
module.children = [];
|
||||
module.webpackPolyfill = 1;
|
||||
}
|
||||
return module;
|
||||
}
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 13 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -4094,7 +4124,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
};
|
||||
|
||||
/***/ },
|
||||
/* 13 */
|
||||
/* 14 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -4108,7 +4138,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
|
||||
var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
|
||||
|
||||
var _warning = __webpack_require__(14);
|
||||
var _warning = __webpack_require__(15);
|
||||
|
||||
var _warning2 = _interopRequireDefault(_warning);
|
||||
|
||||
|
|
@ -4241,7 +4271,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
}
|
||||
|
||||
/***/ },
|
||||
/* 14 */
|
||||
/* 15 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -4271,7 +4301,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
}
|
||||
|
||||
/***/ },
|
||||
/* 15 */
|
||||
/* 16 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -4327,7 +4357,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
}
|
||||
|
||||
/***/ },
|
||||
/* 16 */
|
||||
/* 17 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -4338,7 +4368,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
|
||||
exports['default'] = applyMiddleware;
|
||||
|
||||
var _compose = __webpack_require__(17);
|
||||
var _compose = __webpack_require__(18);
|
||||
|
||||
var _compose2 = _interopRequireDefault(_compose);
|
||||
|
||||
|
|
@ -4390,7 +4420,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
}
|
||||
|
||||
/***/ },
|
||||
/* 17 */
|
||||
/* 18 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
"use strict";
|
||||
|
|
@ -4433,7 +4463,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
}
|
||||
|
||||
/***/ },
|
||||
/* 18 */
|
||||
/* 19 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -4444,15 +4474,15 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
|
||||
var _redux = __webpack_require__(4);
|
||||
|
||||
var _items = __webpack_require__(19);
|
||||
var _items = __webpack_require__(20);
|
||||
|
||||
var _items2 = _interopRequireDefault(_items);
|
||||
|
||||
var _groups = __webpack_require__(20);
|
||||
var _groups = __webpack_require__(21);
|
||||
|
||||
var _groups2 = _interopRequireDefault(_groups);
|
||||
|
||||
var _choices = __webpack_require__(21);
|
||||
var _choices = __webpack_require__(22);
|
||||
|
||||
var _choices2 = _interopRequireDefault(_choices);
|
||||
|
||||
|
|
@ -4480,7 +4510,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
exports.default = rootReducer;
|
||||
|
||||
/***/ },
|
||||
/* 19 */
|
||||
/* 20 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -4548,7 +4578,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
exports.default = items;
|
||||
|
||||
/***/ },
|
||||
/* 20 */
|
||||
/* 21 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -4589,7 +4619,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
exports.default = groups;
|
||||
|
||||
/***/ },
|
||||
/* 21 */
|
||||
/* 22 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -4717,7 +4747,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
exports.default = choices;
|
||||
|
||||
/***/ },
|
||||
/* 22 */
|
||||
/* 23 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
|
@ -4802,7 +4832,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
};
|
||||
|
||||
/***/ },
|
||||
/* 23 */
|
||||
/* 24 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
"use strict";
|
||||
|
|
@ -5284,7 +5314,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|||
};
|
||||
|
||||
/***/ },
|
||||
/* 24 */
|
||||
/* 25 */
|
||||
/***/ function(module, exports) {
|
||||
|
||||
'use strict';
|
||||
|
|
|
|||
2
assets/scripts/dist/choices.js.map
vendored
2
assets/scripts/dist/choices.js.map
vendored
File diff suppressed because one or more lines are too long
4
assets/scripts/dist/choices.min.js
vendored
4
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -71,6 +71,13 @@ class Choices {
|
|||
noResultsText: 'No results found',
|
||||
noChoicesText: 'No choices to choose from',
|
||||
itemSelectText: 'Press to select',
|
||||
addItemText: (value) => {
|
||||
return `Press Enter to add <b>"${value}"</b>`;
|
||||
},
|
||||
maxItemText: (maxItemCount) => {
|
||||
return `Only ${maxItemCount} values can be added.`;
|
||||
},
|
||||
uniqueItemText: 'Only unique values can be added.',
|
||||
classNames: {
|
||||
containerOuter: 'choices',
|
||||
containerInner: 'choices__inner',
|
||||
|
|
@ -1032,14 +1039,14 @@ class Choices {
|
|||
*/
|
||||
_canAddItem(activeItems, value) {
|
||||
let canAddItem = true;
|
||||
let notice = `Press Enter to add <b>"${value}"</b>`;
|
||||
let notice = isType('Function', this.config.addItemText) ? this.config.addItemText(value) : this.config.addItemText;
|
||||
|
||||
if (this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') {
|
||||
if (this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) {
|
||||
// If there is a max entry limit and we have reached that limit
|
||||
// don't update
|
||||
canAddItem = false;
|
||||
notice = `Only ${this.config.maxItemCount} values can be added.`;
|
||||
notice = isType('Function', this.config.maxItemText) ? this.config.maxItemText(this.config.maxItemCount) : this.config.maxItemText;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1057,7 +1064,7 @@ class Choices {
|
|||
// in the array
|
||||
if (this.config.duplicateItems === false && !isUnique) {
|
||||
canAddItem = false;
|
||||
notice = 'Only unique values can be added.';
|
||||
notice = isType('Function', this.config.uniqueItemText) ? this.config.uniqueItemText(value) : this.config.uniqueItemText;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
18
index.html
18
index.html
|
|
@ -65,7 +65,10 @@
|
|||
<label for="choices-text-preset-values">Preset values passed through options</label>
|
||||
<input class="form-control" id="choices-text-preset-values" type="text" value="olivia@benson.com" placeholder="This is a placeholder">
|
||||
|
||||
<label for="choices-text-preset-values">Right-to-left</label>
|
||||
<label for="choices-text-i18n">I18N labels</label>
|
||||
<input class="form-control" data-trigger id="choices-text-i18n" type="text">
|
||||
|
||||
<label for="choices-text-rtl">Right-to-left</label>
|
||||
<input class="form-control" data-trigger id="choices-text-rtl" type="text" value="Value 1, Value 2" dir="rtl">
|
||||
|
||||
<hr>
|
||||
|
|
@ -276,6 +279,19 @@
|
|||
editItems: true,
|
||||
});
|
||||
|
||||
var texti18n = new Choices('#choices-text-i18n', {
|
||||
paste: false,
|
||||
duplicateItems: false,
|
||||
editItems: true,
|
||||
addItemText: (value) => {
|
||||
return `Appuyez sur Entrée pour ajouter <b>"${value}"</b>`;
|
||||
},
|
||||
maxItemText: (maxItemCount) => {
|
||||
return `${maxItemCount} valeurs peuvent être ajoutées`;
|
||||
},
|
||||
uniqueItemText: 'Cette valeur est déjà présente',
|
||||
});
|
||||
|
||||
var textEmailFilter = new Choices('#choices-text-email-filter', {
|
||||
editItems: true,
|
||||
regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
||||
|
|
|
|||
Loading…
Reference in a new issue