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.
Files changed (78) hide show
  1. package/README.md +3 -3
  2. package/dist/demo/assets/css/demo.min.css +1 -1
  3. package/dist/demo/assets/css/demo.min.css.gz +0 -0
  4. package/dist/demo/assets/css/formeo.min.css +1 -1
  5. package/dist/demo/assets/js/demo.min.js +55 -55
  6. package/dist/demo/assets/js/demo.min.js.gz +0 -0
  7. package/dist/demo/assets/js/form.min.js +1 -1
  8. package/dist/demo/assets/js/formeo.cjs.js +94 -40
  9. package/dist/demo/assets/js/formeo.es.js +94 -40
  10. package/dist/demo/assets/js/formeo.min.cjs.js +2 -2
  11. package/dist/demo/assets/js/formeo.min.es.js +2 -2
  12. package/dist/demo/assets/js/formeo.min.js +94 -40
  13. package/dist/demo/assets/js/formeo.min.umd.js +2 -2
  14. package/dist/demo/assets/js/formeo.umd.js +94 -40
  15. package/dist/demo/assets/js/html.min.js +1 -1
  16. package/dist/demo/assets/js/layout.min.js +1 -1
  17. package/dist/demo/assets/js/mode-json.min.js +1 -1
  18. package/dist/demo/assets/js/mode-json.min.js.gz +0 -0
  19. package/dist/demo/assets/js/theme-github_light_default.min.js +1 -1
  20. package/dist/demo/index.html +1 -1
  21. package/dist/formeo.cjs.js +94 -40
  22. package/dist/formeo.css +1 -1
  23. package/dist/formeo.es.js +94 -40
  24. package/dist/formeo.min.cjs.js +2 -2
  25. package/dist/formeo.min.css +1 -1
  26. package/dist/formeo.min.es.js +2 -2
  27. package/dist/formeo.min.js +94 -40
  28. package/dist/formeo.min.umd.js +2 -2
  29. package/dist/formeo.umd.js +94 -40
  30. package/package.json +1 -1
  31. package/dist/demo/assets/lang/af-ZA.json +0 -1
  32. package/dist/demo/assets/lang/af-ZA.lang +0 -238
  33. package/dist/demo/assets/lang/ar-TN.json +0 -1
  34. package/dist/demo/assets/lang/ar-TN.lang +0 -238
  35. package/dist/demo/assets/lang/cs-CZ.json +0 -1
  36. package/dist/demo/assets/lang/cs-CZ.lang +0 -238
  37. package/dist/demo/assets/lang/de-DE.json +0 -1
  38. package/dist/demo/assets/lang/de-DE.lang +0 -238
  39. package/dist/demo/assets/lang/en-US.json +0 -1
  40. package/dist/demo/assets/lang/en-US.lang +0 -234
  41. package/dist/demo/assets/lang/es-ES.json +0 -1
  42. package/dist/demo/assets/lang/es-ES.lang +0 -238
  43. package/dist/demo/assets/lang/fa-IR.json +0 -1
  44. package/dist/demo/assets/lang/fa-IR.lang +0 -238
  45. package/dist/demo/assets/lang/fi-FI.json +0 -1
  46. package/dist/demo/assets/lang/fi-FI.lang +0 -238
  47. package/dist/demo/assets/lang/fr-FR.json +0 -1
  48. package/dist/demo/assets/lang/fr-FR.lang +0 -238
  49. package/dist/demo/assets/lang/he-IL.json +0 -1
  50. package/dist/demo/assets/lang/he-IL.lang +0 -238
  51. package/dist/demo/assets/lang/hi-IN.json +0 -1
  52. package/dist/demo/assets/lang/hi-IN.lang +0 -238
  53. package/dist/demo/assets/lang/hu-HU.json +0 -1
  54. package/dist/demo/assets/lang/hu-HU.lang +0 -238
  55. package/dist/demo/assets/lang/it-IT.json +0 -1
  56. package/dist/demo/assets/lang/it-IT.lang +0 -238
  57. package/dist/demo/assets/lang/ja-JP.json +0 -1
  58. package/dist/demo/assets/lang/ja-JP.lang +0 -238
  59. package/dist/demo/assets/lang/nb-NO.json +0 -1
  60. package/dist/demo/assets/lang/nb-NO.lang +0 -238
  61. package/dist/demo/assets/lang/pl-PL.json +0 -1
  62. package/dist/demo/assets/lang/pl-PL.lang +0 -238
  63. package/dist/demo/assets/lang/pt-BR.json +0 -1
  64. package/dist/demo/assets/lang/pt-BR.lang +0 -238
  65. package/dist/demo/assets/lang/pt-PT.json +0 -1
  66. package/dist/demo/assets/lang/pt-PT.lang +0 -238
  67. package/dist/demo/assets/lang/ro-RO.json +0 -1
  68. package/dist/demo/assets/lang/ro-RO.lang +0 -238
  69. package/dist/demo/assets/lang/ru-RU.json +0 -1
  70. package/dist/demo/assets/lang/ru-RU.lang +0 -238
  71. package/dist/demo/assets/lang/th-TH.json +0 -1
  72. package/dist/demo/assets/lang/th-TH.lang +0 -238
  73. package/dist/demo/assets/lang/tr-TR.json +0 -1
  74. package/dist/demo/assets/lang/tr-TR.lang +0 -238
  75. package/dist/demo/assets/lang/zh-CN.json +0 -1
  76. package/dist/demo/assets/lang/zh-CN.lang +0 -238
  77. package/dist/demo/assets/lang/zh-HK.json +0 -1
  78. 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.0.3
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: `Attribuut "{attribuut}" is nie toegelaat nie, kies asseblief 'n ander.`,
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": `Entourer le champ d'un "Fieldset"`,
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: `L'attributo "{attribute}" non è permesso, per favore sceglierne un altro.`,
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.4.1
5714
+ Version: 3.5.0
5715
5715
  Author: Kevin Chappell <kevin.b.chappell@gmail.com> (https://kevin-chappell.com)
5716
5716
  */
5717
- var i = e$1["en-US"];
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.0.3";
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 !!/* @__PURE__ */ navigator.userAgent.match(pattern);
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
- ajax = (fileUrl, callback, onError = noop) => {
11997
+ AJAX_TIMEOUT_MS = 1e4;
11998
+ ajax = (fileUrl, callback, onError = noop, timeoutMs = AJAX_TIMEOUT_MS) => {
11998
11999
  return new Promise((resolve) => {
11999
- return fetch(fileUrl).then((data) => {
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": i },
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.hasAttribute("hidden")) return false;
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.checked;
18122
+ return isChecked(elem);
18084
18123
  },
18085
18124
  isNotChecked: (elem) => {
18086
- return !elem.checked;
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: import_isEqual.default,
18109
- notEquals: (source, target) => !(0, import_isEqual.default)(source, target),
18110
- contains: (source, target) => source.includes(target),
18111
- notContains: (source, target) => !source.includes(target)
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.length) {
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)) if (conditions) for (const condition of conditions) {
18392
- const { if: ifConditions, then: thenConditions } = condition;
18393
- for (const ifCondition of ifConditions) {
18394
- const { source, target } = ifCondition;
18395
- if (isAddress(source)) {
18396
- const { component, options } = this.getComponent(source);
18397
- const sourceComponent = options || component;
18398
- this.handleComponentCondition(sourceComponent, ifCondition, thenConditions);
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
- return propertyMap[propertyName]?.(elem) || elem[propertyName];
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 listenTypeMap = [["input", (c) => ["textarea", "text"].includes(c.type)], ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]];
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;
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 5.0.3
4
+ Version: 5.1.1
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 5.0.3
4
+ Version: 5.1.1
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 5.0.3
4
+ Version: 5.1.1
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 5.0.3
4
+ Version: 5.1.1
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7
 
@@ -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 &amp; 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.0.3</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>
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 &amp; 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>
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 5.0.3
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: `Attribuut "{attribuut}" is nie toegelaat nie, kies asseblief 'n ander.`,
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 &lt;fieldset&gt;",
2127
- "row.settings.fieldsetWrap.aria": `Entourer le champ d'un "Fieldset"`,
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: `L'attributo "{attribute}" non è permesso, per favore sceglierne un altro.`,
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.4.1
5711
+ Version: 3.5.0
5712
5712
  Author: Kevin Chappell <kevin.b.chappell@gmail.com> (https://kevin-chappell.com)
5713
5713
  */
5714
- var i = e$1["en-US"];
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.0.3";
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 !!/* @__PURE__ */ navigator.userAgent.match(pattern);
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
- ajax = (fileUrl, callback, onError = noop) => {
11994
+ AJAX_TIMEOUT_MS = 1e4;
11995
+ ajax = (fileUrl, callback, onError = noop, timeoutMs = AJAX_TIMEOUT_MS) => {
11995
11996
  return new Promise((resolve) => {
11996
- return fetch(fileUrl).then((data) => {
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": i },
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.hasAttribute("hidden")) return false;
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.checked;
18119
+ return isChecked(elem);
18081
18120
  },
18082
18121
  isNotChecked: (elem) => {
18083
- return !elem.checked;
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: import_isEqual.default,
18106
- notEquals: (source, target) => !(0, import_isEqual.default)(source, target),
18107
- contains: (source, target) => source.includes(target),
18108
- notContains: (source, target) => !source.includes(target)
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.length) {
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)) if (conditions) for (const condition of conditions) {
18389
- const { if: ifConditions, then: thenConditions } = condition;
18390
- for (const ifCondition of ifConditions) {
18391
- const { source, target } = ifCondition;
18392
- if (isAddress(source)) {
18393
- const { component, options } = this.getComponent(source);
18394
- const sourceComponent = options || component;
18395
- this.handleComponentCondition(sourceComponent, ifCondition, thenConditions);
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
- return propertyMap[propertyName]?.(elem) || elem[propertyName];
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 listenTypeMap = [["input", (c) => ["textarea", "text"].includes(c.type)], ["change", (c) => ["select"].includes(c.tagName.toLowerCase()) || ["checkbox", "radio"].includes(c.type)]];
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;
package/dist/formeo.css CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  formeo - https://formeo.io
4
- Version: 5.0.3
4
+ Version: 5.1.1
5
5
  Author: Draggable https://draggable.io
6
6
  */
7
7