diff --git a/js/forms/custom-elements/tom-select.js b/js/forms/custom-elements/tom-select.js new file mode 100644 index 000000000..e4531a795 --- /dev/null +++ b/js/forms/custom-elements/tom-select.js @@ -0,0 +1,9 @@ +class TomSelectElement extends HTMLSelectElement { + connectedCallback() { + new TomSelect(this, { + + }); + } +} + +customElements.define('tom-select-element', TomSelectElement, {extends: 'select'}); diff --git a/package-lock.json b/package-lock.json index deced16e5..4831f6e00 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index c30131610..e596d79a6 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/sources/Application/WebPage/iTopWebPage.php b/sources/Application/WebPage/iTopWebPage.php index 6b184ebfc..eab0c6789 100644 --- a/sources/Application/WebPage/iTopWebPage.php +++ b/sources/Application/WebPage/iTopWebPage.php @@ -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'); + } /** diff --git a/templates/application/forms/itop_console_layout.html.twig b/templates/application/forms/itop_console_layout.html.twig index 186f34a46..3df4f6264 100644 --- a/templates/application/forms/itop_console_layout.html.twig +++ b/templates/application/forms/itop_console_layout.html.twig @@ -23,7 +23,22 @@ {%- block choice_widget_collapsed -%} {% set attr = attr|merge({class: (attr.class|default('') ~ ' ibo-input')|trim}) %} - {{- parent() -}} + {%- endblock choice_widget_collapsed -%} {%- block choice_widget_expanded -%} diff --git a/templates/base/components/turbo-form/layout.html.twig b/templates/base/components/turbo-form/layout.html.twig index 83fdd7450..8a8ff339d 100644 --- a/templates/base/components/turbo-form/layout.html.twig +++ b/templates/base/components/turbo-form/layout.html.twig @@ -2,9 +2,9 @@ {# @license http://opensource.org/licenses/AGPL-3.0 #}