From 6f02d27889fa87fec748e44d869a3a15e062ec07 Mon Sep 17 00:00:00 2001 From: tempcode Date: Tue, 21 Nov 2023 12:11:53 +0100 Subject: [PATCH 01/27] fix: added type=number to not repeat background fix: moved button arrow to right --- src/scss/custom/_form-input-number.scss | 2 ++ src/scss/custom/_just-validate.scss | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/scss/custom/_form-input-number.scss b/src/scss/custom/_form-input-number.scss index 1fcaad277c..cffb6b4daf 100644 --- a/src/scss/custom/_form-input-number.scss +++ b/src/scss/custom/_form-input-number.scss @@ -127,6 +127,7 @@ &.input-number-add { top: -6px; + right: 20px; &:after { border-width: 0 5px 6px 5px; border-color: transparent transparent $neutral-1-a7 transparent; // TODO Check if still necessary @@ -134,6 +135,7 @@ } &.input-number-sub { bottom: -6px; + right: 20px; &:after { border-width: 6px 5px 0 5px; border-color: $neutral-1-a7 transparent transparent transparent; // TODO Check if still necessary diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index f12e4f0044..c5f2c7169b 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -24,7 +24,8 @@ textarea { } input[type='date'], input[type='file'], -input[type='text'] { +input[type='text'], +input[type='number'] { &.just-validate-success-field { background-repeat: no-repeat; background-size: 37px 21px; From bae32220bb8393555fa97d17e2e4bada20c826c7 Mon Sep 17 00:00:00 2001 From: tempcode Date: Tue, 21 Nov 2023 18:05:08 +0100 Subject: [PATCH 02/27] fix: currency and percentage with form-control fix: if apply form-control align goes wrong --- src/scss/custom/_form-input-number.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/scss/custom/_form-input-number.scss b/src/scss/custom/_form-input-number.scss index cffb6b4daf..e174f26ab1 100644 --- a/src/scss/custom/_form-input-number.scss +++ b/src/scss/custom/_form-input-number.scss @@ -39,7 +39,7 @@ &:before { position: absolute; left: 14px; - top: 0; + top: 8px; // color: $color-text-muted; font-weight: bold; font-size: 1rem; @@ -126,16 +126,16 @@ } &.input-number-add { - top: -6px; - right: 20px; + top: 0px; + right: 22px; &:after { border-width: 0 5px 6px 5px; border-color: transparent transparent $neutral-1-a7 transparent; // TODO Check if still necessary } } &.input-number-sub { - bottom: -6px; - right: 20px; + bottom: 0px; + right: 22px; &:after { border-width: 6px 5px 0 5px; border-color: $neutral-1-a7 transparent transparent transparent; // TODO Check if still necessary From c80b6143f1d146a5f7675411ed552c1184e98c5e Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Wed, 22 Nov 2023 13:33:22 +0100 Subject: [PATCH 03/27] chore(docs): add currency field to form example --- docs/esempi/form/index.html | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/docs/esempi/form/index.html b/docs/esempi/form/index.html index c8a1368e93..894c1a232c 100644 --- a/docs/esempi/form/index.html +++ b/docs/esempi/form/index.html @@ -59,7 +59,7 @@

Campi input

- +
@@ -70,6 +70,20 @@

Campi input

+
+
+ + + + + + +
+
@@ -345,6 +359,17 @@

File

errorMessage: 'Questo campo è richiesto', }, ]) + .addField('#importo', [ + { + rule: 'required', + errorMessage: 'Questo campo è richiesto', + }, + { + rule: 'minNumber', + value: 3.50, + errorMessage: 'Deve essere maggiore di 3.50', + } + ]) .addField('#age', [ { rule: 'required', From e0130d5e45203c0bb08382f44353b6701ac535ba Mon Sep 17 00:00:00 2001 From: tempcode Date: Wed, 22 Nov 2023 14:47:38 +0100 Subject: [PATCH 04/27] fix: removed validation css extra code docs: updated input-numerico to use form-control --- docs/form/input-numerico.md | 14 +++++++------- src/scss/custom/_just-validate.scss | 23 ----------------------- 2 files changed, 7 insertions(+), 30 deletions(-) diff --git a/docs/form/input-numerico.md b/docs/form/input-numerico.md index 88125dcc98..8f93125615 100644 --- a/docs/form/input-numerico.md +++ b/docs/form/input-numerico.md @@ -22,7 +22,7 @@ La larghezza del campo predefinita è quella del suo contenitore, per limitare l
- + @@ -35,7 +35,7 @@ La larghezza del campo predefinita è quella del suo contenitore, per limitare l
- + @@ -55,7 +55,7 @@ Aggiungendo gli attributi HTML `min=""`, `max=""` e `step=""` all'input è possi
- + @@ -75,7 +75,7 @@ Per anteporre il simbolo della valuta in Euro, aggiungere la classe `.input-numb
- + @@ -97,7 +97,7 @@ Si consiglia di impostare gli attributi `min=0` e `max="100"`.
- + @@ -118,7 +118,7 @@ Aggiungere anche l'attributo `disabled` al campo e ai pulsanti.
- + @@ -140,7 +140,7 @@ sufficiente aggiungere la classe `input-number-adaptive`.
- + diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index c5f2c7169b..dac5598906 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -15,31 +15,11 @@ padding-right: calc(1.5em + 0.75rem) !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E"); } -textarea { - &.just-validate-success-field { - background-position: right 0.2rem !important; - background-repeat: no-repeat !important; - background-size: 28px 16px !important; - } -} -input[type='date'], -input[type='file'], -input[type='text'], -input[type='number'] { - &.just-validate-success-field { - background-repeat: no-repeat; - background-size: 37px 21px; - background-position: right center; - } -} input[type='date'] { &.is-invalid { border-bottom: 1px solid #d9364f; padding-right: calc(1.5em + 0.75rem) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-size: 37px 21px; - background-position: right center; } } input[type='checkbox'], @@ -55,9 +35,6 @@ select { border-bottom: 1px solid #d9364f; } &.just-validate-success-field { - background-repeat: no-repeat; - background-size: 77px 21px; - background-position: right center; border-bottom: 1px solid #008758; } } From a5c52195d04fb5f782d0d38e03667cc0f8e5076d Mon Sep 17 00:00:00 2001 From: tempcode Date: Wed, 22 Nov 2023 15:36:21 +0100 Subject: [PATCH 05/27] docs: added form-control to textarea fix: validation background rule for textarea fix: improve position of input-numeri buttons fix: form-feedback cause button in wrong position --- docs/esempi/form/index.html | 2 +- docs/form/input.md | 2 +- src/scss/custom/_form-input-number.scss | 8 ++++---- src/scss/custom/_just-validate.scss | 12 ++++++++++++ 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/esempi/form/index.html b/docs/esempi/form/index.html index 894c1a232c..cbaf299daf 100644 --- a/docs/esempi/form/index.html +++ b/docs/esempi/form/index.html @@ -90,7 +90,7 @@

Campi input

- +
diff --git a/docs/form/input.md b/docs/form/input.md index 296a4dacd5..04c6ba3212 100644 --- a/docs/form/input.md +++ b/docs/form/input.md @@ -517,7 +517,7 @@ Includendo l'elemento all'interno di un `.form-group`, la label assumerà lo ste {% capture example %}
- +
{% endcapture %}{% include example.html content=example %} diff --git a/src/scss/custom/_form-input-number.scss b/src/scss/custom/_form-input-number.scss index e174f26ab1..98eedd7ec3 100644 --- a/src/scss/custom/_form-input-number.scss +++ b/src/scss/custom/_form-input-number.scss @@ -126,16 +126,16 @@ } &.input-number-add { - top: 0px; - right: 22px; + top: 2px; + right: 24px; &:after { border-width: 0 5px 6px 5px; border-color: transparent transparent $neutral-1-a7 transparent; // TODO Check if still necessary } } &.input-number-sub { - bottom: 0px; - right: 22px; + bottom: 2px; + right: 24px; &:after { border-width: 6px 5px 0 5px; border-color: $neutral-1-a7 transparent transparent transparent; // TODO Check if still necessary diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index dac5598906..3ce9bdb88d 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -7,6 +7,11 @@ color: #d9364f; } } +.input-number{ + .form-feedback { + position: absolute; + } +} .sr-only-justvalidate-bi { display: none; } @@ -15,6 +20,13 @@ padding-right: calc(1.5em + 0.75rem) !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E"); } +textarea { + &.just-validate-success-field { + background-position: right 0.2rem !important; + background-repeat: no-repeat !important; + background-size: 28px 16px !important; + } +} input[type='date'] { &.is-invalid { border-bottom: 1px solid #d9364f; From dda312cdd67fc870b6ed6f6662da9df91923a873 Mon Sep 17 00:00:00 2001 From: tempcode Date: Wed, 22 Nov 2023 16:24:39 +0100 Subject: [PATCH 06/27] fix: prettier error fix: textarea border on valid/invalid status fix: textarea position and icon dimension --- src/scss/custom/_just-validate.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index 3ce9bdb88d..81838cf874 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -7,7 +7,7 @@ color: #d9364f; } } -.input-number{ +.input-number { .form-feedback { position: absolute; } @@ -21,10 +21,13 @@ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E"); } textarea { + background-position: top 0.3em right 0.3em !important; + background-size: 37px 30% !important; + &.is-invalid { + border-bottom: 1px solid #d9364f; + } &.just-validate-success-field { - background-position: right 0.2rem !important; - background-repeat: no-repeat !important; - background-size: 28px 16px !important; + border-bottom: 1px solid #008758; } } input[type='date'] { From f1e2db3af1f2508fa86543a4c014f4bbf5f59fd3 Mon Sep 17 00:00:00 2001 From: tempcode Date: Wed, 22 Nov 2023 17:20:49 +0100 Subject: [PATCH 07/27] fix: textarea border bottom --- src/scss/custom/_just-validate.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index 81838cf874..e4bedf3b9a 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -20,14 +20,19 @@ padding-right: calc(1.5em + 0.75rem) !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E"); } + textarea { - background-position: top 0.3em right 0.3em !important; - background-size: 37px 30% !important; + &.form-control { + background-position: top 0.3em right 0.3em !important; + background-size: 37px 30% !important; + } &.is-invalid { - border-bottom: 1px solid #d9364f; + border-bottom-style: solid; + border-bottom-width: 1px; } &.just-validate-success-field { - border-bottom: 1px solid #008758; + border-bottom-style: solid; + border-bottom-width: 1px; } } input[type='date'] { From cf52bdd41ac42a77b99374ccf4334db5677501be Mon Sep 17 00:00:00 2001 From: tempcode Date: Thu, 23 Nov 2023 18:30:52 +0100 Subject: [PATCH 08/27] fix: currency field with input-group --- docs/esempi/form/index.html | 28 +++++++++++++++++ src/js/plugins/input-number.js | 3 +- src/scss/custom/_form-input-number.scss | 42 ++----------------------- src/scss/custom/_forms.scss | 3 +- src/scss/custom/_just-validate.scss | 18 ++++++++--- 5 files changed, 47 insertions(+), 47 deletions(-) diff --git a/docs/esempi/form/index.html b/docs/esempi/form/index.html index cbaf299daf..3f8117168d 100644 --- a/docs/esempi/form/index.html +++ b/docs/esempi/form/index.html @@ -84,6 +84,23 @@

Campi input
+
+
+ + + € + + + + + + +
+
@@ -370,6 +387,17 @@

File

errorMessage: 'Deve essere maggiore di 3.50', } ]) + .addField('#importo_input_group', [ + { + rule: 'required', + errorMessage: 'Questo campo è richiesto', + }, + { + rule: 'minNumber', + value: 3.50, + errorMessage: 'Deve essere maggiore di 3.50', + } + ]) .addField('#age', [ { rule: 'required', diff --git a/src/js/plugins/input-number.js b/src/js/plugins/input-number.js index fca57d83ad..0799a58796 100644 --- a/src/js/plugins/input-number.js +++ b/src/js/plugins/input-number.js @@ -89,7 +89,8 @@ class InputNumber extends BaseComponent { } _incrDecr(isDecr) { - const inputVal = parseFloat(this._element.value) + var inputVal = 0 + if (this._element.value !== '') inputVal = parseFloat(this._element.value) if (!isNaN(inputVal)) { //get step diff --git a/src/scss/custom/_form-input-number.scss b/src/scss/custom/_form-input-number.scss index 98eedd7ec3..dac7cd35c0 100644 --- a/src/scss/custom/_form-input-number.scss +++ b/src/scss/custom/_form-input-number.scss @@ -1,6 +1,5 @@ .input-number { position: relative; - width: 100%; &.input-number-adaptive { width: auto; @@ -23,42 +22,12 @@ } // color: $color-text-muted; - padding-right: 32px; - padding-left: 12px; - min-width: 86px !important; - width: 100%; &:focus { color: $color-text-base; } } - //currency + percentage version - &.input-number-currency, - &.input-number-percentage { - &:before { - position: absolute; - left: 14px; - top: 8px; - // color: $color-text-muted; - font-weight: bold; - font-size: 1rem; - } - input[type='number'] { - padding-left: 40px; - } - } - &.input-number-currency { - &:before { - content: '€'; - } - } - &.input-number-percentage { - &:before { - content: '%'; - } - } - //disabled version &.disabled { input[type='number'] { @@ -90,13 +59,12 @@ //add + sub buttons button { - position: absolute; - right: 2px; + position: relative; transition: opacity 0.1s; padding: 0; border: none; - height: 20px; - width: 24px; + height: 50%; + width: 16px; background: transparent; &:after { position: absolute; @@ -126,16 +94,12 @@ } &.input-number-add { - top: 2px; - right: 24px; &:after { border-width: 0 5px 6px 5px; border-color: transparent transparent $neutral-1-a7 transparent; // TODO Check if still necessary } } &.input-number-sub { - bottom: 2px; - right: 24px; &:after { border-width: 6px 5px 0 5px; border-color: $neutral-1-a7 transparent transparent transparent; // TODO Check if still necessary diff --git a/src/scss/custom/_forms.scss b/src/scss/custom/_forms.scss index 0b3e02427c..9ecb56dc1f 100644 --- a/src/scss/custom/_forms.scss +++ b/src/scss/custom/_forms.scss @@ -100,7 +100,6 @@ textarea { border-radius: 0; padding: $input-spacing-y $input-spacing-x; outline: 0; - height: $input-height; width: 100%; box-shadow: none; transition: none; @@ -188,7 +187,7 @@ textarea { .input-group-text { padding: $input-spacing-y $input-spacing-x; border-bottom: 1px solid $input-border; - height: 100%; + border-radius: 0; } .input-group-prepend { diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index e4bedf3b9a..eb733678a6 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -7,11 +7,7 @@ color: #d9364f; } } -.input-number { - .form-feedback { - position: absolute; - } -} + .sr-only-justvalidate-bi { display: none; } @@ -21,6 +17,18 @@ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E"); } +input[aria-autocomplete] { + background-repeat: no-repeat; + background-size: 37px 21px; + background-position: right center; + &.just-validate-success-field { + border-bottom: 1px solid #008758; + } + &.is-invalid { + border-bottom: 1px solid #d9364f; + } +} + textarea { &.form-control { background-position: top 0.3em right 0.3em !important; From 004eb2293112f873f8b8c4da691af89b7b1046a5 Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Mon, 27 Nov 2023 12:52:38 +0100 Subject: [PATCH 09/27] fix: keep form-control class on autocomplete input --- src/js/plugins/select-autocomplete.js | 31 +++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/src/js/plugins/select-autocomplete.js b/src/js/plugins/select-autocomplete.js index 35e9017122..937ce70b39 100644 --- a/src/js/plugins/select-autocomplete.js +++ b/src/js/plugins/select-autocomplete.js @@ -3,14 +3,24 @@ import accessibleAutocomplete from 'accessible-autocomplete' import BaseComponent from 'bootstrap/js/src/base-component.js' const NAME = 'selectautocomplete' -//const DATA_KEY = 'bs.selectautocomplete' -//const EVENT_KEY = `.${DATA_KEY}` -//const DATA_API_KEY = '.data-api' + +function onClassChange(element, callback) { + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.type === 'attributes' && mutation.attributeName === 'class') { + callback(mutation.target) + } + }) + }) + observer.observe(element, { attributes: true }) + return observer.disconnect +} class SelectAutocomplete extends BaseComponent { constructor(element, config) { super(element) - + this._hasFormControl = element.classList.contains('form-control') + this.element_original_id = this._element.id this._config = config this._enhance() } @@ -21,11 +31,20 @@ class SelectAutocomplete extends BaseComponent { return NAME } - // Public - // Private _enhance() { accessibleAutocomplete.enhanceSelectElement(Object.assign({}, { selectElement: this._element }, this._config)) + setTimeout(() => { + if (this._hasFormControl) { + const inputField = document.getElementById(this.element_original_id) + inputField.classList.add('form-control') + onClassChange(inputField, (node) => { + if (!node.classList.contains('form-control')) { + node.classList.add('form-control') + } + }) + } + }, 100) } } From f4648569dc27a20f9253fa5eb61c250f748c4bac Mon Sep 17 00:00:00 2001 From: tempcode Date: Mon, 27 Nov 2023 13:37:49 +0100 Subject: [PATCH 10/27] fix: removed css code for autocomplete val fix: after add form-control class removed css rule --- src/scss/custom/_just-validate.scss | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index eb733678a6..07c3a15973 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -17,18 +17,6 @@ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E"); } -input[aria-autocomplete] { - background-repeat: no-repeat; - background-size: 37px 21px; - background-position: right center; - &.just-validate-success-field { - border-bottom: 1px solid #008758; - } - &.is-invalid { - border-bottom: 1px solid #d9364f; - } -} - textarea { &.form-control { background-position: top 0.3em right 0.3em !important; From b6a61c47485be930bc0cff021c98a53a5c7fe980 Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Mon, 27 Nov 2023 14:01:00 +0100 Subject: [PATCH 11/27] fix: input number label when value is null --- docs/esempi/form/index.html | 2 +- src/js/plugins/input-number.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/esempi/form/index.html b/docs/esempi/form/index.html index 3f8117168d..c60adb481c 100644 --- a/docs/esempi/form/index.html +++ b/docs/esempi/form/index.html @@ -46,7 +46,7 @@

Campi input

- diff --git a/src/js/plugins/input-number.js b/src/js/plugins/input-number.js index 0799a58796..7e6af2e3e2 100644 --- a/src/js/plugins/input-number.js +++ b/src/js/plugins/input-number.js @@ -61,6 +61,7 @@ class InputNumber extends BaseComponent { EventHandler.on(btn, EVENT_CLICK, (evt) => { evt.preventDefault() this._incrDecr(btn.classList.contains(CLASS_NAME_DECREMENT)) + this._label._labelOut() }) }) From 779f1b29767a3f0a248eb88f7ee99e7462e8b6ba Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Mon, 27 Nov 2023 14:17:08 +0100 Subject: [PATCH 12/27] fix: add form-feedback to autocomplete --- docs/esempi/form/index.html | 232 ++++++++++++++++++------------------ 1 file changed, 117 insertions(+), 115 deletions(-) diff --git a/docs/esempi/form/index.html b/docs/esempi/form/index.html index c60adb481c..f1f0de13a2 100644 --- a/docs/esempi/form/index.html +++ b/docs/esempi/form/index.html @@ -120,121 +120,123 @@

Autocomplete

-
- - +
+
+ + +
From 754d21eaee78d53efa9586172dcdff8f1428dae2 Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Mon, 27 Nov 2023 14:28:28 +0100 Subject: [PATCH 13/27] fix: add form-control to files --- docs/esempi/form/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/esempi/form/index.html b/docs/esempi/form/index.html index f1f0de13a2..4d08fa074f 100644 --- a/docs/esempi/form/index.html +++ b/docs/esempi/form/index.html @@ -308,7 +308,7 @@

File

- +
From c7eaf851202f8a1a4cc21e5a9afd175624e7fbef Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Mon, 27 Nov 2023 15:43:55 +0100 Subject: [PATCH 14/27] fix: trigger input on number change with buttons --- src/js/plugins/input-number.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/js/plugins/input-number.js b/src/js/plugins/input-number.js index 7e6af2e3e2..6722a47522 100644 --- a/src/js/plugins/input-number.js +++ b/src/js/plugins/input-number.js @@ -12,6 +12,7 @@ const DATA_API_KEY = '.data-api' const EVENT_CLICK = `click${EVENT_KEY}` const EVENT_CHANGE = `change${EVENT_KEY}` +const EVENT_INPUT = `input` //const EVENT_FOCUS_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY}` const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` @@ -102,6 +103,7 @@ class InputNumber extends BaseComponent { this._element.value = inputVal + step * (isDecr ? -1 : 1) EventHandler.trigger(this._element, EVENT_CHANGE) + EventHandler.trigger(this._element, EVENT_INPUT) } } From 6543b696ff996a3c50cdc1f2eb303023baf426b0 Mon Sep 17 00:00:00 2001 From: tempcode Date: Mon, 27 Nov 2023 15:47:50 +0100 Subject: [PATCH 15/27] fix: border color input currency --- src/scss/custom/_just-validate.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index 07c3a15973..57654f9a6a 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -8,6 +8,11 @@ } } +.input-group-text:has(+ .is-invalid), +.is-invalid + .input-group-text { + border-color: #d9364f; +} + .sr-only-justvalidate-bi { display: none; } @@ -16,6 +21,10 @@ padding-right: calc(1.5em + 0.75rem) !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E"); } +.input-group-text:has(+ .just-validate-success-field), +.just-validate-success-field + .input-group-text { + border-color: #d9364f; +} textarea { &.form-control { From 502ea6466f3da332565abc99980377aaee5581af Mon Sep 17 00:00:00 2001 From: tempcode Date: Mon, 27 Nov 2023 15:49:39 +0100 Subject: [PATCH 16/27] fix: success border color in currency --- src/scss/custom/_just-validate.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index 57654f9a6a..bd455cd0ff 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -23,7 +23,7 @@ } .input-group-text:has(+ .just-validate-success-field), .just-validate-success-field + .input-group-text { - border-color: #d9364f; + border-color: #008758; } textarea { From 832c141f90b2da6411a3f110a57619dcb395142b Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Mon, 27 Nov 2023 16:17:23 +0100 Subject: [PATCH 17/27] fix: remove currency label when input is empty --- src/scss/custom/_forms.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/scss/custom/_forms.scss b/src/scss/custom/_forms.scss index 9ecb56dc1f..0f9ea51fe7 100644 --- a/src/scss/custom/_forms.scss +++ b/src/scss/custom/_forms.scss @@ -59,6 +59,13 @@ fieldset { font-size: $small-font-size; color: $input-label-color; } + &:not(.active) { + & + .input-number-currency { + .input-group-text { + display: none; + } + } + } } input:is([type='radio']), From eacd6364625f63c6bed4351094ce6b5a2d1c09f3 Mon Sep 17 00:00:00 2001 From: tempcode Date: Mon, 27 Nov 2023 16:22:34 +0100 Subject: [PATCH 18/27] fix: same border color when focus currency --- src/scss/custom/_form-input-number.scss | 2 +- src/scss/custom/_just-validate.scss | 17 +++++++++++++++-- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/scss/custom/_form-input-number.scss b/src/scss/custom/_form-input-number.scss index dac7cd35c0..20f47be25c 100644 --- a/src/scss/custom/_form-input-number.scss +++ b/src/scss/custom/_form-input-number.scss @@ -58,7 +58,7 @@ } //add + sub buttons - button { + .input-group-text button { position: relative; transition: opacity 0.1s; padding: 0; diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index bd455cd0ff..6c66323e9f 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -8,8 +8,19 @@ } } +.input-group-text:has(+ .focus--mouse:not(.btn)), +.focus--mouse:not(.btn) + .input-group-text, +button:has(~ .focus--mouse:not(.btn)), +.focus--mouse:not(.btn) + button { + border-color: inherit !important; + box-shadow: none !important; + outline: none !important; +} + .input-group-text:has(+ .is-invalid), -.is-invalid + .input-group-text { +.is-invalid + .input-group-text, +button:has(~ .is-invalid), +.is-invalid + button { border-color: #d9364f; } @@ -22,7 +33,9 @@ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E"); } .input-group-text:has(+ .just-validate-success-field), -.just-validate-success-field + .input-group-text { +.just-validate-success-field + .input-group-text, +button:has(~ .just-validate-success-field), +.just-validate-success-field + button { border-color: #008758; } From fda7ac0578caabac2c2b5a2b9f9eccab78789f6b Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Mon, 27 Nov 2023 16:50:01 +0100 Subject: [PATCH 19/27] chore: linting --- src/scss/custom/_just-validate.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index 6c66323e9f..f7b03df581 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -12,9 +12,9 @@ .focus--mouse:not(.btn) + .input-group-text, button:has(~ .focus--mouse:not(.btn)), .focus--mouse:not(.btn) + button { - border-color: inherit !important; - box-shadow: none !important; - outline: none !important; + border-color: inherit !important; + box-shadow: none !important; + outline: none !important; } .input-group-text:has(+ .is-invalid), From af80e18e574c1c116c83cb1344f0b456de39383a Mon Sep 17 00:00:00 2001 From: tempcode Date: Mon, 27 Nov 2023 18:36:16 +0100 Subject: [PATCH 20/27] fix: moved button to align it with icons docs: updated documentation --- docs/esempi/form/index.html | 2 +- docs/form/input-numerico.md | 171 ++++++++++++++---------- src/scss/custom/_form-input-number.scss | 10 +- src/scss/custom/_just-validate.scss | 11 ++ 4 files changed, 121 insertions(+), 73 deletions(-) diff --git a/docs/esempi/form/index.html b/docs/esempi/form/index.html index 4d08fa074f..610b8ec4b2 100644 --- a/docs/esempi/form/index.html +++ b/docs/esempi/form/index.html @@ -90,7 +90,7 @@

Campi input

€ - + diff --git a/docs/form/input-numerico.md b/docs/form/input-numerico.md index 8f93125615..7ba1a74e8e 100644 --- a/docs/form/input-numerico.md +++ b/docs/form/input-numerico.md @@ -20,29 +20,37 @@ La larghezza del campo predefinita è quella del suo contenitore, per limitare l {% comment %}Example name: Base {% endcomment %} {% capture example %}
- - - - - - +
+ +
+ + + + + +
+
- - - - - - +
+ +
+ + + + + +
+
{% endcapture %}{% include example.html content=example %} @@ -53,16 +61,20 @@ Aggiungendo gli attributi HTML `min=""`, `max=""` e `step=""` all'input è possi {% comment %}Example name: Con limiti e incremento {% endcomment %} {% capture example %}
- - - - - - +
+ +
+ + + + + +
+
{% endcapture %}{% include example.html content=example %} @@ -72,17 +84,23 @@ Per anteporre il simbolo della valuta in Euro, aggiungere la classe `.input-numb {% comment %}Example name: Con valuta {% endcomment %} {% capture example %} +
- - - - - - +
+ +
+ € + + + + + +
+
{% endcapture %}{% include example.html content=example %} @@ -95,16 +113,21 @@ Si consiglia di impostare gli attributi `min=0` e `max="100"`. {% comment %}Example name: Con percentuale {% endcomment %} {% capture example %}
- - - - - - +
+ +
+ % + + + + + +
+
{% endcapture %}{% include example.html content=example %} @@ -116,16 +139,20 @@ Aggiungere anche l'attributo `disabled` al campo e ai pulsanti. {% comment %}Example name: Disabilitato {% endcomment %} {% capture example %}
- - - - - - +
+ +
+ + + + + +
+
{% endcapture %}{% include example.html content=example %} @@ -138,16 +165,20 @@ sufficiente aggiungere la classe `input-number-adaptive`. {% comment %}Example name: Con ridimensionamento {% endcomment %} {% capture example %}
- - - - - - +
+ +
+ + + + + +
+
{% endcapture %}{% include example.html content=example %} diff --git a/src/scss/custom/_form-input-number.scss b/src/scss/custom/_form-input-number.scss index 20f47be25c..b912dc8242 100644 --- a/src/scss/custom/_form-input-number.scss +++ b/src/scss/custom/_form-input-number.scss @@ -2,8 +2,7 @@ position: relative; &.input-number-adaptive { - width: auto; - display: inline; + width: fit-content; input[type='number'] { width: auto; transition: all 0.3s; @@ -58,6 +57,13 @@ } //add + sub buttons + .input-group-text.align-buttons { + position: absolute; + top: 0; + bottom: 0; + right: 0; + z-index: 10; + } .input-group-text button { position: relative; transition: opacity 0.1s; diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index f7b03df581..882425cf16 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -17,6 +17,7 @@ button:has(~ .focus--mouse:not(.btn)), outline: none !important; } +//same border color for element in input-group .input-group-text:has(+ .is-invalid), .is-invalid + .input-group-text, button:has(~ .is-invalid), @@ -39,6 +40,16 @@ button:has(~ .just-validate-success-field), border-color: #008758; } +//move buttons to make validation icon visible +.just-validate-success-field + .input-group-text.align-buttons, +.is-invalid + .input-group-text.align-buttons { + right: 30px; +} + +.is-invalid + .input-group-text.align-buttons { + bottom: 22px; //height of the form-feedback element +} + textarea { &.form-control { background-position: top 0.3em right 0.3em !important; From 7ecec60d371ed1c9a4f3eed478d3378c5e523bc9 Mon Sep 17 00:00:00 2001 From: tempcode Date: Mon, 27 Nov 2023 18:44:35 +0100 Subject: [PATCH 21/27] docs: removed d-flex class docs: removed old input currency style --- docs/esempi/form/index.html | 14 -------------- docs/form/input-numerico.md | 14 +++++++------- 2 files changed, 7 insertions(+), 21 deletions(-) diff --git a/docs/esempi/form/index.html b/docs/esempi/form/index.html index 610b8ec4b2..7936dab108 100644 --- a/docs/esempi/form/index.html +++ b/docs/esempi/form/index.html @@ -70,20 +70,6 @@

Campi input

-
-
- - - - - - -
-
diff --git a/docs/form/input-numerico.md b/docs/form/input-numerico.md index 7ba1a74e8e..6e90215eb5 100644 --- a/docs/form/input-numerico.md +++ b/docs/form/input-numerico.md @@ -24,7 +24,7 @@ La larghezza del campo predefinita è quella del suo contenitore, per limitare l
- + @@ -41,7 +41,7 @@ La larghezza del campo predefinita è quella del suo contenitore, per limitare l
- + @@ -65,7 +65,7 @@ Aggiungendo gli attributi HTML `min=""`, `max=""` e `step=""` all'input è possi
- + @@ -91,7 +91,7 @@ Per anteporre il simbolo della valuta in Euro, aggiungere la classe `.input-numb
€ - + @@ -118,7 +118,7 @@ Si consiglia di impostare gli attributi `min=0` e `max="100"`.
% - + @@ -143,7 +143,7 @@ Aggiungere anche l'attributo `disabled` al campo e ai pulsanti.
- + @@ -169,7 +169,7 @@ sufficiente aggiungere la classe `input-number-adaptive`.
- + From 48006bcae116db81380e19978fe0d34b87059e14 Mon Sep 17 00:00:00 2001 From: tempcode Date: Tue, 28 Nov 2023 11:21:42 +0100 Subject: [PATCH 22/27] fix: disabled input-numerico, resize input-group fix: disabled, use same background color of other input fix: disabled, improved contrast from value to background fix: disabled, apply background to input-group items fix: resize input-group no need different behavior --- src/js/plugins/input-number.js | 11 +++------- src/scss/custom/_form-input-number.scss | 27 +++++++++---------------- 2 files changed, 13 insertions(+), 25 deletions(-) diff --git a/src/js/plugins/input-number.js b/src/js/plugins/input-number.js index 6722a47522..5fcc13fff8 100644 --- a/src/js/plugins/input-number.js +++ b/src/js/plugins/input-number.js @@ -74,14 +74,9 @@ class InputNumber extends BaseComponent { if (this._wrapperElement.classList.contains(CLASS_NAME_ADAPTIVE)) { let newWidth = null //let newWidthIE = null - if (!this._wrapperElement.classList.contains(CLASS_NAME_PERCENTAGE)) { - newWidth = 'calc(44px + ' + this._element.value.length + 'ch)' - //newWidthIE = 'calc(44px + (1.5 * ' + this._element.value.length + 'ch))' - } - if (this._wrapperElement.classList.contains(CLASS_NAME_CURRENCY)) { - newWidth = 'calc(40px + 44px + ' + this._element.value.length + 'ch)' - //newWidthIE = 'calc(40px + 44px + (1.5 * ' + this._element.value.length + 'ch))' - } + //74px - buttons (30px) and possible validation icon (40px) + newWidth = 'calc(70px + ' + this._element.value.length + 'ch)' + //newWidthIE = 'calc(44px + (1.5 * ' + this._element.value.length + 'ch))' if (newWidth) { this._element.style.width = newWidth diff --git a/src/scss/custom/_form-input-number.scss b/src/scss/custom/_form-input-number.scss index b912dc8242..6b9a00a5d4 100644 --- a/src/scss/custom/_form-input-number.scss +++ b/src/scss/custom/_form-input-number.scss @@ -30,30 +30,23 @@ //disabled version &.disabled { input[type='number'] { - background-color: transparent; - color: $gray-label-disabled; - border-bottom-color: $gray-border-disabled; + background-color: $gray-disabled; + color: $gray-800; &:hover { cursor: not-allowed; color: $gray-label-disabled; } } - button { - pointer-events: none; - &:hover { - cursor: not-allowed; - } - &.input-number-add { - &:after { - border-color: transparent transparent $gray-border-disabled transparent; - } - } - &.input-number-sub { - &:after { - border-color: $gray-border-disabled transparent transparent transparent; + .input-group-text { + background-color: $gray-disabled; + color: $gray-800; + button { + pointer-events: none; + &:hover { + cursor: not-allowed; } } - } + } } //add + sub buttons From 648b415c4fe1be0822b4ea205bbeac6c448e4f64 Mon Sep 17 00:00:00 2001 From: tempcode Date: Tue, 28 Nov 2023 11:24:29 +0100 Subject: [PATCH 23/27] fix: removed unused const --- src/js/plugins/input-number.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/js/plugins/input-number.js b/src/js/plugins/input-number.js index 5fcc13fff8..4361cedda6 100644 --- a/src/js/plugins/input-number.js +++ b/src/js/plugins/input-number.js @@ -20,8 +20,6 @@ const EVENT_MOUSEDOWN_DATA_API = `mousedown${EVENT_KEY}${DATA_API_KEY}` const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}` const CLASS_NAME_ADAPTIVE = 'input-number-adaptive' -const CLASS_NAME_PERCENTAGE = 'input-number-percentage' -const CLASS_NAME_CURRENCY = 'input-number-currency' //const CLASS_NAME_INCREMENT = 'input-number-add' const CLASS_NAME_DECREMENT = 'input-number-sub' From 9d322b510c66ccd865c85927a6758c0ca01adf0d Mon Sep 17 00:00:00 2001 From: tempcode Date: Tue, 28 Nov 2023 11:28:53 +0100 Subject: [PATCH 24/27] chore: linting --- src/scss/custom/_form-input-number.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/custom/_form-input-number.scss b/src/scss/custom/_form-input-number.scss index 6b9a00a5d4..5a8589fc12 100644 --- a/src/scss/custom/_form-input-number.scss +++ b/src/scss/custom/_form-input-number.scss @@ -46,7 +46,7 @@ cursor: not-allowed; } } - } + } } //add + sub buttons From d86ecc3dad97821efc45bb761bc1d583a554377d Mon Sep 17 00:00:00 2001 From: tempcode Date: Tue, 28 Nov 2023 11:40:21 +0100 Subject: [PATCH 25/27] fix: removed validation code for old field --- docs/esempi/form/index.html | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/docs/esempi/form/index.html b/docs/esempi/form/index.html index 7936dab108..6b098789a2 100644 --- a/docs/esempi/form/index.html +++ b/docs/esempi/form/index.html @@ -364,17 +364,6 @@

File

errorMessage: 'Questo campo è richiesto', }, ]) - .addField('#importo', [ - { - rule: 'required', - errorMessage: 'Questo campo è richiesto', - }, - { - rule: 'minNumber', - value: 3.50, - errorMessage: 'Deve essere maggiore di 3.50', - } - ]) .addField('#importo_input_group', [ { rule: 'required', From 78ed173964d3e95bc19cd41ae5fb456111647bef Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Tue, 28 Nov 2023 23:17:55 +0100 Subject: [PATCH 26/27] fix: autocomplete error message position --- src/scss/custom/_just-validate.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/scss/custom/_just-validate.scss b/src/scss/custom/_just-validate.scss index 882425cf16..c7f734cefb 100644 --- a/src/scss/custom/_just-validate.scss +++ b/src/scss/custom/_just-validate.scss @@ -50,6 +50,12 @@ button:has(~ .just-validate-success-field), bottom: 22px; //height of the form-feedback element } +.autocomplete__wrapper { + .form-feedback.just-validate-error-label { + position: absolute; + } +} + textarea { &.form-control { background-position: top 0.3em right 0.3em !important; From e2dfb173eeebaa6fd9947eb13c7f9491b5b83ba8 Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Tue, 5 Dec 2023 16:02:07 +0100 Subject: [PATCH 27/27] chore: add includes example for autocomplete form --- docs/esempi/form/index.html | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/esempi/form/index.html b/docs/esempi/form/index.html index 6b098789a2..a21cc90cd2 100644 --- a/docs/esempi/form/index.html +++ b/docs/esempi/form/index.html @@ -363,6 +363,12 @@

File

rule: 'required', errorMessage: 'Questo campo è richiesto', }, + { + validator: (value) => { + return ['Alessandria', 'Bergamo', 'Piacenza'].includes(value); + }, + errorMessage: 'Puoi scegliere solo tra Alessandria, Piacenza o Bergamo', + }, ]) .addField('#importo_input_group', [ {