mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-15 20:25:18 +02:00
Merge 2f88ff4fc3
into ebbea8c3b0
This commit is contained in:
commit
8178aa5ee0
|
@ -128,6 +128,7 @@ Or include Choices directly:
|
||||||
sorter: () => {...},
|
sorter: () => {...},
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: null,
|
placeholderValue: null,
|
||||||
|
searchInputMoveToTop: false,
|
||||||
searchPlaceholderValue: null,
|
searchPlaceholderValue: null,
|
||||||
prependValue: null,
|
prependValue: null,
|
||||||
appendValue: null,
|
appendValue: null,
|
||||||
|
@ -485,6 +486,14 @@ For backward compatibility, `<option placeholder>This is a placeholder</option>`
|
||||||
|
|
||||||
**Usage:** The value of the search inputs placeholder.
|
**Usage:** The value of the search inputs placeholder.
|
||||||
|
|
||||||
|
### searchInputMoveToTop
|
||||||
|
|
||||||
|
**Type:** `Boolean` **Default:** `false`
|
||||||
|
|
||||||
|
**Input types affected:** `select-one`
|
||||||
|
|
||||||
|
**Usage:** The move search input to top.
|
||||||
|
|
||||||
### prependValue
|
### prependValue
|
||||||
|
|
||||||
**Type:** `String` **Default:** `null`
|
**Type:** `String` **Default:** `null`
|
||||||
|
|
|
@ -125,7 +125,7 @@
|
||||||
"bundlesize": [
|
"bundlesize": [
|
||||||
{
|
{
|
||||||
"path": "public/assets/scripts/choices.min.js",
|
"path": "public/assets/scripts/choices.min.js",
|
||||||
"maxSize": "20 kB"
|
"maxSize": "22 kB"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "public/assets/styles/choices.min.css",
|
"path": "public/assets/styles/choices.min.css",
|
||||||
|
|
File diff suppressed because one or more lines are too long
8
public/assets/scripts/choices.min.js
vendored
8
public/assets/scripts/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -45,6 +45,12 @@
|
||||||
padding-bottom: 7.5px;
|
padding-bottom: 7.5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.choices[data-type*='select-one'] .choices__inner .choices__input {
|
||||||
|
padding: 5px;
|
||||||
|
border-bottom: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
.choices[data-type*='select-one'] .choices__input {
|
.choices[data-type*='select-one'] .choices__input {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -374,4 +380,8 @@
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.choices__placeholder.choices__item--disabled {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/*===== End of Choices ======*/
|
/*===== End of Choices ======*/
|
||||||
|
|
2
public/assets/styles/choices.min.css
vendored
2
public/assets/styles/choices.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -498,6 +498,14 @@
|
||||||
>
|
>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
<label for="choices-single-input-move-to-top">Search input move to top</label>
|
||||||
|
<select
|
||||||
|
class="form-control"
|
||||||
|
name="choices-single-input-move-to-top"
|
||||||
|
id="choices-single-input-move-to-top"
|
||||||
|
>
|
||||||
|
</select>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
<h2>Form interaction</h2>
|
<h2>Form interaction</h2>
|
||||||
<p>Change the values and press reset to restore to initial state.</p>
|
<p>Change the values and press reset to restore to initial state.</p>
|
||||||
|
@ -711,6 +719,16 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var singleInputMoveToTop = new Choices('#choices-single-input-move-to-top', {
|
||||||
|
searchInputMoveToTop: true,
|
||||||
|
searchPlaceholderValue: 'This is a search placeholder',
|
||||||
|
choices: [
|
||||||
|
{ value: '', label: '', placeholder: true, disabled: true },
|
||||||
|
{ value: 'Two', label: 'Label Two', selected: true },
|
||||||
|
{ value: 'Three', label: 'Label Three' },
|
||||||
|
],
|
||||||
|
});
|
||||||
|
|
||||||
var singleNoSearch = new Choices('#choices-single-no-search', {
|
var singleNoSearch = new Choices('#choices-single-no-search', {
|
||||||
searchEnabled: false,
|
searchEnabled: false,
|
||||||
removeItemButton: true,
|
removeItemButton: true,
|
||||||
|
|
|
@ -92,6 +92,7 @@ class Choices {
|
||||||
_isSelectOneElement: boolean;
|
_isSelectOneElement: boolean;
|
||||||
_isSelectMultipleElement: boolean;
|
_isSelectMultipleElement: boolean;
|
||||||
_isSelectElement: boolean;
|
_isSelectElement: boolean;
|
||||||
|
_needInputMoveToTop: boolean;
|
||||||
_store: Store;
|
_store: Store;
|
||||||
_templates: typeof templates;
|
_templates: typeof templates;
|
||||||
_initialState: State;
|
_initialState: State;
|
||||||
|
@ -160,6 +161,9 @@ class Choices {
|
||||||
this.config.searchEnabled =
|
this.config.searchEnabled =
|
||||||
this._isSelectMultipleElement || this.config.searchEnabled;
|
this._isSelectMultipleElement || this.config.searchEnabled;
|
||||||
|
|
||||||
|
this._needInputMoveToTop =
|
||||||
|
this._isSelectOneElement && this.config.searchInputMoveToTop;
|
||||||
|
|
||||||
if (!['auto', 'always'].includes(`${this.config.renderSelectedChoices}`)) {
|
if (!['auto', 'always'].includes(`${this.config.renderSelectedChoices}`)) {
|
||||||
this.config.renderSelectedChoices = 'auto';
|
this.config.renderSelectedChoices = 'auto';
|
||||||
}
|
}
|
||||||
|
@ -475,6 +479,11 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
hideDropdown(preventInputBlur?: boolean): this {
|
hideDropdown(preventInputBlur?: boolean): this {
|
||||||
|
const { activeItems } = this._store;
|
||||||
|
if (this._needInputMoveToTop && activeItems) {
|
||||||
|
this.input.value = activeItems[0].label;
|
||||||
|
}
|
||||||
|
|
||||||
if (!this.dropdown.isActive) {
|
if (!this.dropdown.isActive) {
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
@ -1117,7 +1126,9 @@ class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
this.clearInput();
|
if (!this._needInputMoveToTop) {
|
||||||
|
this.clearInput();
|
||||||
|
}
|
||||||
|
|
||||||
// We want to close the dropdown if we are dealing with a single select box
|
// We want to close the dropdown if we are dealing with a single select box
|
||||||
if (hasActiveDropdown && this._isSelectOneElement) {
|
if (hasActiveDropdown && this._isSelectOneElement) {
|
||||||
|
@ -1525,7 +1536,9 @@ class Choices {
|
||||||
this.hideDropdown(true);
|
this.hideDropdown(true);
|
||||||
this._addItem({ value });
|
this._addItem({ value });
|
||||||
this._triggerChange(value);
|
this._triggerChange(value);
|
||||||
this.clearInput();
|
if (!this._needInputMoveToTop) {
|
||||||
|
this.clearInput();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1948,6 +1961,10 @@ class Choices {
|
||||||
this.removeActiveItems(id);
|
this.removeActiveItems(id);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this._needInputMoveToTop) {
|
||||||
|
this.input.value = passedLabel;
|
||||||
|
}
|
||||||
|
|
||||||
// Trigger change event
|
// Trigger change event
|
||||||
this.passedElement.triggerEvent(EVENTS.addItem, {
|
this.passedElement.triggerEvent(EVENTS.addItem, {
|
||||||
id,
|
id,
|
||||||
|
@ -2159,13 +2176,16 @@ class Choices {
|
||||||
|
|
||||||
this.containerOuter.element.appendChild(this.containerInner.element);
|
this.containerOuter.element.appendChild(this.containerInner.element);
|
||||||
this.containerOuter.element.appendChild(this.dropdown.element);
|
this.containerOuter.element.appendChild(this.dropdown.element);
|
||||||
this.containerInner.element.appendChild(this.itemList.element);
|
|
||||||
|
if (!this._needInputMoveToTop) {
|
||||||
|
this.containerInner.element.appendChild(this.itemList.element);
|
||||||
|
}
|
||||||
|
|
||||||
if (!this._isTextElement) {
|
if (!this._isTextElement) {
|
||||||
this.dropdown.element.appendChild(this.choiceList.element);
|
this.dropdown.element.appendChild(this.choiceList.element);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this._isSelectOneElement) {
|
if (!this._isSelectOneElement || this._needInputMoveToTop) {
|
||||||
this.containerInner.element.appendChild(this.input.element);
|
this.containerInner.element.appendChild(this.input.element);
|
||||||
} else if (this.config.searchEnabled) {
|
} else if (this.config.searchEnabled) {
|
||||||
this.dropdown.element.insertBefore(
|
this.dropdown.element.insertBefore(
|
||||||
|
@ -2258,8 +2278,6 @@ class Choices {
|
||||||
const isSelected = shouldPreselect ? true : choice.selected;
|
const isSelected = shouldPreselect ? true : choice.selected;
|
||||||
const isDisabled = choice.disabled;
|
const isDisabled = choice.disabled;
|
||||||
|
|
||||||
console.log(isDisabled, choice);
|
|
||||||
|
|
||||||
this._addChoice({
|
this._addChoice({
|
||||||
value,
|
value,
|
||||||
label,
|
label,
|
||||||
|
|
|
@ -50,6 +50,7 @@ export const DEFAULT_CONFIG: Options = {
|
||||||
duplicateItemsAllowed: true,
|
duplicateItemsAllowed: true,
|
||||||
delimiter: ',',
|
delimiter: ',',
|
||||||
paste: true,
|
paste: true,
|
||||||
|
searchInputMoveToTop: false,
|
||||||
searchEnabled: true,
|
searchEnabled: true,
|
||||||
searchChoices: true,
|
searchChoices: true,
|
||||||
searchFloor: 1,
|
searchFloor: 1,
|
||||||
|
|
|
@ -438,6 +438,15 @@ export interface Options {
|
||||||
*/
|
*/
|
||||||
paste: boolean;
|
paste: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Whether search input should be in top.
|
||||||
|
*
|
||||||
|
* **Input types affected:** select-one
|
||||||
|
*
|
||||||
|
* @default false
|
||||||
|
*/
|
||||||
|
searchInputMoveToTop: boolean;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Whether a search area should be shown.
|
* Whether a search area should be shown.
|
||||||
*
|
*
|
||||||
|
|
|
@ -58,6 +58,11 @@ $choices-z-index: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.#{$choices-selector}__inner {
|
.#{$choices-selector}__inner {
|
||||||
padding-bottom: 7.5px;
|
padding-bottom: 7.5px;
|
||||||
|
.#{$choices-selector}__input {
|
||||||
|
padding: 5px;
|
||||||
|
border-bottom: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.#{$choices-selector}__input {
|
.#{$choices-selector}__input {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -357,4 +362,8 @@ $choices-z-index: 1;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.#{$choices-selector}__placeholder.#{$choices-selector}__item--disabled {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/*===== End of Choices ======*/
|
/*===== End of Choices ======*/
|
||||||
|
|
Loading…
Reference in a new issue