@optionfactory/ful 0.34.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 +61 -170
- 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 +62 -167
- 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,28 +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
|
-
<label data-tpl-for="name" class="form-label">{{{{ slotted.default }}}}</label>
|
|
1001
|
-
</div>
|
|
923
|
+
{{{{ slotted.input }}}}
|
|
1002
924
|
<div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
|
|
1003
925
|
<span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
|
|
1004
|
-
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
1005
|
-
</div>
|
|
1006
|
-
<div data-tpl-if="!floating" data-tpl-remove="tag">
|
|
1007
|
-
<label data-tpl-for="id" class="form-label">{{{{ slotted.default }}}}</label>
|
|
1008
|
-
<div class="input-group has-validation">
|
|
1009
|
-
<span data-tpl-if="slotted.ibefore" class="input-group-text">{{{{ slotted.ibefore }}}}</span>
|
|
1010
|
-
<div data-tpl-if="slotted.before" data-tpl-remove="tag">{{{{ slotted.before }}}}</div>
|
|
1011
|
-
{{{{ slotted.input }}}}
|
|
1012
|
-
<div data-tpl-if="slotted.after" data-tpl-remove="tag">{{{{ slotted.after }}}}</div>
|
|
1013
|
-
<span data-tpl-if="slotted.iafter" class="input-group-text">{{{{ slotted.iafter }}}}</span>
|
|
1014
|
-
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
1015
|
-
</div>
|
|
1016
926
|
</div>
|
|
927
|
+
<ful-field-error data-tpl-if="name" data-tpl-field="name"></ful-field-error>
|
|
1017
928
|
`, ful_select_ec);
|
|
1018
929
|
|
|
1019
930
|
|
|
@@ -1023,8 +934,6 @@ var ful = (function (exports) {
|
|
|
1023
934
|
this.tsConfig = tsConfig;
|
|
1024
935
|
}
|
|
1025
936
|
render(slotted, template) {
|
|
1026
|
-
const floating = this.hasAttribute('floating');
|
|
1027
|
-
|
|
1028
937
|
const type = this.getAttribute("type") || 'local';
|
|
1029
938
|
const remote = type != 'local';
|
|
1030
939
|
const loadOnce = this.getAttribute('load') != 'always';
|
|
@@ -1033,6 +942,7 @@ var ful = (function (exports) {
|
|
|
1033
942
|
return document.createElement("select");
|
|
1034
943
|
})();
|
|
1035
944
|
const id = input.getAttribute('id') || this.getAttribute('input-id') || Attributes.uid('ful-select');
|
|
945
|
+
const tsId = `${id}-ts-control`;
|
|
1036
946
|
Attributes.forward('input-', this, input);
|
|
1037
947
|
Attributes.defaultValue(input, "id", id);
|
|
1038
948
|
Attributes.defaultValue(input, "placeholder", " ");
|
|
@@ -1052,31 +962,42 @@ var ful = (function (exports) {
|
|
|
1052
962
|
}
|
|
1053
963
|
};
|
|
1054
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
|
+
|
|
1055
987
|
this.ts = new TomSelect(input, Object.assign(remote ? {
|
|
1056
988
|
preload: 'focus',
|
|
1057
|
-
load:
|
|
1058
|
-
|
|
1059
|
-
callback();
|
|
1060
|
-
return;
|
|
1061
|
-
}
|
|
1062
|
-
const data = await this.load(query);
|
|
1063
|
-
this.loaded = true;
|
|
1064
|
-
callback(data);
|
|
1065
|
-
},
|
|
1066
|
-
shouldLoad: (query) => this.shouldLoad(query)
|
|
989
|
+
load: this._unwrappedRemoteLoad,
|
|
990
|
+
shouldLoad: (query) => this.shouldLoad ? this.shouldLoad(query) : true
|
|
1067
991
|
} : {}, tsDefaultConfig, this.tsConfig));
|
|
992
|
+
console.log("ts created");
|
|
993
|
+
//we remove the input to move it
|
|
994
|
+
input.remove();
|
|
1068
995
|
|
|
1069
|
-
return template.render({ id, name,
|
|
1070
|
-
}
|
|
1071
|
-
shouldLoad(q){
|
|
1072
|
-
return true;
|
|
1073
|
-
}
|
|
1074
|
-
load(q){
|
|
1075
|
-
return []
|
|
996
|
+
return template.render({ id, tsId, name, input, slotted });
|
|
1076
997
|
}
|
|
1077
998
|
async setValue(v) {
|
|
1078
|
-
if
|
|
1079
|
-
await this.ts.
|
|
999
|
+
if(this._remote){
|
|
1000
|
+
await this._unwrappedRemoteLoad({byId: v}, this.ts.loadCallback.bind(this.ts));
|
|
1080
1001
|
}
|
|
1081
1002
|
this.ts.setValue(v);
|
|
1082
1003
|
}
|
|
@@ -1247,48 +1168,18 @@ var ful = (function (exports) {
|
|
|
1247
1168
|
}
|
|
1248
1169
|
}
|
|
1249
1170
|
|
|
1250
|
-
class App {
|
|
1251
|
-
constructor() {
|
|
1252
|
-
this.configurers = [];
|
|
1253
|
-
this.initializers = [];
|
|
1254
|
-
this.handlers = [];
|
|
1255
|
-
this.running = false;
|
|
1256
|
-
document.addEventListener("DOMContentLoaded", async () => {
|
|
1257
|
-
await Promise.all(this.configurers);
|
|
1258
|
-
await Promise.all(this.initializers.map(h => Promise.resolve(h())));
|
|
1259
|
-
await Promise.all(this.handlers.map(h => Promise.resolve(h())));
|
|
1260
|
-
});
|
|
1261
|
-
}
|
|
1262
|
-
configure(cb) {
|
|
1263
|
-
this.configurers.push(Promise.resolve(cb()));
|
|
1264
|
-
return this;
|
|
1265
|
-
}
|
|
1266
|
-
initialize(cb) {
|
|
1267
|
-
this.initializers.push(cb);
|
|
1268
|
-
return this;
|
|
1269
|
-
}
|
|
1270
|
-
ready(cb) {
|
|
1271
|
-
this.handlers.push(cb);
|
|
1272
|
-
return this;
|
|
1273
|
-
}
|
|
1274
|
-
}
|
|
1275
|
-
|
|
1276
|
-
exports.App = App;
|
|
1277
1171
|
exports.Attributes = Attributes;
|
|
1278
1172
|
exports.AuthorizationCodeFlow = AuthorizationCodeFlow;
|
|
1279
1173
|
exports.AuthorizationCodeFlowInterceptor = AuthorizationCodeFlowInterceptor;
|
|
1280
1174
|
exports.AuthorizationCodeFlowSession = AuthorizationCodeFlowSession;
|
|
1281
1175
|
exports.Base64 = Base64;
|
|
1282
|
-
exports.Errors = Errors;
|
|
1283
1176
|
exports.Failure = Failure;
|
|
1284
|
-
exports.FieldError = FieldError;
|
|
1285
1177
|
exports.Form = Form;
|
|
1286
1178
|
exports.Fragments = Fragments;
|
|
1287
1179
|
exports.Hex = Hex;
|
|
1288
1180
|
exports.HttpClient = HttpClient;
|
|
1289
1181
|
exports.Input = Input;
|
|
1290
1182
|
exports.LocalStorage = LocalStorage;
|
|
1291
|
-
exports.Observable = Observable;
|
|
1292
1183
|
exports.RadioGroup = RadioGroup;
|
|
1293
1184
|
exports.Select = Select;
|
|
1294
1185
|
exports.SessionStorage = SessionStorage;
|