composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-12 23:14:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP Tom Select options

Browse Source
This commit is contained in:
jf-cbd
2025-11-25 17:46:18 +01:00
parent a19472cfd1
commit e1bd815094
3 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
css/backoffice/vendors/_tomselect.scss vendored Normal file
View File

@@ -0,0 +1,3 @@
@import "../../../node_modules/tom-select/dist/scss/tom-select.scss";
$select-color-item-active-border: $ibo-input--focus--border-color;

28
js/forms/custom-elements/tom-select.js
View File

@@ -1,8 +1,32 @@
class TomSelectElement extends HTMLSelectElement {
plugins = [];
connectedCallback() {
new TomSelect(this, {
if (this.getAttribute('data-tom-select-multiple')) {
this.plugins.push('remove_button');
}
});
const options = {
plugins: this.plugins,
wrapperClass: 'ts-wrapper ibo-input-wrapper ibo-input-select-wrapper--with-buttons ibo-input-select-autocomplete-wrapper',
controlClass: 'ts-control ibo-input ibo-input-select ibo-input-select-autocomplete',
render: {
dropdown: function (data, escape) {
return `<div class="selectize-dropdown"></div>`;
}
}
};
if (this.getAttribute('data-tom-select-disable-control-input')) {
options.controlInput = null;
}
if (this.getAttribute('data-tom-select-max-items-selected')) {
options.maxItems = parseInt(this.getAttribute('data-tom-select-max-items-selected'));
}
if (this.getAttribute('data-tom-select-placehelder')) {
options.placeholder = this.getAttribute('data-tom-select-placehelder');
}
new TomSelect(this, options);
}
}

8
templates/application/forms/itop_console_layout.html.twig
View File

@@ -23,7 +23,13 @@
{%- block choice_widget_collapsed -%}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' ibo-input')|trim}) %}
<select is="tom-select-element" class="field_autocomplete ibo-input ibo-input-select ibo-input-select-autocomplete ui-autocomplete-input" {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
<select is="tom-select-element" class="field_autocomplete ibo-input ibo-input-select ibo-input-select-autocomplete ui-autocomplete-input"
{{ block('widget_attributes') }}
{% if multiple %} multiple="multiple" data-tom-select-multiple="true" {% endif %}
{% if max_items_selected is defined %} data-tom-select-max-items="{{ max_items_selected }}" {% endif %}
{% if placeholder is defined %} data-tom-select-placeholder="{{ placeholder }}" {% endif %}
{% if disable_input is defined%} data-tom-select-disable-control-input=true {% endif %}
>
{%- if placeholder is not none -%}
<option value=""{% if placeholder_attr|default({}) %}{% with { attr: placeholder_attr } %}{{ block('attributes') }}{% endwith %}{% endif %}{% if required and value is empty %} selected="selected"{% endif %}>{{ placeholder != '' ? (translation_domain is same as(false) ? placeholder : placeholder|trans({}, translation_domain)) }}</option>
{%- endif -%}