@optionfactory/ful 0.77.0 → 0.78.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 +18 -14
- 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 +18 -14
- package/dist/ful.mjs.map +1 -1
- package/package.json +1 -1
package/dist/ful.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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}ful-field-error{display:none
|
|
1
|
+
ful-errors{--ful-errors-color:var(--bs-danger-text-emphasis,#58151c);--ful-errors-bg:var(--bs-danger-bg-subtle,#f8d7da);--ful-errors-border-color:var(--bs-danger-border-subtle,#f1aeb5);--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}ful-field-error{--ful-field-error-color-invalid:var(--bs-form-invalid-color,#dc3545);display:none;[ful-validated-field]:has(.is-invalid) &{color:var(--ful-field-error-color-invalid);display:block;font-size:.875em;margin-top:.25rem}}ful-input{display:block;&:not(:defined){visibility:hidden}}ful-select{--ful-select-box-shadow-invalid:0 0 0 .25rem rgba(var(--bs-danger-rgb,220,53,69),.25);--ful-select-border-color-invalid:var(--bs-form-invalid-border-color);display:block;&:not(:defined){visibility:hidden}& .ts-control{border-radius:inherit!important}&:has(.is-invalid) .focus .ts-control{box-shadow:var(--ful-select-box-shadow-invalid)}&:has(.is-invalid) .form-control,&:has(.is-invalid) .form-select{border-color:var(--ful-select-border-color-invalid)!important}}ful-radio-group{--ful-radio-group-label-border-color:var(--bs-border-color,#dee2e6);--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;&:not(:defined){visibility:hidden}&>fieldset{&>legend{font-size:16px;margin:0}&>section{display:grid;gap:10px;grid-template-columns:1fr;& 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;k &.is-invalid{border-color:var(--bs-form-invalid-border-color)}}& 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)}& input[type=radio]{height:16px;margin-left:8px;margin-right:12px;vertical-align:text-bottom;width:16px}}}&.horizontal>fieldset>section{gap:16px;grid-template-columns:1fr 1fr}}ful-radio{display:none}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;&:not(:defined){visibility:hidden}&.centered{align-items:center;display:flex;justify-content:center}&.big{--ful-spinner-icon-width:2rem;--ful-spinner-icon-height:2rem;--ful-spinner-icon-border-width:0.25em}&.backdrop,&.bigger{--ful-spinner-icon-width:4rem;--ful-spinner-icon-height:4rem;--ful-spinner-icon-border-width:0.5em}&.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-wrapper{background-color:#fff;border-radius:1rem;padding:2rem}}&>.ful-spinner-wrapper{display:inline;&>.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}
|
|
2
2
|
/*# sourceMappingURL=ful.css.map */
|
package/dist/ful.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["errors.
|
|
1
|
+
{"version":3,"sources":["errors.css","input.css","select.css","radio.css","spinner.css"],"names":[],"mappings":"AAAA,WACI,yDAA2D,CAC3D,kDAAoD,CACpD,gEAAkE,CAClE,mCAAoC,CAMpC,qCAAsC,CACtC,+CAAgD,CAChD,6CAA8C,CAH9C,6BAA8B,CAH9B,aAAc,CAEd,kBAAmB,CADnB,YAMJ,CAEA,gBACI,oEAAsE,CACtE,YAAa,CAEb,yCAII,0CAA2C,CAH3C,aAAc,CAEd,gBAAiB,CADjB,iBAGJ,CACJ,CCzBA,UACI,aAAc,CAEd,gBACI,iBACJ,CACJ,CCNA,WACI,qFAA0F,CAC1F,qEAAsE,CAMtE,aAAc,CAJd,gBACI,iBACJ,CAIA,cAEI,+BACJ,CAEA,sCACI,+CACJ,CAEA,iEAEI,6DACJ,CACJ,CCvBA,gBACI,mEAAqE,CACrE,oDAAqD,CACrD,gDAAiD,CACjD,wDAAyD,CACzD,aAAc,CAEd,gBACI,iBACJ,CAEA,WACI,SACI,cAAe,CACf,QACJ,CAEA,UACI,YAAa,CACb,QAAS,CACT,yBAA0B,CAE1B,+BAGI,8DAA+D,CAD/D,0DAA2D,CAE3D,iBAAkB,CAHlB,aAAc,CAId,gBAAiB,CAEjB,eACI,gDACJ,CACJ,CAEA,uCACI,sEAAuE,CACvE,8DACJ,CAEA,oBAGI,WAAY,CAFZ,eAAgB,CAChB,iBAAkB,CAGlB,0BAA2B,CAD3B,UAEJ,CACJ,CACJ,CAEA,8BACI,QAAS,CACT,6BACJ,CACJ,CAEA,UACI,YACJ,CCzDA,YACI,6BAA8B,CAC9B,8BAA+B,CAC/B,qCAAsC,CACtC,0CAA2C,CAC3C,wCAAyC,CACzC,gDAAiD,CACjD,qCAAsC,CAEtC,gBACI,iBACJ,CAEA,WAEI,kBAAmB,CADnB,YAAa,CAEb,sBACJ,CAEA,MACI,6BAA8B,CAC9B,8BAA+B,CAC/B,sCACJ,CAQA,oBALI,6BAA8B,CAC9B,8BAA+B,CAC/B,qCA4BJ,CAzBA,WAiBI,kBAAmB,CAHnB,kCAAwC,CAExC,YAAa,CANb,YAAa,CAQb,sBAAuB,CAVvB,MAAO,CAKP,SAAU,CAFV,iBAAkB,CAClB,eAAgB,CANhB,cAAe,CACf,KAAM,CAEN,WAAY,CAJZ,YAAa,CAeb,uBAEI,qBAAuB,CACvB,kBAAmB,CAFnB,YAGJ,CACJ,CAEA,uBACI,cAAe,CAEf,oBAQI,wGAAyG,CAFzG,+EAAgF,CADhF,iBAAkB,CAElB,8BAA+B,CAN/B,oBAAqB,CAErB,qCAAsC,CACtC,qDAAsD,CAFtD,mCAOJ,CACJ,CAEJ,CAEA,6CACI,eACJ","file":"ful.css","sourcesContent":["ful-errors {\n --ful-errors-color: var(--bs-danger-text-emphasis, #58151c);\n --ful-errors-bg: var(--bs-danger-bg-subtle, #f8d7da);\n --ful-errors-border-color: var(--bs-danger-border-subtle, #f1aeb5);\n --ful-errors-border-radius: 0.375rem;\n\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\nful-field-error {\n --ful-field-error-color-invalid: var(--bs-form-invalid-color, #dc3545);\n display: none;\n\n [ful-validated-field]:has(.is-invalid) & {\n display: block;\n margin-top: .25rem;\n font-size: .875em;\n color: var(--ful-field-error-color-invalid);\n }\n}","ful-input {\n display: block;\n\n &:not(:defined) {\n visibility: hidden;\n }\n}","ful-select {\n --ful-select-box-shadow-invalid: 0 0 0 .25rem rgba(var(--bs-danger-rgb, 220, 53, 69), .25);\n --ful-select-border-color-invalid: var(--bs-form-invalid-border-color);\n\n &:not(:defined) {\n visibility: hidden;\n }\n\n display: block;\n\n & .ts-control {\n /*fixes border radius on box-shadow*/\n border-radius: inherit !important;\n }\n\n &:has(.is-invalid) .focus .ts-control {\n box-shadow: var(--ful-select-box-shadow-invalid);\n }\n\n &:has(.is-invalid) .form-select,\n &:has(.is-invalid) .form-control {\n border-color: var(--ful-select-border-color-invalid) !important;\n }\n}","ful-radio-group {\n --ful-radio-group-label-border-color: var(--bs-border-color, #dee2e6);\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 display: block;\n\n &:not(:defined) {\n visibility: hidden;\n }\n\n &>fieldset {\n &>legend {\n font-size: 16px;\n margin: 0;\n }\n\n &>section {\n display: grid;\n gap: 10px;\n grid-template-columns: 1fr;\n\n & 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 k &.is-invalid {\n border-color: var(--bs-form-invalid-border-color);\n }\n }\n\n & 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\n & input[type=radio] {\n margin-left: 8px;\n margin-right: 12px;\n height: 16px;\n width: 16px;\n vertical-align: text-bottom;\n }\n }\n }\n\n &.horizontal>fieldset>section {\n gap: 16px;\n grid-template-columns: 1fr 1fr;\n }\n}\n\nful-radio {\n display: none;\n}","ful-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 &:not(:defined) {\n visibility: hidden;\n }\n\n &.centered {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &.big {\n --ful-spinner-icon-width: 2rem;\n --ful-spinner-icon-height: 2rem;\n --ful-spinner-icon-border-width: 0.25em;\n }\n\n &.bigger {\n --ful-spinner-icon-width: 4rem;\n --ful-spinner-icon-height: 4rem;\n --ful-spinner-icon-border-width: 0.5em;\n }\n\n &.backdrop {\n --ful-spinner-icon-width: 4rem;\n --ful-spinner-icon-height: 4rem;\n --ful-spinner-icon-border-width: 0.5em;\n\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: rgb(167 167 167 / 80%);\n ;\n display: flex;\n align-items: center;\n justify-content: center;\n\n &>.ful-spinner-wrapper {\n padding: 2rem;\n background-color: white;\n border-radius: 1rem;\n }\n }\n\n &>.ful-spinner-wrapper {\n display: inline;\n\n &>.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 }\n\n}\n\nbody:has(ful-spinner.backdrop:not([hidden])) {\n overflow: hidden;\n}"]}
|
package/dist/ful.iife.js
CHANGED
|
@@ -736,11 +736,11 @@ var ful = (function (exports) {
|
|
|
736
736
|
}
|
|
737
737
|
return tpl;
|
|
738
738
|
}
|
|
739
|
-
configure(ec) {
|
|
739
|
+
configure(ec, ...data) {
|
|
740
740
|
this.#ec = ec;
|
|
741
741
|
for (const [k, fragment] of Object.entries(this.#idToFragment)) {
|
|
742
742
|
delete this.#idToFragment[k];
|
|
743
|
-
this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, ec);
|
|
743
|
+
this.#idToTemplate[k] = ftl.Template.fromFragment(fragment, ec, ...data);
|
|
744
744
|
}
|
|
745
745
|
}
|
|
746
746
|
}
|
|
@@ -763,12 +763,6 @@ var ful = (function (exports) {
|
|
|
763
763
|
this.#templates.put(name, Fragments.fromHtml(html));
|
|
764
764
|
return name;
|
|
765
765
|
}
|
|
766
|
-
template(k) {
|
|
767
|
-
if (k === null || k === undefined) {
|
|
768
|
-
return undefined;
|
|
769
|
-
}
|
|
770
|
-
return this.#templates.get(k);
|
|
771
|
-
}
|
|
772
766
|
define(tag, klass) {
|
|
773
767
|
if (!this.#configured) {
|
|
774
768
|
this.#tagToclass[tag] = klass;
|
|
@@ -777,14 +771,20 @@ var ful = (function (exports) {
|
|
|
777
771
|
customElements.define(tag, klass);
|
|
778
772
|
return this;
|
|
779
773
|
}
|
|
780
|
-
configure(ec) {
|
|
781
|
-
this.#templates.configure(ec);
|
|
774
|
+
configure(ec, ...data) {
|
|
775
|
+
this.#templates.configure(ec, ...data);
|
|
782
776
|
for (const [tag, klass] of Object.entries(this.#tagToclass)) {
|
|
783
777
|
customElements.define(tag, klass);
|
|
784
778
|
delete this.#tagToclass[tag];
|
|
785
779
|
}
|
|
786
780
|
this.#configured = true;
|
|
787
781
|
}
|
|
782
|
+
template(k) {
|
|
783
|
+
if (k === null || k === undefined) {
|
|
784
|
+
return undefined;
|
|
785
|
+
}
|
|
786
|
+
return this.#templates.get(k);
|
|
787
|
+
}
|
|
788
788
|
}
|
|
789
789
|
|
|
790
790
|
const elements = new ElementsRegistry();
|
|
@@ -979,7 +979,10 @@ var ful = (function (exports) {
|
|
|
979
979
|
if (el.dataset['fulBindType'] === 'boolean') {
|
|
980
980
|
return !el.value ? null : el.value === 'true';
|
|
981
981
|
}
|
|
982
|
-
|
|
982
|
+
if (el.tagName === 'INPUT' || el.tagName === 'SELECT'){
|
|
983
|
+
return el.value === '' || el.value === undefined ? null : el.value;
|
|
984
|
+
}
|
|
985
|
+
return el.value;
|
|
983
986
|
}
|
|
984
987
|
|
|
985
988
|
function mutate(el, raw) {
|
|
@@ -997,6 +1000,7 @@ var ful = (function (exports) {
|
|
|
997
1000
|
class Form extends ParsedElement() {
|
|
998
1001
|
static IGNORED_CHILDREN_SELECTOR = '.d-none, [hidden]';
|
|
999
1002
|
static SCROLL_OFFSET = 50;
|
|
1003
|
+
static INVALID_CLASS = 'is-invalid';
|
|
1000
1004
|
render() {
|
|
1001
1005
|
const form = document.createElement('form');
|
|
1002
1006
|
form.replaceChildren(...this.childNodes);
|
|
@@ -1059,7 +1063,7 @@ var ful = (function (exports) {
|
|
|
1059
1063
|
set errors(es) {
|
|
1060
1064
|
const fieldErrors = es.filter((e) => e.type === 'FIELD_ERROR' || e.type === 'INVALID_FORMAT');
|
|
1061
1065
|
const globalErrors = es.filter((e) => e.type !== 'FIELD_ERROR' && e.type !== 'INVALID_FORMAT');
|
|
1062
|
-
this.querySelectorAll(
|
|
1066
|
+
this.querySelectorAll(`.${Form.INVALID_CLASS}`).forEach(el => el.classList.remove(Form.INVALID_CLASS));
|
|
1063
1067
|
this.querySelectorAll("ful-errors").forEach(el => {
|
|
1064
1068
|
el.replaceChildren();
|
|
1065
1069
|
el.setAttribute('hidden', '');
|
|
@@ -1067,7 +1071,7 @@ var ful = (function (exports) {
|
|
|
1067
1071
|
fieldErrors.forEach((e) => {
|
|
1068
1072
|
const name = e.context.replace("[", ".").replace("].", ".");
|
|
1069
1073
|
const validationTargetsSelector = `[name='${CSS.escape(name)}'] [ful-validation-target],[name='${CSS.escape(name)}']:not(:has([ful-validation-target]))`;
|
|
1070
|
-
this.querySelectorAll(validationTargetsSelector).forEach(input => input.classList.add(
|
|
1074
|
+
this.querySelectorAll(validationTargetsSelector).forEach(input => input.classList.add(Form.INVALID_CLASS));
|
|
1071
1075
|
const fieldErrorsSelector = `ful-field-error[field='${CSS.escape(name)}']`;
|
|
1072
1076
|
this.querySelectorAll(fieldErrorsSelector).forEach(el => el.innerText = e.reason);
|
|
1073
1077
|
});
|
|
@@ -1080,7 +1084,7 @@ var ful = (function (exports) {
|
|
|
1080
1084
|
if (!this.hasAttribute('scroll-on-error')) {
|
|
1081
1085
|
return;
|
|
1082
1086
|
}
|
|
1083
|
-
const ys = Array.from(this.querySelectorAll(
|
|
1087
|
+
const ys = Array.from(this.querySelectorAll(`[ful-validated-field]:has(.${Form.INVALID_CLASS}) ful-field-error`))
|
|
1084
1088
|
.map(el => el.parentElement ? el.parentElement : el)
|
|
1085
1089
|
.map(el => el.getBoundingClientRect().y + window.scrollY);
|
|
1086
1090
|
const miny = Math.min(...ys);
|