@optionfactory/ful 0.35.0 → 0.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ful.css +1 -1
- package/dist/ful.css.map +1 -1
- package/dist/ful.iife.js +58 -173
- package/dist/ful.iife.js.map +1 -1
- package/dist/ful.iife.min.js +1 -1
- package/dist/ful.iife.min.js.map +1 -1
- package/dist/ful.min.mjs +1 -1
- package/dist/ful.min.mjs.map +1 -1
- package/dist/ful.mjs +59 -170
- package/dist/ful.mjs.map +1 -1
- package/package.json +1 -1
package/dist/ful.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
ful-errors:
|
|
1
|
+
ful-errors{--ful-errors-color:var(--bs-danger-text-emphasis);--ful-errors-bg:var(--bs-danger-bg-subtle);--ful-errors-border-color:var(--bs-danger-border-subtle);--ful-errors-border-radius:0.375rem;background-color:var(--ful-errors-bg);border:1px solid var(--ful-errors-border-color);border-radius:var(--ful-errors-border-radius);color:var(--ful-errors-color);display:block;margin-bottom:1rem;padding:1rem}.validated-input:has(.is-invalid) ful-field-error,ful-input:has(.is-invalid) ful-field-error,ful-radio-group:has(.is-invalid) ful-field-error,ful-select:has(.is-invalid) ful-field-error{color:var(--bs-form-invalid-color);display:block;font-size:.875em;margin-top:.25rem}ful-input:not(:defined){visibility:hidden}ful-input{display:block}ful-input:has(.is-invalid) ful-field-error{display:block}ful-select:not(:defined){visibility:hidden}ful-select{display:block}ful-select .ts-control{border-radius:inherit!important}ful-select:has(.is-invalid) .invalid-feedback{display:block}ful-select:has(.is-invalid) .form-control,ful-select:has(.is-invalid) .form-select{border-color:var(--bs-form-invalid-border-color)!important}ful-select:has(.is-invalid) .focus .ts-control{box-shadow:0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)}ful-radio-group:not(:defined){visibility:hidden}ful-radio{display:none}ful-radio-group{--ful-radio-group-label-border-color:var(--bs-border-color);--ful-radio-group-label-border-color-checked:#46ce95;--ful-radio-group-label-background-color:inherit;--ful-radio-group-label-background-color-checked:#f5fffc;display:block}ful-radio-group>fieldset legend{font-size:16px;line-height:22px;margin:0}ful-radio-group>fieldset>section{display:grid;gap:10px;grid-template-columns:1fr}ful-radio-group.horizontal>fieldset>section{gap:16px;grid-template-columns:1fr 1fr}ful-radio-group>fieldset input[type=radio]{height:16px;margin-left:8px;margin-right:12px;vertical-align:text-bottom;width:16px}ful-radio-group>fieldset label:has(input[type=radio]){background-color:var(--ful-radio-group-label-background-color);border:1px solid var(--ful-radio-group-label-border-color);border-radius:4px;display:block;padding:6px 10px}ful-radio-group>fieldset label:has(input[type=radio].is-invalid){border-color:var(--bs-form-invalid-border-color)}ful-radio-group>fieldset label:has(input[type=radio]:checked){background-color:var(--ful-radio-group-label-background-color-checked);border-color:var(--ful-radio-group-label-border-color-checked)}ful-radio-group:has(.is-invalid) ful-field-error{display:block}ful-spinner:not(:defined){visibility:hidden}ful-spinner{--ful-spinner-icon-width:1rem;--ful-spinner-icon-height:1rem;--ful-spinner-icon-border-width:0.2em;--ful-spinner-icon-vertical-align:-0.125em;--ful-spinner-icon-animation-speed:0.75s;--ful-spinner-icon-animation-name:spinner-border;--ful-spinner-icon-color:currentcolor}ful-spinner.centered{align-items:center;display:flex;justify-content:center}ful-spinner.big{--ful-spinner-icon-width:2rem;--ful-spinner-icon-height:2rem;--ful-spinner-icon-border-width:0.25em}ful-spinner.backdrop,ful-spinner.bigger{--ful-spinner-icon-width:4rem;--ful-spinner-icon-height:4rem;--ful-spinner-icon-border-width:0.5em}ful-spinner.backdrop{align-items:center;background-color:hsla(0,0%,65%,.8);display:flex;height:100vh;justify-content:center;left:0;outline:0;overflow-x:hidden;overflow-y:auto;position:fixed;top:0;width:100vw;z-index:2000}ful-spinner>.ful-spinner-wrapper{display:inline}ful-spinner.backdrop>.ful-spinner-wrapper{background-color:#fff;border-radius:1rem;padding:2rem}ful-spinner>.ful-spinner-wrapper>.ful-spinner-icon{animation:var(--ful-spinner-icon-animation-speed) linear infinite var(--ful-spinner-icon-animation-name);border:var(--ful-spinner-icon-border-width) solid var(--ful-spinner-icon-color);border-radius:50%;border-right-color:transparent;display:inline-block;height:var(--ful-spinner-icon-height);vertical-align:var(--ful-spinner-icon-vertical-align);width:var(--ful-spinner-icon-width)}body:has(ful-spinner.backdrop:not([hidden])){overflow:hidden}ful-wizard:not(:defined){visibility:hidden}ful-wizard,ful-wizard>ol>li.active{display:block}ful-wizard>ol>li,ful-wizard>section{display:none}ful-wizard>section.current{display:block}
|
|
2
2
|
/*# sourceMappingURL=ful.css.map */
|
package/dist/ful.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["errors.scss","input.scss","select.scss","radio.scss","spinner.scss","wizard.scss"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["errors.scss","input.scss","select.scss","radio.scss","spinner.scss","wizard.scss"],"names":[],"mappings":"AAAA,WACE,iDAAkD,CAClD,0CAA2C,CAC3C,wDAAyD,CACzD,mCAAoC,CAKpC,qCAAsC,CACtC,+CAAgD,CAChD,6CAA8C,CAH9C,6BAA8B,CAH9B,aAAc,CAEd,kBAAmB,CADnB,YAMF,CAEA,0LAOE,kCAAmC,CAHnC,aAAc,CAEd,gBAAkB,CADlB,iBAGF,CCtBA,wBACE,iBACF,CAEA,UACE,aACF,CAEA,2CACE,aACF,CCVA,yBACE,iBACF,CAEA,WACE,aACF,CAEA,uBAEE,+BACF,CAEA,8CACE,aACF,CAEA,mFAEE,0DACF,CAEA,+CACE,sDACF,CCxBA,8BACE,iBACF,CAEA,UACE,YACF,CAEA,gBAEE,2DAA4D,CAC5D,oDAAqD,CACrD,gDAAiD,CACjD,wDAAyD,CAJzD,aAKF,CAEA,gCAEE,cAAe,CADf,gBAAiB,CAEjB,QACF,CAEA,iCACE,YAAa,CACb,QAAS,CACT,yBACF,CAEA,4CACE,QAAS,CACT,6BACF,CAEA,2CAGE,WAAY,CAFZ,eAAgB,CAChB,iBAAkB,CAGlB,0BAA2B,CAD3B,UAEF,CAEA,sDAGE,8DAA+D,CAD/D,0DAA2D,CAE3D,iBAAkB,CAHlB,aAAc,CAId,gBACF,CAEA,iEACE,gDACF,CAEA,8DACE,sEAAuE,CACvE,8DACF,CAEA,iDACE,aACF,CC5DA,0BACE,iBACF,CAEA,YACE,6BAA8B,CAC9B,8BAA+B,CAC/B,qCAAsC,CACtC,0CAA2C,CAC3C,wCAAyC,CACzC,gDAAiD,CACjD,qCACF,CAEA,qBAEE,kBAAmB,CADnB,YAAa,CAEb,sBACF,CAEA,gBACE,6BAA8B,CAC9B,8BAA+B,CAC/B,sCACF,CAQA,wCALE,6BAA8B,CAC9B,8BAA+B,CAC/B,qCAoBF,CAjBA,qBAeE,kBAAmB,CAFnB,kCAA0C,CAC1C,YAAa,CALb,YAAa,CAOb,sBAAuB,CATvB,MAAO,CAKP,SAAU,CAFV,iBAAkB,CAClB,eAAgB,CANhB,cAAe,CACf,KAAM,CAEN,WAAY,CAJZ,YAaF,CAEA,iCACE,cACF,CAEA,0CAEE,qBAAuB,CACvB,kBAAmB,CAFnB,YAGF,CAEA,mDAQE,wGAAyG,CAFzG,+EAAgF,CADhF,iBAAkB,CAElB,8BAA+B,CAN/B,oBAAqB,CAErB,qCAAsC,CACtC,qDAAsD,CAFtD,mCAOF,CAEA,6CACE,eACF,CC1EA,yBACE,iBACF,CAMA,mCACE,aACF,CAMA,oCACE,YACF,CAEA,2BACE,aACF","file":"ful.css","sourcesContent":["ful-errors {\n --ful-errors-color: var(--bs-danger-text-emphasis);\n --ful-errors-bg: var(--bs-danger-bg-subtle);\n --ful-errors-border-color: var(--bs-danger-border-subtle);\n --ful-errors-border-radius: 0.375rem;\n display: block;\n padding: 1rem;\n margin-bottom: 1rem;\n color: var(--ful-errors-color);\n background-color: var(--ful-errors-bg);\n border: 1px solid var(--ful-errors-border-color);\n border-radius: var(--ful-errors-border-radius);\n}\n\n.validated-input:has(.is-invalid) ful-field-error,\nful-input:has(.is-invalid) ful-field-error,\nful-select:has(.is-invalid) ful-field-error,\nful-radio-group:has(.is-invalid) ful-field-error {\n display: block;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: var(--bs-form-invalid-color);\n}","ful-input:not(:defined) {\n visibility: hidden;\n}\n\nful-input {\n display: block;\n}\n\nful-input:has(.is-invalid) ful-field-error {\n display: block;\n}","ful-select:not(:defined) {\n visibility: hidden;\n}\n\nful-select {\n display: block;\n}\n\nful-select .ts-control {\n /*fixes border radius on box-shadow*/\n border-radius: inherit !important;\n}\n\nful-select:has(.is-invalid) .invalid-feedback {\n display: block;\n}\n\nful-select:has(.is-invalid) .form-select,\nful-select:has(.is-invalid) .form-control {\n border-color: var(--bs-form-invalid-border-color) !important;\n}\n\nful-select:has(.is-invalid) .focus .ts-control {\n box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);\n}","ful-radio-group:not(:defined) {\n visibility: hidden;\n}\n\nful-radio {\n display: none;\n}\n\nful-radio-group {\n display: block;\n --ful-radio-group-label-border-color: var(--bs-border-color);\n --ful-radio-group-label-border-color-checked: #46ce95;\n --ful-radio-group-label-background-color: inherit;\n --ful-radio-group-label-background-color-checked: #f5fffc;\n}\n\nful-radio-group > fieldset legend {\n line-height: 22px;\n font-size: 16px;\n margin: 0;\n}\n\nful-radio-group > fieldset > section {\n display: grid;\n gap: 10px;\n grid-template-columns: 1fr;\n}\n\nful-radio-group.horizontal > fieldset > section {\n gap: 16px;\n grid-template-columns: 1fr 1fr;\n}\n\nful-radio-group > fieldset input[type=radio] {\n margin-left: 8px;\n margin-right: 12px;\n height: 16px;\n width: 16px;\n vertical-align: text-bottom;\n}\n\nful-radio-group > fieldset label:has(input[type=radio]) {\n display: block;\n border: 1px solid var(--ful-radio-group-label-border-color);\n background-color: var(--ful-radio-group-label-background-color);\n border-radius: 4px;\n padding: 6px 10px;\n}\n\nful-radio-group > fieldset label:has(input[type=radio].is-invalid) {\n border-color: var(--bs-form-invalid-border-color);\n}\n\nful-radio-group > fieldset label:has(input[type=radio]:checked) {\n background-color: var(--ful-radio-group-label-background-color-checked);\n border-color: var(--ful-radio-group-label-border-color-checked);\n}\n\nful-radio-group:has(.is-invalid) ful-field-error {\n display: block;\n}","ful-spinner:not(:defined) {\n visibility: hidden;\n}\n\nful-spinner {\n --ful-spinner-icon-width: 1rem;\n --ful-spinner-icon-height: 1rem;\n --ful-spinner-icon-border-width: 0.2em;\n --ful-spinner-icon-vertical-align: -0.125em;\n --ful-spinner-icon-animation-speed: 0.75s;\n --ful-spinner-icon-animation-name: spinner-border;\n --ful-spinner-icon-color: currentcolor;\n}\n\nful-spinner.centered {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\nful-spinner.big {\n --ful-spinner-icon-width: 2rem;\n --ful-spinner-icon-height: 2rem;\n --ful-spinner-icon-border-width: 0.25em;\n}\n\nful-spinner.bigger {\n --ful-spinner-icon-width: 4rem;\n --ful-spinner-icon-height: 4rem;\n --ful-spinner-icon-border-width: 0.5em;\n}\n\nful-spinner.backdrop {\n --ful-spinner-icon-width: 4rem;\n --ful-spinner-icon-height: 4rem;\n --ful-spinner-icon-border-width: 0.5em;\n z-index: 2000;\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n height: 100vh;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n background-color: rgba(167, 167, 167, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\nful-spinner > .ful-spinner-wrapper {\n display: inline;\n}\n\nful-spinner.backdrop > .ful-spinner-wrapper {\n padding: 2rem;\n background-color: white;\n border-radius: 1rem;\n}\n\nful-spinner > .ful-spinner-wrapper > .ful-spinner-icon {\n display: inline-block;\n width: var(--ful-spinner-icon-width);\n height: var(--ful-spinner-icon-height);\n vertical-align: var(--ful-spinner-icon-vertical-align);\n border-radius: 50%;\n border: var(--ful-spinner-icon-border-width) solid var(--ful-spinner-icon-color);\n border-right-color: transparent;\n animation: var(--ful-spinner-icon-animation-speed) linear infinite var(--ful-spinner-icon-animation-name);\n}\n\nbody:has(ful-spinner.backdrop:not([hidden])) {\n overflow: hidden;\n}","ful-wizard:not(:defined) {\n visibility: hidden;\n}\n\nful-wizard {\n display: block;\n}\n\nful-wizard > ol > li.active {\n display: block;\n}\n\nful-wizard > ol > li {\n display: none;\n}\n\nful-wizard > section {\n display: none;\n}\n\nful-wizard > section.current {\n display: block;\n}"]}
|
package/dist/ful.iife.js
CHANGED
|
@@ -73,38 +73,6 @@ var ful = (function (exports) {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
const Observable = (SuperClass) => class extends SuperClass {
|
|
77
|
-
constructor(...args) {
|
|
78
|
-
super(...args);
|
|
79
|
-
this.listeners = {};
|
|
80
|
-
}
|
|
81
|
-
fireSync(event, data, initialAcc) {
|
|
82
|
-
const listeners = this.listeners[event] || [];
|
|
83
|
-
let acc = initialAcc;
|
|
84
|
-
for (const l of listeners) {
|
|
85
|
-
acc = l(data, this, acc);
|
|
86
|
-
}
|
|
87
|
-
return acc;
|
|
88
|
-
}
|
|
89
|
-
async fire(event, data, initialAcc) {
|
|
90
|
-
const listeners = this.listeners[event] || [];
|
|
91
|
-
let acc = initialAcc;
|
|
92
|
-
for (const l of listeners) {
|
|
93
|
-
acc = await l(data, this, acc);
|
|
94
|
-
}
|
|
95
|
-
return acc;
|
|
96
|
-
}
|
|
97
|
-
on(event, listener) {
|
|
98
|
-
this.listeners[event] = this.listeners[event] || [];
|
|
99
|
-
this.listeners[event].push(listener);
|
|
100
|
-
}
|
|
101
|
-
un(event, listener) {
|
|
102
|
-
const listeners = this.listeners[event] || [];
|
|
103
|
-
const idx = listeners.indexOf(listener);
|
|
104
|
-
return idx === -1 ? [] : listeners.splice(idx, 1);
|
|
105
|
-
}
|
|
106
|
-
};
|
|
107
|
-
|
|
108
76
|
class ContextInterceptor {
|
|
109
77
|
constructor() {
|
|
110
78
|
const context = document.querySelector("meta[name='context']").getAttribute("content");
|
|
@@ -730,35 +698,14 @@ var ful = (function (exports) {
|
|
|
730
698
|
};
|
|
731
699
|
};
|
|
732
700
|
|
|
733
|
-
class FieldError extends Templated(HTMLElement) {
|
|
734
|
-
render(slotted, template) {
|
|
735
|
-
this.classList.add('invalid-feedback');
|
|
736
|
-
}
|
|
737
|
-
static configure() {
|
|
738
|
-
customElements.define('ful-field-error', FieldError);
|
|
739
|
-
}
|
|
740
|
-
}
|
|
741
|
-
|
|
742
|
-
class Errors extends Templated(HTMLElement) {
|
|
743
|
-
render(slotted, template) {
|
|
744
|
-
this.classList.add('alert', 'alert-danger', 'd-none');
|
|
745
|
-
}
|
|
746
|
-
static configure() {
|
|
747
|
-
customElements.define('ful-errors', Errors);
|
|
748
|
-
}
|
|
749
|
-
|
|
750
|
-
}
|
|
751
|
-
|
|
752
701
|
/* global Infinity, CSS */
|
|
753
702
|
|
|
754
|
-
class Form extends Templated(
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
this.ignoredChildrenSelector = ignoredChildrenSelector || '.d-none, [hidden]';
|
|
761
|
-
}
|
|
703
|
+
class Form extends Templated(HTMLElement) {
|
|
704
|
+
static MUTATORS = {};
|
|
705
|
+
static EXTRACTORS = {};
|
|
706
|
+
static VALUE_HOLDERS_SELECTOR = '[name]';
|
|
707
|
+
static IGNORED_CHILDREN_SELECTOR = '.d-none, [hidden]';
|
|
708
|
+
|
|
762
709
|
render(slotted, template) {
|
|
763
710
|
const form = document.createElement('form');
|
|
764
711
|
form.append(slotted.default);
|
|
@@ -766,7 +713,9 @@ var ful = (function (exports) {
|
|
|
766
713
|
e.preventDefault();
|
|
767
714
|
this.spinner(true);
|
|
768
715
|
try {
|
|
769
|
-
|
|
716
|
+
if(this.submitter) {
|
|
717
|
+
await this.submitter(this.getValues(), this);
|
|
718
|
+
}
|
|
770
719
|
} catch (e) {
|
|
771
720
|
if (e instanceof Failure) {
|
|
772
721
|
this.setErrors(e.problems);
|
|
@@ -793,20 +742,20 @@ var ful = (function (exports) {
|
|
|
793
742
|
continue;
|
|
794
743
|
}
|
|
795
744
|
Array.from(this.querySelectorAll(`[name='${CSS.escape(k)}']`)).forEach((el) => {
|
|
796
|
-
Form.mutate(
|
|
745
|
+
Form.mutate(Form.MUTATORS, el, values[k], k, values);
|
|
797
746
|
});
|
|
798
747
|
}
|
|
799
748
|
}
|
|
800
749
|
getValues() {
|
|
801
|
-
return Array.from(this.querySelectorAll(
|
|
750
|
+
return Array.from(this.querySelectorAll(Form.VALUE_HOLDERS_SELECTOR))
|
|
802
751
|
.filter((el) => {
|
|
803
752
|
if (el.dataset['fulBindInclude'] === 'never') {
|
|
804
753
|
return false;
|
|
805
754
|
}
|
|
806
|
-
return el.dataset['fulBindInclude'] === 'always' || el.closest(
|
|
755
|
+
return el.dataset['fulBindInclude'] === 'always' || el.closest(Form.IGNORED_CHILDREN_SELECTOR) === null;
|
|
807
756
|
})
|
|
808
757
|
.reduce((result, el) => {
|
|
809
|
-
return Form.providePath(result, el.getAttribute('name'), Form.extract(
|
|
758
|
+
return Form.providePath(result, el.getAttribute('name'), Form.extract(Form.EXTRACTORS, el));
|
|
810
759
|
}, {});
|
|
811
760
|
}
|
|
812
761
|
setErrors(errors, scroll) {
|
|
@@ -815,13 +764,10 @@ var ful = (function (exports) {
|
|
|
815
764
|
.filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT')
|
|
816
765
|
.forEach((e) => {
|
|
817
766
|
const name = e.context.replace("[", ".").replace("].", ".");
|
|
767
|
+
//TODO: match [name=] ful-validation-target and [name=]:not(:has(ful-validation-target))
|
|
768
|
+
//
|
|
818
769
|
this.querySelectorAll(`[name='${CSS.escape(name)}']`)
|
|
819
|
-
.forEach(input =>
|
|
820
|
-
input.classList.add('is-invalid');
|
|
821
|
-
if (input.parentElement.classList.contains("form-floating")) {
|
|
822
|
-
input.parentElement.classList.add('is-invalid');
|
|
823
|
-
}
|
|
824
|
-
});
|
|
770
|
+
.forEach(input => input.classList.add('is-invalid'));
|
|
825
771
|
this.querySelectorAll(`ful-field-error[field='${CSS.escape(name)}']`)
|
|
826
772
|
.forEach(el => el.innerText = e.reason);
|
|
827
773
|
});
|
|
@@ -830,14 +776,14 @@ var ful = (function (exports) {
|
|
|
830
776
|
const globalErrors = errors.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
|
|
831
777
|
el.innerHTML = globalErrors.map(e => e.reason).join("\n");
|
|
832
778
|
if (globalErrors.length !== 0) {
|
|
833
|
-
el.
|
|
779
|
+
el.removeAttribute('hidden');
|
|
834
780
|
}
|
|
835
781
|
});
|
|
836
782
|
|
|
837
783
|
if (!scroll) {
|
|
838
784
|
return;
|
|
839
785
|
}
|
|
840
|
-
const ys = Array.from(this.querySelectorAll('ful-field-error
|
|
786
|
+
const ys = Array.from(this.querySelectorAll('ful-field-error'))
|
|
841
787
|
.map(el => el.getBoundingClientRect().y + window.scrollY);
|
|
842
788
|
const miny = Math.min(...ys);
|
|
843
789
|
if (miny !== Infinity) {
|
|
@@ -845,12 +791,12 @@ var ful = (function (exports) {
|
|
|
845
791
|
}
|
|
846
792
|
}
|
|
847
793
|
clearErrors() {
|
|
848
|
-
this.querySelectorAll('
|
|
794
|
+
this.querySelectorAll('.is-invalid')
|
|
849
795
|
.forEach(el => el.classList.remove('is-invalid'));
|
|
850
796
|
this.querySelectorAll("ful-errors")
|
|
851
797
|
.forEach(el => {
|
|
852
798
|
el.innerHTML = '';
|
|
853
|
-
el.
|
|
799
|
+
el.setAttribute('hidden', '');
|
|
854
800
|
});
|
|
855
801
|
}
|
|
856
802
|
static extract(extractors, el) {
|
|
@@ -870,9 +816,6 @@ var ful = (function (exports) {
|
|
|
870
816
|
if (el.dataset['fulBindType'] === 'boolean') {
|
|
871
817
|
return !el.value ? null : el.value === 'true';
|
|
872
818
|
}
|
|
873
|
-
if (el.getValue) {
|
|
874
|
-
return el.getValue();
|
|
875
|
-
}
|
|
876
819
|
return el.value || null;
|
|
877
820
|
}
|
|
878
821
|
static mutate(mutators, el, raw, key, values) {
|
|
@@ -889,10 +832,6 @@ var ful = (function (exports) {
|
|
|
889
832
|
el.checked = raw;
|
|
890
833
|
return;
|
|
891
834
|
}
|
|
892
|
-
if (el.setValue) {
|
|
893
|
-
el.setValue(raw);
|
|
894
|
-
return;
|
|
895
|
-
}
|
|
896
835
|
el.value = raw;
|
|
897
836
|
}
|
|
898
837
|
|
|
@@ -936,35 +875,19 @@ var ful = (function (exports) {
|
|
|
936
875
|
});
|
|
937
876
|
|
|
938
877
|
const ful_input_template_ = globalThis.ful_input_template || ftl.Template.fromHtml(`
|
|
939
|
-
<
|
|
878
|
+
<label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
|
|
879
|
+
<div class="input-group">
|
|
940
880
|
<span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
|
|
941
881
|
<div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
|
|
942
|
-
|
|
943
|
-
{{{{ slotted.input }}}}
|
|
944
|
-
<label data-tpl-for="name" class="form-label">{{{{ slotted.default }}}}</label>
|
|
945
|
-
</div>
|
|
882
|
+
{{{{ slotted.input }}}}
|
|
946
883
|
<div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
|
|
947
884
|
<span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
|
|
948
|
-
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
949
|
-
</div>
|
|
950
|
-
<div data-tpl-if="!floating" data-tpl-remove="tag">
|
|
951
|
-
<label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
|
|
952
|
-
<div class="input-group has-validation">
|
|
953
|
-
<span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
|
|
954
|
-
<div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
|
|
955
|
-
{{{{ slotted.input }}}}
|
|
956
|
-
<div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
|
|
957
|
-
<span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
|
|
958
|
-
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
959
|
-
</div>
|
|
960
885
|
</div>
|
|
886
|
+
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
961
887
|
`, ful_input_ec);
|
|
962
888
|
|
|
963
|
-
|
|
964
|
-
|
|
965
889
|
class Input extends Templated(HTMLElement, ful_input_template_) {
|
|
966
890
|
render(slotted, template) {
|
|
967
|
-
const floating = this.hasAttribute('floating');
|
|
968
891
|
const input = slotted.input = slotted.input || (() => {
|
|
969
892
|
const el = document.createElement("input");
|
|
970
893
|
el.classList.add("form-control");
|
|
@@ -976,7 +899,7 @@ var ful = (function (exports) {
|
|
|
976
899
|
Attributes.defaultValue(slotted.input, "type", "text");
|
|
977
900
|
Attributes.defaultValue(slotted.input, "placeholder", " ");
|
|
978
901
|
const name = input.getAttribute('name');
|
|
979
|
-
return template.render({ id, name,
|
|
902
|
+
return template.render({ id, name, slotted });
|
|
980
903
|
}
|
|
981
904
|
static configure() {
|
|
982
905
|
customElements.define('ful-input', Input);
|
|
@@ -992,30 +915,16 @@ var ful = (function (exports) {
|
|
|
992
915
|
});
|
|
993
916
|
|
|
994
917
|
const ful_select_template_ = globalThis.ful_select_template || ftl.Template.fromHtml(`
|
|
995
|
-
<
|
|
918
|
+
<label data-tpl-for="tsId" class="form-label">{{{{ slotted.default }}}}</label>
|
|
919
|
+
{{{{ input }}}}
|
|
920
|
+
<div class="input-group">
|
|
996
921
|
<span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
|
|
997
922
|
<div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
|
|
998
|
-
|
|
999
|
-
{{{{ slotted.input }}}}
|
|
1000
|
-
{{{{ input }}}}
|
|
1001
|
-
<label data-tpl-for="name" class="form-label">{{{{ slotted.default }}}}</label>
|
|
1002
|
-
</div>
|
|
923
|
+
{{{{ slotted.input }}}}
|
|
1003
924
|
<div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
|
|
1004
925
|
<span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
|
|
1005
|
-
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
1006
|
-
</div>
|
|
1007
|
-
<div data-tpl-if="!floating" data-tpl-remove="tag">
|
|
1008
|
-
<label data-tpl-for="tsId" class="form-label">{{{{ slotted.default }}}}</label>
|
|
1009
|
-
{{{{ input }}}}
|
|
1010
|
-
<div class="input-group has-validation">
|
|
1011
|
-
<span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
|
|
1012
|
-
<div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
|
|
1013
|
-
{{{{ slotted.input }}}}
|
|
1014
|
-
<div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
|
|
1015
|
-
<span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
|
|
1016
|
-
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
1017
|
-
</div>
|
|
1018
926
|
</div>
|
|
927
|
+
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
1019
928
|
`, ful_select_ec);
|
|
1020
929
|
|
|
1021
930
|
|
|
@@ -1025,8 +934,6 @@ var ful = (function (exports) {
|
|
|
1025
934
|
this.tsConfig = tsConfig;
|
|
1026
935
|
}
|
|
1027
936
|
render(slotted, template) {
|
|
1028
|
-
const floating = this.hasAttribute('floating');
|
|
1029
|
-
|
|
1030
937
|
const type = this.getAttribute("type") || 'local';
|
|
1031
938
|
const remote = type != 'local';
|
|
1032
939
|
const loadOnce = this.getAttribute('load') != 'always';
|
|
@@ -1055,34 +962,42 @@ var ful = (function (exports) {
|
|
|
1055
962
|
}
|
|
1056
963
|
};
|
|
1057
964
|
|
|
965
|
+
|
|
966
|
+
this._remote = remote;
|
|
967
|
+
// we need to await this load in setValue when remote is configured and the option
|
|
968
|
+
// is not loaded yet.
|
|
969
|
+
// tomselect settings.load does not retun a promise as it wraps the configured load function
|
|
970
|
+
// with a debouncer
|
|
971
|
+
this._unwrappedRemoteLoad = async (query, callback) => {
|
|
972
|
+
|
|
973
|
+
if (!remote || remote && loadOnce && this.loaded) {
|
|
974
|
+
callback();
|
|
975
|
+
return;
|
|
976
|
+
}
|
|
977
|
+
const type = query && query.hasOwnProperty('byId') ? 'id' : 'query';
|
|
978
|
+
const qvalue = type === 'id' ? query.byId : query;
|
|
979
|
+
const data = await (this.loader ? this.loader(qvalue, type) : []);
|
|
980
|
+
if(type !== 'id'){
|
|
981
|
+
this.loaded = true;
|
|
982
|
+
}
|
|
983
|
+
callback(data);
|
|
984
|
+
};
|
|
985
|
+
|
|
986
|
+
|
|
1058
987
|
this.ts = new TomSelect(input, Object.assign(remote ? {
|
|
1059
988
|
preload: 'focus',
|
|
1060
|
-
load:
|
|
1061
|
-
|
|
1062
|
-
callback();
|
|
1063
|
-
return;
|
|
1064
|
-
}
|
|
1065
|
-
const data = await this.load(query);
|
|
1066
|
-
this.loaded = true;
|
|
1067
|
-
callback(data);
|
|
1068
|
-
},
|
|
1069
|
-
shouldLoad: (query) => this.shouldLoad(query)
|
|
989
|
+
load: this._unwrappedRemoteLoad,
|
|
990
|
+
shouldLoad: (query) => this.shouldLoad ? this.shouldLoad(query) : true
|
|
1070
991
|
} : {}, tsDefaultConfig, this.tsConfig));
|
|
1071
|
-
|
|
992
|
+
console.log("ts created");
|
|
1072
993
|
//we remove the input to move it
|
|
1073
994
|
input.remove();
|
|
1074
995
|
|
|
1075
|
-
return template.render({ id, tsId, name,
|
|
1076
|
-
}
|
|
1077
|
-
shouldLoad(q){
|
|
1078
|
-
return true;
|
|
1079
|
-
}
|
|
1080
|
-
load(q){
|
|
1081
|
-
return []
|
|
996
|
+
return template.render({ id, tsId, name, input, slotted });
|
|
1082
997
|
}
|
|
1083
998
|
async setValue(v) {
|
|
1084
|
-
if
|
|
1085
|
-
await this.ts.
|
|
999
|
+
if(this._remote){
|
|
1000
|
+
await this._unwrappedRemoteLoad({byId: v}, this.ts.loadCallback.bind(this.ts));
|
|
1086
1001
|
}
|
|
1087
1002
|
this.ts.setValue(v);
|
|
1088
1003
|
}
|
|
@@ -1253,48 +1168,18 @@ var ful = (function (exports) {
|
|
|
1253
1168
|
}
|
|
1254
1169
|
}
|
|
1255
1170
|
|
|
1256
|
-
class App {
|
|
1257
|
-
constructor() {
|
|
1258
|
-
this.configurers = [];
|
|
1259
|
-
this.initializers = [];
|
|
1260
|
-
this.handlers = [];
|
|
1261
|
-
this.running = false;
|
|
1262
|
-
document.addEventListener("DOMContentLoaded", async () => {
|
|
1263
|
-
await Promise.all(this.configurers);
|
|
1264
|
-
await Promise.all(this.initializers.map(h => Promise.resolve(h())));
|
|
1265
|
-
await Promise.all(this.handlers.map(h => Promise.resolve(h())));
|
|
1266
|
-
});
|
|
1267
|
-
}
|
|
1268
|
-
configure(cb) {
|
|
1269
|
-
this.configurers.push(Promise.resolve(cb()));
|
|
1270
|
-
return this;
|
|
1271
|
-
}
|
|
1272
|
-
initialize(cb) {
|
|
1273
|
-
this.initializers.push(cb);
|
|
1274
|
-
return this;
|
|
1275
|
-
}
|
|
1276
|
-
ready(cb) {
|
|
1277
|
-
this.handlers.push(cb);
|
|
1278
|
-
return this;
|
|
1279
|
-
}
|
|
1280
|
-
}
|
|
1281
|
-
|
|
1282
|
-
exports.App = App;
|
|
1283
1171
|
exports.Attributes = Attributes;
|
|
1284
1172
|
exports.AuthorizationCodeFlow = AuthorizationCodeFlow;
|
|
1285
1173
|
exports.AuthorizationCodeFlowInterceptor = AuthorizationCodeFlowInterceptor;
|
|
1286
1174
|
exports.AuthorizationCodeFlowSession = AuthorizationCodeFlowSession;
|
|
1287
1175
|
exports.Base64 = Base64;
|
|
1288
|
-
exports.Errors = Errors;
|
|
1289
1176
|
exports.Failure = Failure;
|
|
1290
|
-
exports.FieldError = FieldError;
|
|
1291
1177
|
exports.Form = Form;
|
|
1292
1178
|
exports.Fragments = Fragments;
|
|
1293
1179
|
exports.Hex = Hex;
|
|
1294
1180
|
exports.HttpClient = HttpClient;
|
|
1295
1181
|
exports.Input = Input;
|
|
1296
1182
|
exports.LocalStorage = LocalStorage;
|
|
1297
|
-
exports.Observable = Observable;
|
|
1298
1183
|
exports.RadioGroup = RadioGroup;
|
|
1299
1184
|
exports.Select = Select;
|
|
1300
1185
|
exports.SessionStorage = SessionStorage;
|