@optionfactory/ful 0.32.0 → 0.34.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 +43 -12
- 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 +43 -12
- package/dist/ful.mjs.map +1 -1
- package/package.json +1 -1
package/dist/ful.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
ful-errors:not(:defined),ful-field-error:not(:defined){visibility:hidden}ful-errors,ful-field-error{display:block}ful-input:not(:defined){visibility:hidden}ful-input{display:block}ful-select:not(:defined){visibility:hidden}ful-select{display:block}.form-floating>.ts-wrapper{height:calc(3.5rem + var(--bs-border-width)*2);line-height:1.25;min-height:calc(3.5rem + var(--bs-border-width)*2)}.form-floating>.ts-wrapper>.ts-control{line-height:20px;padding-bottom:.625rem!important;padding-top:1.625rem!important}.form-floating>.ts-wrapper~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.ts-wrapper.multi .ts-control>div{margin:0 3px 0 0;padding:0 5px}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) .invalid-feedback{display:block}ful-spinner:not(:defined){visibility: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}
|
|
1
|
+
ful-errors:not(:defined),ful-field-error:not(:defined){visibility:hidden}ful-errors,ful-field-error{display:block}ful-input:not(:defined){visibility:hidden}ful-input{display:block}ful-select:not(:defined){visibility:hidden}ful-select{display:block}.form-floating>.ts-wrapper{height:calc(3.5rem + var(--bs-border-width)*2);line-height:1.25;min-height:calc(3.5rem + var(--bs-border-width)*2)}.form-floating>.ts-wrapper>.ts-control{line-height:20px;padding-bottom:.625rem!important;padding-top:1.625rem!important}.form-floating>.ts-wrapper~label{color:rgba(var(--bs-body-color-rgb),.65);transform:scale(.85) translateY(-.5rem) translateX(.15rem)}.form-floating>.ts-wrapper.multi .ts-control>div{margin:0 3px 0 0;padding:0 5px}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) .invalid-feedback{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,uDAEE,iBACF,CAEA,2BAEE,aACF,CCRA,wBACE,iBACF,CAEA,UACE,aACF,CCNA,yBACE,iBACF,CAEA,WACE,aACF,CAEA,2BACE,8CAAiD,CAEjD,gBAAiB,CADjB,kDAEF,CAEA,uCAGE,gBAAiB,CADjB,gCAAmC,CADnC,8BAGF,CAEA,iCACE,wCAA2C,CAC3C,0DACF,CAEA,iDACE,gBAAiB,CACjB,aACF,CC5BA,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,mDACE,aACF,CC5DA,0BACE,iBACF,
|
|
1
|
+
{"version":3,"sources":["errors.scss","input.scss","select.scss","radio.scss","spinner.scss","wizard.scss"],"names":[],"mappings":"AAAA,uDAEE,iBACF,CAEA,2BAEE,aACF,CCRA,wBACE,iBACF,CAEA,UACE,aACF,CCNA,yBACE,iBACF,CAEA,WACE,aACF,CAEA,2BACE,8CAAiD,CAEjD,gBAAiB,CADjB,kDAEF,CAEA,uCAGE,gBAAiB,CADjB,gCAAmC,CADnC,8BAGF,CAEA,iCACE,wCAA2C,CAC3C,0DACF,CAEA,iDACE,gBAAiB,CACjB,aACF,CC5BA,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,mDACE,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:not(:defined),\nful-field-error:not(:defined) {\n visibility: hidden;\n}\n\nful-errors,\nful-field-error {\n display: block;\n}","ful-input:not(:defined) {\n visibility: hidden;\n}\n\nful-input {\n display: block;\n}","ful-select:not(:defined) {\n visibility: hidden;\n}\n\nful-select {\n display: block;\n}\n\n.form-floating > .ts-wrapper {\n height: calc(3.5rem + var(--bs-border-width) * 2);\n min-height: calc(3.5rem + var(--bs-border-width) * 2);\n line-height: 1.25;\n}\n\n.form-floating > .ts-wrapper > .ts-control {\n padding-top: 1.625rem !important;\n padding-bottom: 0.625rem !important;\n line-height: 20px;\n}\n\n.form-floating > .ts-wrapper ~ label {\n color: rgba(var(--bs-body-color-rgb), 0.65);\n transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);\n}\n\n.form-floating > .ts-wrapper.multi .ts-control > div {\n margin: 0 3px 0 0;\n padding: 0px 5px;\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) .invalid-feedback {\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
|
@@ -757,7 +757,7 @@ var ful = (function (exports) {
|
|
|
757
757
|
this.mutators = mutators || {};
|
|
758
758
|
this.extractors = extractors || {};
|
|
759
759
|
this.valueHoldersSelector = valueHoldersSelector || '[name]';
|
|
760
|
-
this.ignoredChildrenSelector = ignoredChildrenSelector || '.d-none';
|
|
760
|
+
this.ignoredChildrenSelector = ignoredChildrenSelector || '.d-none, [hidden]';
|
|
761
761
|
}
|
|
762
762
|
render(slotted, template) {
|
|
763
763
|
const form = document.createElement('form');
|
|
@@ -1017,14 +1017,18 @@ var ful = (function (exports) {
|
|
|
1017
1017
|
`, ful_select_ec);
|
|
1018
1018
|
|
|
1019
1019
|
|
|
1020
|
-
class Select extends Templated(
|
|
1020
|
+
class Select extends Templated(HTMLElement, ful_select_template_) {
|
|
1021
1021
|
constructor(tsConfig) {
|
|
1022
1022
|
super();
|
|
1023
1023
|
this.tsConfig = tsConfig;
|
|
1024
1024
|
}
|
|
1025
1025
|
render(slotted, template) {
|
|
1026
1026
|
const floating = this.hasAttribute('floating');
|
|
1027
|
-
|
|
1027
|
+
|
|
1028
|
+
const type = this.getAttribute("type") || 'local';
|
|
1029
|
+
const remote = type != 'local';
|
|
1030
|
+
const loadOnce = this.getAttribute('load') != 'always';
|
|
1031
|
+
|
|
1028
1032
|
const input = slotted.input = slotted.input || (() => {
|
|
1029
1033
|
return document.createElement("select");
|
|
1030
1034
|
})();
|
|
@@ -1041,21 +1045,35 @@ var ful = (function (exports) {
|
|
|
1041
1045
|
slotted.input = Fragments.from(input);
|
|
1042
1046
|
|
|
1043
1047
|
this.loaded = !remote;
|
|
1048
|
+
|
|
1049
|
+
const tsDefaultConfig = {
|
|
1050
|
+
render: {
|
|
1051
|
+
loading: () => '<ful-spinner class="centered p-2"></ful-spinner>'
|
|
1052
|
+
}
|
|
1053
|
+
};
|
|
1054
|
+
|
|
1044
1055
|
this.ts = new TomSelect(input, Object.assign(remote ? {
|
|
1045
1056
|
preload: 'focus',
|
|
1046
1057
|
load: async (query, callback) => {
|
|
1047
|
-
if (this.loaded) {
|
|
1058
|
+
if (!remote || remote && loadOnce && this.loaded) {
|
|
1048
1059
|
callback();
|
|
1049
1060
|
return;
|
|
1050
1061
|
}
|
|
1051
|
-
const data = await this.
|
|
1062
|
+
const data = await this.load(query);
|
|
1052
1063
|
this.loaded = true;
|
|
1053
1064
|
callback(data);
|
|
1054
|
-
}
|
|
1055
|
-
|
|
1065
|
+
},
|
|
1066
|
+
shouldLoad: (query) => this.shouldLoad(query)
|
|
1067
|
+
} : {}, tsDefaultConfig, this.tsConfig));
|
|
1056
1068
|
|
|
1057
1069
|
return template.render({ id, name, floating, slotted });
|
|
1058
1070
|
}
|
|
1071
|
+
shouldLoad(q){
|
|
1072
|
+
return true;
|
|
1073
|
+
}
|
|
1074
|
+
load(q){
|
|
1075
|
+
return []
|
|
1076
|
+
}
|
|
1059
1077
|
async setValue(v) {
|
|
1060
1078
|
if (!this.loaded) {
|
|
1061
1079
|
await this.ts.load();
|
|
@@ -1088,6 +1106,9 @@ var ful = (function (exports) {
|
|
|
1088
1106
|
<legend class="form-label">
|
|
1089
1107
|
{{{{ slotted.default }}}}
|
|
1090
1108
|
</legend>
|
|
1109
|
+
<header data-tpl-if="slotted.header">
|
|
1110
|
+
{{{{ slotted.header }}}}
|
|
1111
|
+
</header>
|
|
1091
1112
|
<section>
|
|
1092
1113
|
<label data-tpl-each="inputsAndLabels" data-tpl-var="ial">
|
|
1093
1114
|
{{{{ ial[0] }}}}
|
|
@@ -1099,7 +1120,7 @@ var ful = (function (exports) {
|
|
|
1099
1120
|
`, ful_radiogroup_ec);
|
|
1100
1121
|
|
|
1101
1122
|
|
|
1102
|
-
class RadioGroup extends Stateful(Templated(HTMLElement, ful_radiougroup_template_), ['
|
|
1123
|
+
class RadioGroup extends Stateful(Templated(HTMLElement, ful_radiougroup_template_), ['disabled']) {
|
|
1103
1124
|
render(slotted, template) {
|
|
1104
1125
|
const name = this.getAttribute('input-name') || Attributes.uid('ful-radiogroup');
|
|
1105
1126
|
const radioEls = Array.from(slotted.default.querySelectorAll('ful-radio'));
|
|
@@ -1126,11 +1147,21 @@ var ful = (function (exports) {
|
|
|
1126
1147
|
}
|
|
1127
1148
|
}
|
|
1128
1149
|
|
|
1129
|
-
|
|
1150
|
+
const ful_spinner_ec = globalThis.ec || ftl.EvaluationContext.configure({
|
|
1151
|
+
|
|
1152
|
+
});
|
|
1153
|
+
|
|
1154
|
+
const ful_spinner_template_ = globalThis.ful_spinner_template || ftl.Template.fromHtml(`
|
|
1155
|
+
<div class="ful-spinner-wrapper">
|
|
1156
|
+
<div class="ful-spinner-text">{{{{ slotted.default }}}}</div>
|
|
1157
|
+
<div class="ful-spinner-icon"></div>
|
|
1158
|
+
</div>
|
|
1159
|
+
`, ful_spinner_ec);
|
|
1160
|
+
|
|
1161
|
+
|
|
1162
|
+
class Spinner extends Templated(HTMLElement, ful_spinner_template_) {
|
|
1130
1163
|
render(slotted, template) {
|
|
1131
|
-
return
|
|
1132
|
-
<div class="spinner-border spinner-border-sm" aria-hidden="true"></div>
|
|
1133
|
-
`);
|
|
1164
|
+
return template.render({ slotted });
|
|
1134
1165
|
}
|
|
1135
1166
|
static configure() {
|
|
1136
1167
|
customElements.define('ful-spinner', Spinner);
|