Add Tom-Select lib

This commit is contained in:
jf-cbd
2025-11-18 17:17:54 +01:00
parent 0cb7c7359f
commit f93926528f
6 changed files with 72 additions and 3 deletions

View File

@@ -0,0 +1,9 @@
class TomSelectElement extends HTMLSelectElement {
connectedCallback() {
new TomSelect(this, {
});
}
}
customElements.define('tom-select-element', TomSelectElement, {extends: 'select'});

40
package-lock.json generated
View File

@@ -9,6 +9,7 @@
"dependencies": {
"@cityssm/fa5-power-transforms-css": "github:cityssm/fa5-power-transforms-css",
"@fontsource/raleway": "^4.5.0",
"@hotwired/turbo": "^8.0.5",
"@popperjs/core": "^2.11.8",
"@ungap/custom-elements": "^1.3.0",
"ace-builds": "^1.32.7",
@@ -49,6 +50,27 @@
"resolved": "https://registry.npmjs.org/@fontsource/raleway/-/raleway-4.5.0.tgz",
"integrity": "sha512-Rzj90wbZQnNzazqzoiu5HzMEMdqMJLUVFOo699sinTXrZRm1aB5iX2HTiK2VlPnH4M6u8yYnJ7CebOyamfWlqw=="
},
"node_modules/@hotwired/turbo": {
"version": "8.0.5",
"resolved": "https://registry.npmjs.org/@hotwired/turbo/-/turbo-8.0.5.tgz",
"integrity": "sha512-TdZDA7fxVQ2ZycygvpnzjGPmFq4sO/E2QVg+2em/sJ3YTSsIWVEis8HmWlumz+c9DjWcUkcCuB+muF08TInpAQ==",
"engines": {
"node": ">= 14"
}
},
"node_modules/@orchidjs/sifter": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.1.0.tgz",
"integrity": "sha512-mYwHCfr736cIWWdhhSZvDbf90AKt2xyrJspKFC3qyIJG1LtrJeJunYEqCGG4Aq2ijENbc4WkOjszcvNaIAS/pQ==",
"dependencies": {
"@orchidjs/unicode-variants": "^1.1.2"
}
},
"node_modules/@orchidjs/unicode-variants": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.1.2.tgz",
"integrity": "sha512-5DobW1CHgnBROOEpFlEXytED5OosEWESFvg/VYmH0143oXcijYTprRYJTs+55HzGM4IqxiLFSuqEzu9mPNwVsA=="
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
@@ -339,6 +361,24 @@
"resolved": "https://registry.npmjs.org/@fontsource/raleway/-/raleway-4.5.0.tgz",
"integrity": "sha512-Rzj90wbZQnNzazqzoiu5HzMEMdqMJLUVFOo699sinTXrZRm1aB5iX2HTiK2VlPnH4M6u8yYnJ7CebOyamfWlqw=="
},
"@hotwired/turbo": {
"version": "8.0.5",
"resolved": "https://registry.npmjs.org/@hotwired/turbo/-/turbo-8.0.5.tgz",
"integrity": "sha512-TdZDA7fxVQ2ZycygvpnzjGPmFq4sO/E2QVg+2em/sJ3YTSsIWVEis8HmWlumz+c9DjWcUkcCuB+muF08TInpAQ=="
},
"@orchidjs/sifter": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@orchidjs/sifter/-/sifter-1.1.0.tgz",
"integrity": "sha512-mYwHCfr736cIWWdhhSZvDbf90AKt2xyrJspKFC3qyIJG1LtrJeJunYEqCGG4Aq2ijENbc4WkOjszcvNaIAS/pQ==",
"requires": {
"@orchidjs/unicode-variants": "^1.1.2"
}
},
"@orchidjs/unicode-variants": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@orchidjs/unicode-variants/-/unicode-variants-1.1.2.tgz",
"integrity": "sha512-5DobW1CHgnBROOEpFlEXytED5OosEWESFvg/VYmH0143oXcijYTprRYJTs+55HzGM4IqxiLFSuqEzu9mPNwVsA=="
},
"@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",

View File

@@ -3,6 +3,7 @@
"dependencies": {
"@cityssm/fa5-power-transforms-css": "github:cityssm/fa5-power-transforms-css",
"@fontsource/raleway": "^4.5.0",
"@hotwired/turbo": "^8.0.5",
"@popperjs/core": "^2.11.8",
"@ungap/custom-elements": "^1.3.0",
"ace-builds": "^1.32.7",

View File

@@ -181,6 +181,8 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage
$this->LinkScriptFromAppRoot('js/selectize.min.js');
$this->LinkScriptFromAppRoot('node_modules/selectize-plugin-a11y/selectize-plugin-a11y.js');
$this->LinkScriptFromAppRoot('js/jquery.multiselect.js');
$this->LinkScriptFromAppRoot('node_modules/tom-select/dist/js/tom-select.complete.min.js');
$this->LinkScriptFromAppRoot('js/forms/custom-elements/tom-select.js');
// Used by inline image, CKEditor and other places
$this->LinkScriptFromAppRoot('node_modules/magnific-popup/dist/jquery.magnific-popup.min.js');
@@ -267,6 +269,8 @@ class iTopWebPage extends NiceWebPage implements iTabbedPage
// Used by external keys and other drop down lists
$this->LinkStylesheetFromAppRoot('css/selectize.default.css');
$this->LinkStylesheetFromAppRoot('node_modules/tom-select/dist/css/tom-select.bootstrap5.css');
}
/**

View File

@@ -23,7 +23,22 @@
{%- block choice_widget_collapsed -%}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' ibo-input')|trim}) %}
{{- parent() -}}
<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 %}>
{%- 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 -%}
{%- if preferred_choices|length > 0 -%}
{% set options = preferred_choices %}
{% set render_preferred_choices = true %}
{{- block('choice_widget_options') -}}
{%- if choices|length > 0 and separator is not none -%}
<option disabled="disabled">{{ separator }}</option>
{%- endif -%}
{%- endif -%}
{%- set options = choices -%}
{%- set render_preferred_choices = false -%}
{{- block('choice_widget_options') -}}
</select>
{%- endblock choice_widget_collapsed -%}
{%- block choice_widget_expanded -%}

View File

@@ -2,9 +2,9 @@
{# @license http://opensource.org/licenses/AGPL-3.0 #}
<script type="module">
import {session} from "https://cdn.jsdelivr.net/npm/@hotwired/turbo@latest/dist/turbo.es2017-esm.min.js";
import {session} from "/node_modules/@hotwired/turbo/dist/turbo.es2017-esm.js";
session.drive = false;
session.drive = false;
</script>
<turbo-frame id="{{ oUIBlock.GetId() }}">