formeo 5.1.0 → 5.1.2
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/README.md +3 -3
- package/dist/demo/assets/css/demo.min.css +1 -1
- package/dist/demo/assets/css/demo.min.css.gz +0 -0
- package/dist/demo/assets/css/formeo.min.css +1 -1
- package/dist/demo/assets/js/demo.min.js +55 -55
- package/dist/demo/assets/js/demo.min.js.gz +0 -0
- package/dist/demo/assets/js/form.min.js +1 -1
- package/dist/demo/assets/js/formeo.cjs.js +94 -40
- package/dist/demo/assets/js/formeo.es.js +94 -40
- package/dist/demo/assets/js/formeo.min.cjs.js +2 -2
- package/dist/demo/assets/js/formeo.min.es.js +2 -2
- package/dist/demo/assets/js/formeo.min.js +94 -40
- package/dist/demo/assets/js/formeo.min.umd.js +2 -2
- package/dist/demo/assets/js/formeo.umd.js +94 -40
- package/dist/demo/assets/js/html.min.js +1 -1
- package/dist/demo/assets/js/layout.min.js +1 -1
- package/dist/demo/assets/js/mode-json.min.js +1 -1
- package/dist/demo/assets/js/mode-json.min.js.gz +0 -0
- package/dist/demo/assets/js/theme-github_light_default.min.js +1 -1
- package/dist/demo/index.html +1 -1
- package/dist/formeo.cjs.js +94 -40
- package/dist/formeo.css +1 -1
- package/dist/formeo.es.js +94 -40
- package/dist/formeo.min.cjs.js +2 -2
- package/dist/formeo.min.css +1 -1
- package/dist/formeo.min.es.js +2 -2
- package/dist/formeo.min.js +94 -40
- package/dist/formeo.min.umd.js +2 -2
- package/dist/formeo.umd.js +94 -40
- package/package.json +1 -1
- package/dist/demo/assets/lang/af-ZA.json +0 -1
- package/dist/demo/assets/lang/af-ZA.lang +0 -238
- package/dist/demo/assets/lang/ar-TN.json +0 -1
- package/dist/demo/assets/lang/ar-TN.lang +0 -238
- package/dist/demo/assets/lang/cs-CZ.json +0 -1
- package/dist/demo/assets/lang/cs-CZ.lang +0 -238
- package/dist/demo/assets/lang/de-DE.json +0 -1
- package/dist/demo/assets/lang/de-DE.lang +0 -238
- package/dist/demo/assets/lang/en-US.json +0 -1
- package/dist/demo/assets/lang/en-US.lang +0 -234
- package/dist/demo/assets/lang/es-ES.json +0 -1
- package/dist/demo/assets/lang/es-ES.lang +0 -238
- package/dist/demo/assets/lang/fa-IR.json +0 -1
- package/dist/demo/assets/lang/fa-IR.lang +0 -238
- package/dist/demo/assets/lang/fi-FI.json +0 -1
- package/dist/demo/assets/lang/fi-FI.lang +0 -238
- package/dist/demo/assets/lang/fr-FR.json +0 -1
- package/dist/demo/assets/lang/fr-FR.lang +0 -238
- package/dist/demo/assets/lang/he-IL.json +0 -1
- package/dist/demo/assets/lang/he-IL.lang +0 -238
- package/dist/demo/assets/lang/hi-IN.json +0 -1
- package/dist/demo/assets/lang/hi-IN.lang +0 -238
- package/dist/demo/assets/lang/hu-HU.json +0 -1
- package/dist/demo/assets/lang/hu-HU.lang +0 -238
- package/dist/demo/assets/lang/it-IT.json +0 -1
- package/dist/demo/assets/lang/it-IT.lang +0 -238
- package/dist/demo/assets/lang/ja-JP.json +0 -1
- package/dist/demo/assets/lang/ja-JP.lang +0 -238
- package/dist/demo/assets/lang/nb-NO.json +0 -1
- package/dist/demo/assets/lang/nb-NO.lang +0 -238
- package/dist/demo/assets/lang/pl-PL.json +0 -1
- package/dist/demo/assets/lang/pl-PL.lang +0 -238
- package/dist/demo/assets/lang/pt-BR.json +0 -1
- package/dist/demo/assets/lang/pt-BR.lang +0 -238
- package/dist/demo/assets/lang/pt-PT.json +0 -1
- package/dist/demo/assets/lang/pt-PT.lang +0 -238
- package/dist/demo/assets/lang/ro-RO.json +0 -1
- package/dist/demo/assets/lang/ro-RO.lang +0 -238
- package/dist/demo/assets/lang/ru-RU.json +0 -1
- package/dist/demo/assets/lang/ru-RU.lang +0 -238
- package/dist/demo/assets/lang/th-TH.json +0 -1
- package/dist/demo/assets/lang/th-TH.lang +0 -238
- package/dist/demo/assets/lang/tr-TR.json +0 -1
- package/dist/demo/assets/lang/tr-TR.lang +0 -238
- package/dist/demo/assets/lang/zh-CN.json +0 -1
- package/dist/demo/assets/lang/zh-CN.lang +0 -238
- package/dist/demo/assets/lang/zh-HK.json +0 -1
- package/dist/demo/assets/lang/zh-HK.lang +0 -238
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
/**
|
|
3
3
|
formeo - https://formeo.io
|
|
4
|
-
Version: 5.
|
|
4
|
+
Version: 5.1.1
|
|
5
5
|
Author: Draggable https://draggable.io
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -74,7 +74,7 @@ Author: Draggable https://draggable.io
|
|
|
74
74
|
allowSelect: "Laat Kies toe",
|
|
75
75
|
and: "en",
|
|
76
76
|
attribute: "kenmerk",
|
|
77
|
-
attributeNotPermitted:
|
|
77
|
+
attributeNotPermitted: "Attribuut \"{attribuut}\" is nie toegelaat nie, kies asseblief 'n ander.",
|
|
78
78
|
attributes: "eienskappe",
|
|
79
79
|
"attrs.class": "klas",
|
|
80
80
|
"attrs.className": "klas",
|
|
@@ -2127,7 +2127,7 @@ Author: Draggable https://draggable.io
|
|
|
2127
2127
|
"row.makeInputGroup": "Définir cette ligne comme groupe de saisie.",
|
|
2128
2128
|
"row.makeInputGroupDesc": "Les groupes de saisie permettent aux usagers de rajouter de multiples champs à la fois.",
|
|
2129
2129
|
"row.settings.fieldsetWrap": "Entourer le champ d'un élément <fieldset>",
|
|
2130
|
-
"row.settings.fieldsetWrap.aria":
|
|
2130
|
+
"row.settings.fieldsetWrap.aria": "Entourer le champ d'un \"Fieldset\"",
|
|
2131
2131
|
save: "Sauvegarder",
|
|
2132
2132
|
secondary: "Secondaire",
|
|
2133
2133
|
select: "Sélection",
|
|
@@ -2902,7 +2902,7 @@ Author: Draggable https://draggable.io
|
|
|
2902
2902
|
allowSelect: "Consenti selezione",
|
|
2903
2903
|
and: "e",
|
|
2904
2904
|
attribute: "Attributo",
|
|
2905
|
-
attributeNotPermitted:
|
|
2905
|
+
attributeNotPermitted: "L'attributo \"{attribute}\" non è permesso, per favore sceglierne un altro.",
|
|
2906
2906
|
attributes: "attributi",
|
|
2907
2907
|
"attrs.class": "Classe",
|
|
2908
2908
|
"attrs.className": "Classe",
|
|
@@ -5711,10 +5711,10 @@ Author: Draggable https://draggable.io
|
|
|
5711
5711
|
//#region node_modules/@draggable/formeo-languages/dist/formeo-languages.es.js
|
|
5712
5712
|
/**
|
|
5713
5713
|
@draggable/formeo-languages - https://github.com/Draggable/formeo-languages#readme
|
|
5714
|
-
Version: 3.
|
|
5714
|
+
Version: 3.5.0
|
|
5715
5715
|
Author: Kevin Chappell <kevin.b.chappell@gmail.com> (https://kevin-chappell.com)
|
|
5716
5716
|
*/
|
|
5717
|
-
var
|
|
5717
|
+
var s$1 = e$1["en-US"];
|
|
5718
5718
|
e$1["es-ES"];
|
|
5719
5719
|
e$1["fa-IR"];
|
|
5720
5720
|
e$1["fi-FI"];
|
|
@@ -6064,7 +6064,7 @@ Author: Draggable https://draggable.io
|
|
|
6064
6064
|
var name$1, version$2, type, main, module$1, unpkg, exports$1, files, homepage, repository, author, contributors, bugs, description, keywords, ignore, config, scripts, devDependencies, dependencies, release, commitlint, package_default;
|
|
6065
6065
|
var init_package = __esmMin((() => {
|
|
6066
6066
|
name$1 = "formeo";
|
|
6067
|
-
version$2 = "5.
|
|
6067
|
+
version$2 = "5.1.1";
|
|
6068
6068
|
type = "module";
|
|
6069
6069
|
main = "dist/formeo.cjs.js";
|
|
6070
6070
|
module$1 = "dist/formeo.es.js";
|
|
@@ -10070,7 +10070,7 @@ Author: Draggable https://draggable.io
|
|
|
10070
10070
|
}, _typeof(o);
|
|
10071
10071
|
}
|
|
10072
10072
|
function userAgent(pattern) {
|
|
10073
|
-
if (typeof window !== "undefined" && window.navigator) return
|
|
10073
|
+
if (typeof window !== "undefined" && window.navigator) return !!/*@__PURE__*/ navigator.userAgent.match(pattern);
|
|
10074
10074
|
}
|
|
10075
10075
|
function on(el, event, fn) {
|
|
10076
10076
|
el.addEventListener(event, fn, !IE11OrLess && captureMode);
|
|
@@ -11984,7 +11984,7 @@ Author: Draggable https://draggable.io
|
|
|
11984
11984
|
}));
|
|
11985
11985
|
//#endregion
|
|
11986
11986
|
//#region src/lib/js/common/loaders.js
|
|
11987
|
-
var loaded, ajax, onLoadStylesheet, onLoadJavascript, insertScript, insertStyle, insertScripts, insertStyles, insertIcons, fetchIcons, LOADER_MAP, fetchDependencies, fetchFormeoStyle;
|
|
11987
|
+
var loaded, AJAX_TIMEOUT_MS, ajax, onLoadStylesheet, onLoadJavascript, insertScript, insertStyle, insertScripts, insertStyles, insertIcons, fetchIcons, LOADER_MAP, fetchDependencies, fetchFormeoStyle;
|
|
11988
11988
|
var init_loaders = __esmMin((() => {
|
|
11989
11989
|
init_constants();
|
|
11990
11990
|
init_dom();
|
|
@@ -11994,12 +11994,14 @@ Author: Draggable https://draggable.io
|
|
|
11994
11994
|
css: /* @__PURE__ */ new Set(),
|
|
11995
11995
|
formeoSprite: null
|
|
11996
11996
|
};
|
|
11997
|
-
|
|
11997
|
+
AJAX_TIMEOUT_MS = 1e4;
|
|
11998
|
+
ajax = (fileUrl, callback, onError = noop, timeoutMs = AJAX_TIMEOUT_MS) => {
|
|
11998
11999
|
return new Promise((resolve) => {
|
|
11999
|
-
|
|
12000
|
+
const signal = typeof AbortSignal !== "undefined" && AbortSignal.timeout ? AbortSignal.timeout(timeoutMs) : void 0;
|
|
12001
|
+
return fetch(fileUrl, signal ? { signal } : void 0).then((data) => {
|
|
12000
12002
|
if (!data.ok) return resolve(onError(data));
|
|
12001
12003
|
resolve(callback ? callback(data) : data);
|
|
12002
|
-
}).catch((err) => onError(err));
|
|
12004
|
+
}).catch((err) => resolve(onError(err)));
|
|
12003
12005
|
});
|
|
12004
12006
|
};
|
|
12005
12007
|
onLoadStylesheet = (elem, cb) => {
|
|
@@ -17898,7 +17900,7 @@ Author: Draggable https://draggable.io
|
|
|
17898
17900
|
fetchIcons(this.opts.svgSprite),
|
|
17899
17901
|
fetchFormeoStyle(this.opts.style),
|
|
17900
17902
|
s.init({
|
|
17901
|
-
preloaded: { "en-US":
|
|
17903
|
+
preloaded: { "en-US": s$1 },
|
|
17902
17904
|
...this.opts.i18n,
|
|
17903
17905
|
locale: globalThis.sessionStorage?.getItem(SESSION_LOCALE_KEY)
|
|
17904
17906
|
})
|
|
@@ -18074,20 +18076,56 @@ Author: Draggable https://draggable.io
|
|
|
18074
18076
|
};
|
|
18075
18077
|
var isVisible = (elem) => {
|
|
18076
18078
|
if (!elem) return false;
|
|
18077
|
-
if (elem.hasAttribute("hidden") || elem.parentElement
|
|
18079
|
+
if (elem.hasAttribute("hidden") || elem.parentElement?.hasAttribute("hidden")) return false;
|
|
18078
18080
|
const computedStyle = window.getComputedStyle(elem);
|
|
18079
18081
|
return !(computedStyle.display === "none" || computedStyle.visibility === "hidden" || computedStyle.opacity === "0");
|
|
18080
18082
|
};
|
|
18083
|
+
var CHECKABLE_INPUT_SELECTOR = "input[type=\"checkbox\"], input[type=\"radio\"]";
|
|
18084
|
+
var CHECKABLE_TYPES = new Set(["checkbox", "radio"]);
|
|
18085
|
+
var tagName$1 = (elem) => elem?.tagName?.toLowerCase();
|
|
18086
|
+
var isCheckableInput = (elem) => tagName$1(elem) === "input" && CHECKABLE_TYPES.has(elem.type);
|
|
18087
|
+
/**
|
|
18088
|
+
* Radio and checkbox fields render as a wrapper holding one input per option, so a
|
|
18089
|
+
* field address resolves to the wrapper rather than to anything carrying a value.
|
|
18090
|
+
* @param {Element} elem
|
|
18091
|
+
* @return {Array<Element>|null} option inputs, or null when elem is not a group
|
|
18092
|
+
*/
|
|
18093
|
+
var checkableGroupInputs = (elem) => {
|
|
18094
|
+
if (!elem || isCheckableInput(elem) || typeof elem.querySelectorAll !== "function") return null;
|
|
18095
|
+
const inputs = elem.querySelectorAll(CHECKABLE_INPUT_SELECTOR);
|
|
18096
|
+
return inputs.length ? Array.from(inputs) : null;
|
|
18097
|
+
};
|
|
18098
|
+
var isCheckableGroup = (elem) => Boolean(checkableGroupInputs(elem));
|
|
18099
|
+
/**
|
|
18100
|
+
* Value a condition compares against. Controls that can hold several values at once
|
|
18101
|
+
* yield an array so that a single selection still matches an `equals` comparison.
|
|
18102
|
+
* @param {Element} elem
|
|
18103
|
+
* @return {String|Array<String>|undefined}
|
|
18104
|
+
*/
|
|
18105
|
+
var elementValue = (elem) => {
|
|
18106
|
+
if (!elem) return;
|
|
18107
|
+
const groupInputs = checkableGroupInputs(elem);
|
|
18108
|
+
if (groupInputs) {
|
|
18109
|
+
const checkedValues = groupInputs.filter((input) => input.checked).map((input) => input.value);
|
|
18110
|
+
return groupInputs.every((input) => input.type === "radio") ? checkedValues[0] ?? "" : checkedValues;
|
|
18111
|
+
}
|
|
18112
|
+
if (tagName$1(elem) === "select" && elem.multiple) return Array.from(elem.selectedOptions, (option) => option.value);
|
|
18113
|
+
if (isCheckableInput(elem)) return elem.checked ? elem.value : "";
|
|
18114
|
+
return elem.value;
|
|
18115
|
+
};
|
|
18116
|
+
var isChecked = (elem) => {
|
|
18117
|
+
const groupInputs = checkableGroupInputs(elem);
|
|
18118
|
+
return groupInputs ? groupInputs.some((input) => input.checked) : Boolean(elem?.checked);
|
|
18119
|
+
};
|
|
18081
18120
|
var propertyMap = {
|
|
18082
18121
|
isChecked: (elem) => {
|
|
18083
|
-
return elem
|
|
18122
|
+
return isChecked(elem);
|
|
18084
18123
|
},
|
|
18085
18124
|
isNotChecked: (elem) => {
|
|
18086
|
-
return !elem
|
|
18087
|
-
},
|
|
18088
|
-
value: (elem) => {
|
|
18089
|
-
return elem.value;
|
|
18125
|
+
return !isChecked(elem);
|
|
18090
18126
|
},
|
|
18127
|
+
value: elementValue,
|
|
18128
|
+
checked: elementValue,
|
|
18091
18129
|
isVisible: (elem) => {
|
|
18092
18130
|
return isVisible(elem);
|
|
18093
18131
|
},
|
|
@@ -18104,11 +18142,16 @@ Author: Draggable https://draggable.io
|
|
|
18104
18142
|
click: ({ target }) => target.parentElement.remove()
|
|
18105
18143
|
}
|
|
18106
18144
|
});
|
|
18145
|
+
var equals = (source, target) => Array.isArray(source) ? source.some((value) => (0, import_isEqual.default)(value, target)) : (0, import_isEqual.default)(source, target);
|
|
18146
|
+
var contains = (source, target) => {
|
|
18147
|
+
if (source == null) return false;
|
|
18148
|
+
return Array.isArray(source) ? source.includes(target) : String(source).includes(target);
|
|
18149
|
+
};
|
|
18107
18150
|
var comparisonHandlers = {
|
|
18108
|
-
equals
|
|
18109
|
-
notEquals: (source, target) => !(
|
|
18110
|
-
contains
|
|
18111
|
-
notContains: (source, target) => !source
|
|
18151
|
+
equals,
|
|
18152
|
+
notEquals: (source, target) => !equals(source, target),
|
|
18153
|
+
contains,
|
|
18154
|
+
notContains: (source, target) => !contains(source, target)
|
|
18112
18155
|
};
|
|
18113
18156
|
var comparisonMap = Object.entries(COMPARISON_OPERATORS).reduce((acc, [key, value]) => {
|
|
18114
18157
|
acc[value] = comparisonHandlers[key];
|
|
@@ -18376,7 +18419,8 @@ Author: Draggable https://draggable.io
|
|
|
18376
18419
|
* @return {Array} flattened array of conditions
|
|
18377
18420
|
*/
|
|
18378
18421
|
handleComponentCondition = (component, ifRest, thenConditions) => {
|
|
18379
|
-
if (component
|
|
18422
|
+
if (!component) return;
|
|
18423
|
+
if (isNodeCollection(component)) {
|
|
18380
18424
|
for (const elem of component) this.handleComponentCondition(elem, ifRest, thenConditions);
|
|
18381
18425
|
return;
|
|
18382
18426
|
}
|
|
@@ -18388,23 +18432,25 @@ Author: Draggable https://draggable.io
|
|
|
18388
18432
|
if (this.evaluateCondition(ifRest, fakeEvt)) for (const thenCondition of thenConditions) this.execResult(thenCondition, fakeEvt);
|
|
18389
18433
|
};
|
|
18390
18434
|
applyConditions = () => {
|
|
18391
|
-
for (const { conditions } of Object.values(this.components))
|
|
18392
|
-
|
|
18393
|
-
for (const
|
|
18394
|
-
const {
|
|
18395
|
-
|
|
18396
|
-
|
|
18397
|
-
|
|
18398
|
-
|
|
18399
|
-
}
|
|
18400
|
-
if (isAddress(target)) {
|
|
18401
|
-
const { component, options } = this.getComponent(target);
|
|
18402
|
-
const targetComponent = options || component;
|
|
18403
|
-
this.handleComponentCondition(targetComponent, ifCondition, thenConditions);
|
|
18435
|
+
for (const { conditions } of Object.values(this.components)) {
|
|
18436
|
+
if (!conditions) continue;
|
|
18437
|
+
for (const condition of conditions) {
|
|
18438
|
+
const { if: ifConditions = [], then: thenConditions = [] } = condition;
|
|
18439
|
+
for (const ifCondition of ifConditions) try {
|
|
18440
|
+
this.applyCondition(ifCondition, thenConditions);
|
|
18441
|
+
} catch (err) {
|
|
18442
|
+
console.error("formeo: condition skipped", ifCondition, err);
|
|
18404
18443
|
}
|
|
18405
18444
|
}
|
|
18406
18445
|
}
|
|
18407
18446
|
};
|
|
18447
|
+
applyCondition = (ifCondition, thenConditions) => {
|
|
18448
|
+
for (const address of [ifCondition.source, ifCondition.target]) {
|
|
18449
|
+
if (!isAddress(address)) continue;
|
|
18450
|
+
const { component, options } = this.getComponent(address);
|
|
18451
|
+
this.handleComponentCondition(options || component, ifCondition, thenConditions);
|
|
18452
|
+
}
|
|
18453
|
+
};
|
|
18408
18454
|
/**
|
|
18409
18455
|
* Evaulate conditions
|
|
18410
18456
|
*/
|
|
@@ -18426,9 +18472,10 @@ Author: Draggable https://draggable.io
|
|
|
18426
18472
|
}
|
|
18427
18473
|
};
|
|
18428
18474
|
getComponentProperty = (address, propertyName) => {
|
|
18429
|
-
const { component, option } = this.getComponent(address);
|
|
18475
|
+
const { component, option } = this.getComponent(address) || {};
|
|
18430
18476
|
const elem = option || component;
|
|
18431
|
-
|
|
18477
|
+
if (!elem) return;
|
|
18478
|
+
return propertyMap[propertyName] ? propertyMap[propertyName](elem) : elem[propertyName];
|
|
18432
18479
|
};
|
|
18433
18480
|
getComponent = (address) => {
|
|
18434
18481
|
const result = { component: null };
|
|
@@ -18453,7 +18500,14 @@ Author: Draggable https://draggable.io
|
|
|
18453
18500
|
return components;
|
|
18454
18501
|
};
|
|
18455
18502
|
};
|
|
18456
|
-
var
|
|
18503
|
+
var isDomNode = (value) => Boolean(value) && typeof value.nodeType === "number";
|
|
18504
|
+
var isNodeCollection = (value) => Boolean(value) && !isDomNode(value) && typeof value.length === "number";
|
|
18505
|
+
var tagName = (component) => component.tagName?.toLowerCase();
|
|
18506
|
+
var listenTypeMap = [
|
|
18507
|
+
["change", (component) => isCheckableGroup(component)],
|
|
18508
|
+
["change", (component) => tagName(component) === "select" || ["checkbox", "radio"].includes(component.type)],
|
|
18509
|
+
["input", (component) => ["input", "textarea"].includes(tagName(component))]
|
|
18510
|
+
];
|
|
18457
18511
|
var LISTEN_TYPE_MAP = (component) => {
|
|
18458
18512
|
const [listenerEvent] = listenTypeMap.find((typeMap) => typeMap[1](component)) || [false];
|
|
18459
18513
|
return listenerEvent;
|
|
Binary file
|
package/dist/demo/index.html
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<!doctype html><html lang="en" xml:lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vanilla Javascript form building module"><meta name="theme-color" content="#232323"><title>Formeo | Drag & Drop Form Creation</title><script type="module" crossorigin src="/formeo/assets/js/demo.min.js"></script><link rel="stylesheet" crossorigin href="/formeo/assets/css/demo.min.css"></head><body><div class="site-wrap"><header id="demo-header"><div class="header-inner"><img id="formeo-logo" src="/formeo/assets/img/formeo-logo.svg" alt="Formeo Logo" width="100"><nav aria-label="Framework navigation"><ul><li><label for="framework-select">Framework:</label> <select name="framework-select" id="framework-select" class="form-control"><option value="vanilla">Vanilla JavaScript</option><option value="angular">Angular</option><option value="react">React</option></select></li><li><label for="locale">Language</label> <select name="locale" id="locale" class="form-control"><option value="af-ZA" dir="ltr">Afrikaans (Suid-Afrika)</option><option value="ar-TN" dir="rtl">العربية (تونس)</option><option value="cs-CZ" dir="ltr">čeština (Česko)</option><option value="de-DE" dir="ltr">Deutsch (Deutschland)</option><option value="en-US" dir="ltr">English</option><option value="es-ES" dir="ltr">español de España</option><option value="fa-IR" dir="rtl">فارسی (ایران)</option><option value="fi-FI" dir="ltr">suomi (Suomi)</option><option value="fr-FR" dir="ltr">français (France)</option><option value="he-IL" dir="rtl">עברית (ישראל)</option><option value="hi-IN" dir="ltr">हिन्दी (भारत)</option><option value="hu-HU" dir="ltr">magyar (Magyarország)</option><option value="it-IT" dir="ltr">italiano (Italia)</option><option value="ja-JP" dir="ltr">日本語 (日本)</option><option value="nb-NO" dir="ltr">norsk bokmål (Norge)</option><option value="pl-PL" dir="ltr">polski (Polska)</option><option value="pt-BR" dir="ltr">português (Brasil)</option><option value="pt-PT" dir="ltr">português europeu</option><option value="ro-RO" dir="ltr">română (România)</option><option value="ru-RU" dir="ltr">русский (Россия)</option><option value="th-TH" dir="ltr">ไทย (ไทย)</option><option value="tr-TR" dir="ltr">Türkçe (Türkiye)</option><option value="zh-CN" dir="ltr">中文(中国)</option><option value="zh-HK" dir="ltr">中文(中國香港特別行政區)</option></select></li><li><label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v5.
|
|
1
|
+
<!doctype html><html lang="en" xml:lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="chrome=1"><meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1"><meta name="description" content="Vanilla Javascript form building module"><meta name="theme-color" content="#232323"><title>Formeo | Drag & Drop Form Creation</title><script type="module" crossorigin src="/formeo/assets/js/demo.min.js"></script><link rel="stylesheet" crossorigin href="/formeo/assets/css/demo.min.css"></head><body><div class="site-wrap"><header id="demo-header"><div class="header-inner"><img id="formeo-logo" src="/formeo/assets/img/formeo-logo.svg" alt="Formeo Logo" width="100"><nav aria-label="Framework navigation"><ul><li><label for="framework-select">Framework:</label> <select name="framework-select" id="framework-select" class="form-control"><option value="vanilla">Vanilla JavaScript</option><option value="angular">Angular</option><option value="react">React</option></select></li><li><label for="locale">Language</label> <select name="locale" id="locale" class="form-control"><option value="af-ZA" dir="ltr">Afrikaans (Suid-Afrika)</option><option value="ar-TN" dir="rtl">العربية (تونس)</option><option value="cs-CZ" dir="ltr">čeština (Česko)</option><option value="de-DE" dir="ltr">Deutsch (Deutschland)</option><option value="en-US" dir="ltr">English</option><option value="es-ES" dir="ltr">español de España</option><option value="fa-IR" dir="rtl">فارسی (ایران)</option><option value="fi-FI" dir="ltr">suomi (Suomi)</option><option value="fr-FR" dir="ltr">français (France)</option><option value="he-IL" dir="rtl">עברית (ישראל)</option><option value="hi-IN" dir="ltr">हिन्दी (भारत)</option><option value="hu-HU" dir="ltr">magyar (Magyarország)</option><option value="it-IT" dir="ltr">italiano (Italia)</option><option value="ja-JP" dir="ltr">日本語 (日本)</option><option value="nb-NO" dir="ltr">norsk bokmål (Norge)</option><option value="pl-PL" dir="ltr">polski (Polska)</option><option value="pt-BR" dir="ltr">português (Brasil)</option><option value="pt-PT" dir="ltr">português europeu</option><option value="ro-RO" dir="ltr">română (România)</option><option value="ru-RU" dir="ltr">русский (Россия)</option><option value="th-TH" dir="ltr">ไทย (ไทย)</option><option value="tr-TR" dir="ltr">Türkçe (Türkiye)</option><option value="zh-CN" dir="ltr">中文(中国)</option><option value="zh-HK" dir="ltr">中文(中國香港特別行政區)</option></select></li><li><label for="control-filter">Control Filter:</label> <input id="control-filter" placeholder="ex. text" class="form-control"></li><li style="float:right">v5.1.1</li></ul></nav></div></header><section id="main_content" class="inner"><div id="framework-container"></div></section><div class="container render-btn-wrap" id="editor-action-buttons"></div><div id="formData-popover" popover><div class="popover-header"><h3>Test formData</h3><div><button type="button" id="format-json">Format</button> <button type="button" id="collapse-json">Collapse</button> <button type="button" id="copy-json">Copy to Clipboard</button></div></div><pre id="formData-editor"></pre><div class="formData-actions"><button popovertarget="formData-popover" popovertargetaction="hide" type="button">Cancel</button> <button id="submit-formData" type="button">Submit</button></div></div><footer id="demo-footer"><nav aria-label="Footer navigation"><ul><li><a href="https://github.com/Draggable/formeo" target="_blank" title="View project on GitHub"><img src="/formeo/assets/img/github.png" width="77" alt="GitHub"></a></li></ul></nav></footer></div></body></html>
|
package/dist/formeo.cjs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
|
|
2
2
|
/**
|
|
3
3
|
formeo - https://formeo.io
|
|
4
|
-
Version: 5.
|
|
4
|
+
Version: 5.1.1
|
|
5
5
|
Author: Draggable https://draggable.io
|
|
6
6
|
*/
|
|
7
7
|
|
|
@@ -71,7 +71,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
71
71
|
allowSelect: "Laat Kies toe",
|
|
72
72
|
and: "en",
|
|
73
73
|
attribute: "kenmerk",
|
|
74
|
-
attributeNotPermitted:
|
|
74
|
+
attributeNotPermitted: "Attribuut \"{attribuut}\" is nie toegelaat nie, kies asseblief 'n ander.",
|
|
75
75
|
attributes: "eienskappe",
|
|
76
76
|
"attrs.class": "klas",
|
|
77
77
|
"attrs.className": "klas",
|
|
@@ -2124,7 +2124,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
2124
2124
|
"row.makeInputGroup": "Définir cette ligne comme groupe de saisie.",
|
|
2125
2125
|
"row.makeInputGroupDesc": "Les groupes de saisie permettent aux usagers de rajouter de multiples champs à la fois.",
|
|
2126
2126
|
"row.settings.fieldsetWrap": "Entourer le champ d'un élément <fieldset>",
|
|
2127
|
-
"row.settings.fieldsetWrap.aria":
|
|
2127
|
+
"row.settings.fieldsetWrap.aria": "Entourer le champ d'un \"Fieldset\"",
|
|
2128
2128
|
save: "Sauvegarder",
|
|
2129
2129
|
secondary: "Secondaire",
|
|
2130
2130
|
select: "Sélection",
|
|
@@ -2899,7 +2899,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
2899
2899
|
allowSelect: "Consenti selezione",
|
|
2900
2900
|
and: "e",
|
|
2901
2901
|
attribute: "Attributo",
|
|
2902
|
-
attributeNotPermitted:
|
|
2902
|
+
attributeNotPermitted: "L'attributo \"{attribute}\" non è permesso, per favore sceglierne un altro.",
|
|
2903
2903
|
attributes: "attributi",
|
|
2904
2904
|
"attrs.class": "Classe",
|
|
2905
2905
|
"attrs.className": "Classe",
|
|
@@ -5708,10 +5708,10 @@ e$1["de-DE"];
|
|
|
5708
5708
|
//#region node_modules/@draggable/formeo-languages/dist/formeo-languages.es.js
|
|
5709
5709
|
/**
|
|
5710
5710
|
@draggable/formeo-languages - https://github.com/Draggable/formeo-languages#readme
|
|
5711
|
-
Version: 3.
|
|
5711
|
+
Version: 3.5.0
|
|
5712
5712
|
Author: Kevin Chappell <kevin.b.chappell@gmail.com> (https://kevin-chappell.com)
|
|
5713
5713
|
*/
|
|
5714
|
-
var
|
|
5714
|
+
var s$1 = e$1["en-US"];
|
|
5715
5715
|
e$1["es-ES"];
|
|
5716
5716
|
e$1["fa-IR"];
|
|
5717
5717
|
e$1["fi-FI"];
|
|
@@ -6061,7 +6061,7 @@ if (globalThis !== void 0) globalThis.SmartTooltip = SmartTooltip;
|
|
|
6061
6061
|
var name$1, version$2, type, main, module$1, unpkg, exports$1, files, homepage, repository, author, contributors, bugs, description, keywords, ignore, config, scripts, devDependencies, dependencies, release, commitlint, package_default;
|
|
6062
6062
|
var init_package = __esmMin((() => {
|
|
6063
6063
|
name$1 = "formeo";
|
|
6064
|
-
version$2 = "5.
|
|
6064
|
+
version$2 = "5.1.1";
|
|
6065
6065
|
type = "module";
|
|
6066
6066
|
main = "dist/formeo.cjs.js";
|
|
6067
6067
|
module$1 = "dist/formeo.es.js";
|
|
@@ -10067,7 +10067,7 @@ function _typeof(o) {
|
|
|
10067
10067
|
}, _typeof(o);
|
|
10068
10068
|
}
|
|
10069
10069
|
function userAgent(pattern) {
|
|
10070
|
-
if (typeof window !== "undefined" && window.navigator) return
|
|
10070
|
+
if (typeof window !== "undefined" && window.navigator) return !!/*@__PURE__*/ navigator.userAgent.match(pattern);
|
|
10071
10071
|
}
|
|
10072
10072
|
function on(el, event, fn) {
|
|
10073
10073
|
el.addEventListener(event, fn, !IE11OrLess && captureMode);
|
|
@@ -11981,7 +11981,7 @@ var init_helpers$2 = __esmMin((() => {
|
|
|
11981
11981
|
}));
|
|
11982
11982
|
//#endregion
|
|
11983
11983
|
//#region src/lib/js/common/loaders.js
|
|
11984
|
-
var loaded, ajax, onLoadStylesheet, onLoadJavascript, insertScript, insertStyle, insertScripts, insertStyles, insertIcons, fetchIcons, LOADER_MAP, fetchDependencies, fetchFormeoStyle;
|
|
11984
|
+
var loaded, AJAX_TIMEOUT_MS, ajax, onLoadStylesheet, onLoadJavascript, insertScript, insertStyle, insertScripts, insertStyles, insertIcons, fetchIcons, LOADER_MAP, fetchDependencies, fetchFormeoStyle;
|
|
11985
11985
|
var init_loaders = __esmMin((() => {
|
|
11986
11986
|
init_constants();
|
|
11987
11987
|
init_dom();
|
|
@@ -11991,12 +11991,14 @@ var init_loaders = __esmMin((() => {
|
|
|
11991
11991
|
css: /* @__PURE__ */ new Set(),
|
|
11992
11992
|
formeoSprite: null
|
|
11993
11993
|
};
|
|
11994
|
-
|
|
11994
|
+
AJAX_TIMEOUT_MS = 1e4;
|
|
11995
|
+
ajax = (fileUrl, callback, onError = noop, timeoutMs = AJAX_TIMEOUT_MS) => {
|
|
11995
11996
|
return new Promise((resolve) => {
|
|
11996
|
-
|
|
11997
|
+
const signal = typeof AbortSignal !== "undefined" && AbortSignal.timeout ? AbortSignal.timeout(timeoutMs) : void 0;
|
|
11998
|
+
return fetch(fileUrl, signal ? { signal } : void 0).then((data) => {
|
|
11997
11999
|
if (!data.ok) return resolve(onError(data));
|
|
11998
12000
|
resolve(callback ? callback(data) : data);
|
|
11999
|
-
}).catch((err) => onError(err));
|
|
12001
|
+
}).catch((err) => resolve(onError(err)));
|
|
12000
12002
|
});
|
|
12001
12003
|
};
|
|
12002
12004
|
onLoadStylesheet = (elem, cb) => {
|
|
@@ -17895,7 +17897,7 @@ var FormeoEditor$1 = class {
|
|
|
17895
17897
|
fetchIcons(this.opts.svgSprite),
|
|
17896
17898
|
fetchFormeoStyle(this.opts.style),
|
|
17897
17899
|
s.init({
|
|
17898
|
-
preloaded: { "en-US":
|
|
17900
|
+
preloaded: { "en-US": s$1 },
|
|
17899
17901
|
...this.opts.i18n,
|
|
17900
17902
|
locale: globalThis.sessionStorage?.getItem(SESSION_LOCALE_KEY)
|
|
17901
17903
|
})
|
|
@@ -18071,20 +18073,56 @@ var baseId = (id) => {
|
|
|
18071
18073
|
};
|
|
18072
18074
|
var isVisible = (elem) => {
|
|
18073
18075
|
if (!elem) return false;
|
|
18074
|
-
if (elem.hasAttribute("hidden") || elem.parentElement
|
|
18076
|
+
if (elem.hasAttribute("hidden") || elem.parentElement?.hasAttribute("hidden")) return false;
|
|
18075
18077
|
const computedStyle = window.getComputedStyle(elem);
|
|
18076
18078
|
return !(computedStyle.display === "none" || computedStyle.visibility === "hidden" || computedStyle.opacity === "0");
|
|
18077
18079
|
};
|
|
18080
|
+
var CHECKABLE_INPUT_SELECTOR = "input[type=\"checkbox\"], input[type=\"radio\"]";
|
|
18081
|
+
var CHECKABLE_TYPES = new Set(["checkbox", "radio"]);
|
|
18082
|
+
var tagName$1 = (elem) => elem?.tagName?.toLowerCase();
|
|
18083
|
+
var isCheckableInput = (elem) => tagName$1(elem) === "input" && CHECKABLE_TYPES.has(elem.type);
|
|
18084
|
+
/**
|
|
18085
|
+
* Radio and checkbox fields render as a wrapper holding one input per option, so a
|
|
18086
|
+
* field address resolves to the wrapper rather than to anything carrying a value.
|
|
18087
|
+
* @param {Element} elem
|
|
18088
|
+
* @return {Array<Element>|null} option inputs, or null when elem is not a group
|
|
18089
|
+
*/
|
|
18090
|
+
var checkableGroupInputs = (elem) => {
|
|
18091
|
+
if (!elem || isCheckableInput(elem) || typeof elem.querySelectorAll !== "function") return null;
|
|
18092
|
+
const inputs = elem.querySelectorAll(CHECKABLE_INPUT_SELECTOR);
|
|
18093
|
+
return inputs.length ? Array.from(inputs) : null;
|
|
18094
|
+
};
|
|
18095
|
+
var isCheckableGroup = (elem) => Boolean(checkableGroupInputs(elem));
|
|
18096
|
+
/**
|
|
18097
|
+
* Value a condition compares against. Controls that can hold several values at once
|
|
18098
|
+
* yield an array so that a single selection still matches an `equals` comparison.
|
|
18099
|
+
* @param {Element} elem
|
|
18100
|
+
* @return {String|Array<String>|undefined}
|
|
18101
|
+
*/
|
|
18102
|
+
var elementValue = (elem) => {
|
|
18103
|
+
if (!elem) return;
|
|
18104
|
+
const groupInputs = checkableGroupInputs(elem);
|
|
18105
|
+
if (groupInputs) {
|
|
18106
|
+
const checkedValues = groupInputs.filter((input) => input.checked).map((input) => input.value);
|
|
18107
|
+
return groupInputs.every((input) => input.type === "radio") ? checkedValues[0] ?? "" : checkedValues;
|
|
18108
|
+
}
|
|
18109
|
+
if (tagName$1(elem) === "select" && elem.multiple) return Array.from(elem.selectedOptions, (option) => option.value);
|
|
18110
|
+
if (isCheckableInput(elem)) return elem.checked ? elem.value : "";
|
|
18111
|
+
return elem.value;
|
|
18112
|
+
};
|
|
18113
|
+
var isChecked = (elem) => {
|
|
18114
|
+
const groupInputs = checkableGroupInputs(elem);
|
|
18115
|
+
return groupInputs ? groupInputs.some((input) => input.checked) : Boolean(elem?.checked);
|
|
18116
|
+
};
|
|
18078
18117
|
var propertyMap = {
|
|
18079
18118
|
isChecked: (elem) => {
|
|
18080
|
-
return elem
|
|
18119
|
+
return isChecked(elem);
|
|
18081
18120
|
},
|
|
18082
18121
|
isNotChecked: (elem) => {
|
|
18083
|
-
return !elem
|
|
18084
|
-
},
|
|
18085
|
-
value: (elem) => {
|
|
18086
|
-
return elem.value;
|
|
18122
|
+
return !isChecked(elem);
|
|
18087
18123
|
},
|
|
18124
|
+
value: elementValue,
|
|
18125
|
+
checked: elementValue,
|
|
18088
18126
|
isVisible: (elem) => {
|
|
18089
18127
|
return isVisible(elem);
|
|
18090
18128
|
},
|
|
@@ -18101,11 +18139,16 @@ var createRemoveButton = () => dom.btnTemplate({
|
|
|
18101
18139
|
click: ({ target }) => target.parentElement.remove()
|
|
18102
18140
|
}
|
|
18103
18141
|
});
|
|
18142
|
+
var equals = (source, target) => Array.isArray(source) ? source.some((value) => (0, import_isEqual.default)(value, target)) : (0, import_isEqual.default)(source, target);
|
|
18143
|
+
var contains = (source, target) => {
|
|
18144
|
+
if (source == null) return false;
|
|
18145
|
+
return Array.isArray(source) ? source.includes(target) : String(source).includes(target);
|
|
18146
|
+
};
|
|
18104
18147
|
var comparisonHandlers = {
|
|
18105
|
-
equals
|
|
18106
|
-
notEquals: (source, target) => !(
|
|
18107
|
-
contains
|
|
18108
|
-
notContains: (source, target) => !source
|
|
18148
|
+
equals,
|
|
18149
|
+
notEquals: (source, target) => !equals(source, target),
|
|
18150
|
+
contains,
|
|
18151
|
+
notContains: (source, target) => !contains(source, target)
|
|
18109
18152
|
};
|
|
18110
18153
|
var comparisonMap = Object.entries(COMPARISON_OPERATORS).reduce((acc, [key, value]) => {
|
|
18111
18154
|
acc[value] = comparisonHandlers[key];
|
|
@@ -18373,7 +18416,8 @@ var FormeoRenderer$1 = class {
|
|
|
18373
18416
|
* @return {Array} flattened array of conditions
|
|
18374
18417
|
*/
|
|
18375
18418
|
handleComponentCondition = (component, ifRest, thenConditions) => {
|
|
18376
|
-
if (component
|
|
18419
|
+
if (!component) return;
|
|
18420
|
+
if (isNodeCollection(component)) {
|
|
18377
18421
|
for (const elem of component) this.handleComponentCondition(elem, ifRest, thenConditions);
|
|
18378
18422
|
return;
|
|
18379
18423
|
}
|
|
@@ -18385,23 +18429,25 @@ var FormeoRenderer$1 = class {
|
|
|
18385
18429
|
if (this.evaluateCondition(ifRest, fakeEvt)) for (const thenCondition of thenConditions) this.execResult(thenCondition, fakeEvt);
|
|
18386
18430
|
};
|
|
18387
18431
|
applyConditions = () => {
|
|
18388
|
-
for (const { conditions } of Object.values(this.components))
|
|
18389
|
-
|
|
18390
|
-
for (const
|
|
18391
|
-
const {
|
|
18392
|
-
|
|
18393
|
-
|
|
18394
|
-
|
|
18395
|
-
|
|
18396
|
-
}
|
|
18397
|
-
if (isAddress(target)) {
|
|
18398
|
-
const { component, options } = this.getComponent(target);
|
|
18399
|
-
const targetComponent = options || component;
|
|
18400
|
-
this.handleComponentCondition(targetComponent, ifCondition, thenConditions);
|
|
18432
|
+
for (const { conditions } of Object.values(this.components)) {
|
|
18433
|
+
if (!conditions) continue;
|
|
18434
|
+
for (const condition of conditions) {
|
|
18435
|
+
const { if: ifConditions = [], then: thenConditions = [] } = condition;
|
|
18436
|
+
for (const ifCondition of ifConditions) try {
|
|
18437
|
+
this.applyCondition(ifCondition, thenConditions);
|
|
18438
|
+
} catch (err) {
|
|
18439
|
+
console.error("formeo: condition skipped", ifCondition, err);
|
|
18401
18440
|
}
|
|
18402
18441
|
}
|
|
18403
18442
|
}
|
|
18404
18443
|
};
|
|
18444
|
+
applyCondition = (ifCondition, thenConditions) => {
|
|
18445
|
+
for (const address of [ifCondition.source, ifCondition.target]) {
|
|
18446
|
+
if (!isAddress(address)) continue;
|
|
18447
|
+
const { component, options } = this.getComponent(address);
|
|
18448
|
+
this.handleComponentCondition(options || component, ifCondition, thenConditions);
|
|
18449
|
+
}
|
|
18450
|
+
};
|
|
18405
18451
|
/**
|
|
18406
18452
|
* Evaulate conditions
|
|
18407
18453
|
*/
|
|
@@ -18423,9 +18469,10 @@ var FormeoRenderer$1 = class {
|
|
|
18423
18469
|
}
|
|
18424
18470
|
};
|
|
18425
18471
|
getComponentProperty = (address, propertyName) => {
|
|
18426
|
-
const { component, option } = this.getComponent(address);
|
|
18472
|
+
const { component, option } = this.getComponent(address) || {};
|
|
18427
18473
|
const elem = option || component;
|
|
18428
|
-
|
|
18474
|
+
if (!elem) return;
|
|
18475
|
+
return propertyMap[propertyName] ? propertyMap[propertyName](elem) : elem[propertyName];
|
|
18429
18476
|
};
|
|
18430
18477
|
getComponent = (address) => {
|
|
18431
18478
|
const result = { component: null };
|
|
@@ -18450,7 +18497,14 @@ var FormeoRenderer$1 = class {
|
|
|
18450
18497
|
return components;
|
|
18451
18498
|
};
|
|
18452
18499
|
};
|
|
18453
|
-
var
|
|
18500
|
+
var isDomNode = (value) => Boolean(value) && typeof value.nodeType === "number";
|
|
18501
|
+
var isNodeCollection = (value) => Boolean(value) && !isDomNode(value) && typeof value.length === "number";
|
|
18502
|
+
var tagName = (component) => component.tagName?.toLowerCase();
|
|
18503
|
+
var listenTypeMap = [
|
|
18504
|
+
["change", (component) => isCheckableGroup(component)],
|
|
18505
|
+
["change", (component) => tagName(component) === "select" || ["checkbox", "radio"].includes(component.type)],
|
|
18506
|
+
["input", (component) => ["input", "textarea"].includes(tagName(component))]
|
|
18507
|
+
];
|
|
18454
18508
|
var LISTEN_TYPE_MAP = (component) => {
|
|
18455
18509
|
const [listenerEvent] = listenTypeMap.find((typeMap) => typeMap[1](component)) || [false];
|
|
18456
18510
|
return listenerEvent;
|