@tsed/react-formio 1.11.1 → 1.13.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.
Files changed (152) hide show
  1. package/.env +2 -1
  2. package/craco.config.js +11 -1
  3. package/dist/components/alert/alert.component.spec.d.ts +1 -0
  4. package/dist/components/alert/alert.stories.d.ts +15 -0
  5. package/dist/components/card/card.component.d.ts +2 -1
  6. package/dist/components/form/form.component.d.ts +2 -0
  7. package/dist/components/form/form.stories.d.ts +37 -0
  8. package/dist/components/form/useForm.hook.d.ts +1 -0
  9. package/dist/components/form-action/formAction.stories.d.ts +90 -414
  10. package/dist/components/input-text/inputText.component.d.ts +1 -1
  11. package/dist/components/input-text/inputText.component.spec.d.ts +1 -0
  12. package/dist/components/loader/loader.component.d.ts +2 -2
  13. package/dist/components/loader/loader.stories.d.ts +15 -0
  14. package/dist/components/pagination/pagination.component.spec.d.ts +1 -0
  15. package/dist/components/pagination/pagination.stories.d.ts +0 -27
  16. package/dist/components/select/select.component.spec.d.ts +1 -0
  17. package/dist/components/tabs/tabs.component.spec.d.ts +1 -0
  18. package/dist/index.js +114 -35
  19. package/dist/index.js.map +1 -1
  20. package/dist/index.modern.js +86 -34
  21. package/dist/index.modern.js.map +1 -1
  22. package/jest.config.js +1 -1
  23. package/package.json +5 -9
  24. package/readme.md +114 -86
  25. package/src/components/__fixtures__/form-schema.json +10 -42
  26. package/src/components/__fixtures__/form.fixture.json +1 -1
  27. package/src/components/actions-table/actionsTable.component.spec.tsx +4 -13
  28. package/src/components/actions-table/actionsTable.component.tsx +3 -11
  29. package/src/components/alert/alert.component.spec.tsx +97 -0
  30. package/src/components/alert/alert.component.tsx +2 -8
  31. package/src/components/alert/alert.stories.tsx +17 -0
  32. package/src/components/card/card.component.tsx +2 -5
  33. package/src/components/form/form.component.tsx +4 -8
  34. package/src/components/form/form.stories.tsx +66 -2
  35. package/src/components/form/useForm.hook.ts +29 -14
  36. package/src/components/form-access/formAccess.component.tsx +19 -82
  37. package/src/components/form-access/formAccess.schema.ts +7 -23
  38. package/src/components/form-access/formAccess.stories.tsx +2 -9
  39. package/src/components/form-access/formAccess.utils.spec.ts +4 -22
  40. package/src/components/form-access/formAccess.utils.ts +7 -29
  41. package/src/components/form-action/formAction.component.tsx +3 -19
  42. package/src/components/form-action/formAction.stories.tsx +251 -672
  43. package/src/components/form-builder/formBuilder.component.tsx +4 -13
  44. package/src/components/form-builder/formBuilder.stories.tsx +12 -24
  45. package/src/components/form-control/formControl.component.tsx +2 -8
  46. package/src/components/form-edit/formCtas.component.tsx +5 -23
  47. package/src/components/form-edit/formEdit.component.tsx +2 -20
  48. package/src/components/form-edit/formEdit.reducer.ts +2 -8
  49. package/src/components/form-edit/formEdit.stories.tsx +3 -15
  50. package/src/components/form-edit/formParameters.component.tsx +3 -20
  51. package/src/components/form-edit/useFormEdit.hook.ts +2 -9
  52. package/src/components/form-settings/formSettings.component.spec.tsx +2 -9
  53. package/src/components/form-settings/formSettings.component.tsx +6 -34
  54. package/src/components/form-settings/formSettings.stories.tsx +1 -6
  55. package/src/components/form-settings/formSettings.utils.spec.ts +1 -4
  56. package/src/components/form-settings/formSettings.utils.ts +2 -7
  57. package/src/components/forms-table/components/formCell.component.tsx +2 -6
  58. package/src/components/forms-table/formsTable.component.tsx +2 -7
  59. package/src/components/input-tags/inputTags.component.tsx +10 -34
  60. package/src/components/input-tags/inputTags.stories.tsx +4 -14
  61. package/src/components/input-text/inputText.component.spec.tsx +56 -0
  62. package/src/components/input-text/inputText.component.tsx +4 -5
  63. package/src/components/input-text/inputText.stories.tsx +6 -26
  64. package/src/components/loader/loader.component.spec.tsx +7 -6
  65. package/src/components/loader/loader.component.tsx +3 -12
  66. package/src/components/loader/loader.stories.tsx +17 -0
  67. package/src/components/modal/modal.component.spec.tsx +8 -14
  68. package/src/components/modal/modal.component.tsx +6 -27
  69. package/src/components/modal/modal.stories.tsx +1 -5
  70. package/src/components/modal/removeModal.component.tsx +4 -22
  71. package/src/components/pagination/pagination.component.spec.tsx +111 -0
  72. package/src/components/pagination/pagination.component.tsx +10 -42
  73. package/src/components/pagination/pagination.stories.tsx +9 -29
  74. package/src/components/react-component/reactComponent.component.tsx +3 -11
  75. package/src/components/select/select.component.spec.tsx +86 -0
  76. package/src/components/select/select.component.tsx +11 -15
  77. package/src/components/select/select.stories.tsx +6 -26
  78. package/src/components/submissions-table/submissionsTable.component.tsx +1 -3
  79. package/src/components/submissions-table/submissionsTable.stories.tsx +1 -1
  80. package/src/components/table/components/defaultArrowSort.component.tsx +1 -10
  81. package/src/components/table/components/defaultCell.component.tsx +1 -4
  82. package/src/components/table/components/defaultCellHeader.component.tsx +4 -14
  83. package/src/components/table/components/defaultCellOperations.component.tsx +14 -25
  84. package/src/components/table/components/defaultOperationButton.component.tsx +2 -10
  85. package/src/components/table/filters/defaultColumnFilter.component.spec.tsx +1 -1
  86. package/src/components/table/filters/selectColumnFilter.component.spec.tsx +2 -10
  87. package/src/components/table/filters/selectColumnFilter.component.tsx +2 -6
  88. package/src/components/table/table.component.tsx +13 -53
  89. package/src/components/table/table.stories.tsx +1 -1
  90. package/src/components/table/utils/getPageNumbers.ts +3 -11
  91. package/src/components/table/utils/mapFormToColumns.tsx +14 -22
  92. package/src/components/table/utils/useOperations.hook.tsx +2 -12
  93. package/src/components/tabs/tabs.component.spec.tsx +86 -0
  94. package/src/components/tabs/tabs.component.stories.tsx +2 -9
  95. package/src/components/tabs/tabs.component.tsx +9 -43
  96. package/src/interfaces/Operation.ts +1 -4
  97. package/src/react-table.d.ts +9 -28
  98. package/src/stores/action/action.actions.ts +31 -33
  99. package/src/stores/action/action.reducers.spec.ts +1 -8
  100. package/src/stores/action/action.reducers.ts +1 -8
  101. package/src/stores/action/action.selectors.ts +1 -2
  102. package/src/stores/action-info/action-info.actions.spec.ts +1 -5
  103. package/src/stores/action-info/action-info.actions.ts +16 -19
  104. package/src/stores/action-info/action-info.reducers.spec.ts +1 -6
  105. package/src/stores/action-info/action-info.reducers.ts +1 -6
  106. package/src/stores/action-info/action-info.selectors.ts +1 -4
  107. package/src/stores/actions/actions.actions.spec.ts +1 -6
  108. package/src/stores/actions/actions.actions.ts +16 -19
  109. package/src/stores/actions/actions.reducers.spec.ts +1 -6
  110. package/src/stores/actions/actions.reducers.ts +1 -6
  111. package/src/stores/actions/actions.selectors.ts +2 -4
  112. package/src/stores/auth/auth.reducers.ts +1 -4
  113. package/src/stores/auth/auth.selectors.spec.ts +1 -5
  114. package/src/stores/auth/auth.selectors.ts +3 -6
  115. package/src/stores/auth/auth.utils.tsx +2 -8
  116. package/src/stores/auth/getAccess.action.spec.ts +11 -54
  117. package/src/stores/auth/getAccess.action.ts +1 -6
  118. package/src/stores/auth/initAuth.action.ts +15 -17
  119. package/src/stores/form/form.actions.spec.ts +8 -39
  120. package/src/stores/form/form.actions.ts +55 -64
  121. package/src/stores/form/form.reducers.spec.ts +1 -7
  122. package/src/stores/form/form.reducers.ts +1 -8
  123. package/src/stores/form/form.selectors.ts +1 -2
  124. package/src/stores/forms/forms.actions.spec.ts +5 -18
  125. package/src/stores/forms/forms.actions.ts +17 -21
  126. package/src/stores/forms/forms.reducers.spec.ts +1 -6
  127. package/src/stores/forms/forms.reducers.ts +2 -13
  128. package/src/stores/forms/forms.selectors.ts +2 -4
  129. package/src/stores/index.spec.ts +6 -9
  130. package/src/stores/root/root.selectors.spec.ts +1 -6
  131. package/src/stores/root/root.selectors.ts +6 -24
  132. package/src/stores/submission/submission.actions.spec.ts +11 -33
  133. package/src/stores/submission/submission.actions.ts +57 -66
  134. package/src/stores/submission/submission.reducers.spec.ts +17 -27
  135. package/src/stores/submission/submission.reducers.ts +1 -4
  136. package/src/stores/submission/submission.selectors.ts +1 -4
  137. package/src/stores/submissions/submissions.actions.spec.ts +5 -18
  138. package/src/stores/submissions/submissions.actions.ts +17 -26
  139. package/src/stores/submissions/submissions.reducers.spec.ts +3 -12
  140. package/src/stores/submissions/submissions.reducers.ts +3 -17
  141. package/src/stores/submissions/submissions.selectors.spec.ts +1 -4
  142. package/src/stores/submissions/submissions.selectors.ts +2 -4
  143. package/src/utils/getEventValue.ts +1 -4
  144. package/src/utils/iconClass.ts +2 -10
  145. package/src/utils/mapPagination.ts +1 -6
  146. package/src/utils/mapRequestParams.ts +2 -12
  147. package/src/utils/url.test.ts +4 -12
  148. package/src/utils/url.ts +2 -7
  149. package/tsconfig.json +4 -12
  150. package/tsconfig.test.json +1 -1
  151. package/.eslintrc +0 -47
  152. package/.prettierrc +0 -10
package/src/components/form-action/formAction.stories.tsx CHANGED
@@ -38,716 +38,296 @@ export const Sandbox = (args: any) => {
38
38
 
39
39
  Sandbox.args = {
40
40
  actionInfo: {
41
- name: "save",
42
- title: "Save Submission",
43
- description: "Saves the submission into the database.",
44
- priority: 10,
45
- defaults: {
46
- handler: ["before"],
47
- method: ["create", "update"],
48
- priority: 10,
49
- name: "save",
50
- title: "Save Submission"
41
+ "name": "save",
42
+ "title": "Save Submission",
43
+ "description": "Saves the submission into the database.",
44
+ "priority": 10,
45
+ "defaults": {
46
+ "handler": [
47
+ "before"
48
+ ],
49
+ "method": [
50
+ "create",
51
+ "update"
52
+ ],
53
+ "priority": 10,
54
+ "name": "save",
55
+ "title": "Save Submission"
56
+ },
57
+ "access": {
58
+ "handler": false,
59
+ "method": false
51
60
  },
52
- access: { handler: false, method: false },
53
- settingsForm: {
54
- components: [
55
- { type: "hidden", input: true, key: "priority" },
61
+ "settingsForm": {
62
+ "components": [
63
+ {
64
+ "type": "hidden",
65
+ "input": true,
66
+ "key": "priority"
67
+ },
56
68
  {
57
- type: "hidden",
58
- input: true,
59
- key: "name"
69
+ "type": "hidden",
70
+ "input": true,
71
+ "key": "name"
60
72
  },
61
- { type: "textfield", input: true, label: "Title", key: "title" },
62
73
  {
63
- type: "fieldset",
64
- input: false,
65
- tree: true,
66
- legend: "Action Settings",
67
- components: [
74
+ "type": "textfield",
75
+ "input": true,
76
+ "label": "Title",
77
+ "key": "title"
78
+ },
79
+ {
80
+ "type": "fieldset",
81
+ "input": false,
82
+ "tree": true,
83
+ "legend": "Action Settings",
84
+ "components": [
68
85
  {
69
- input: false,
70
- type: "container",
71
- key: "settings",
72
- components: [
86
+ "input": false,
87
+ "type": "container",
88
+ "key": "settings",
89
+ "components": [
73
90
  {
74
- type: "resourcefields",
75
- key: "resource",
76
- title: "Save submission to",
77
- placeholder: "This form",
78
- basePath: "/project/5d0797bc872fc7d140559857/form",
79
- form: "602967600685b24dbe24e999",
80
- required: false
91
+ "type": "resourcefields",
92
+ "key": "resource",
93
+ "title": "Save submission to",
94
+ "placeholder": "This form",
95
+ "basePath": "/project/5d0797bc872fc7d140559857/form",
96
+ "form": "62b18b10fbbba513555c6c5e",
97
+ "required": false
81
98
  }
82
99
  ]
83
100
  }
84
101
  ]
85
102
  },
86
103
  {
87
- type: "fieldset",
88
- input: false,
89
- tree: false,
90
- key: "conditions",
91
- legend: "Action Execution",
92
- components: [
104
+ "type": "fieldset",
105
+ "input": false,
106
+ "tree": false,
107
+ "key": "conditions",
108
+ "legend": "Action Execution",
109
+ "components": [
93
110
  {
94
- type: "select",
95
- input: true,
96
- key: "handler",
97
- label: "Handler",
98
- placeholder: "Select which handler(s) you would like to trigger",
99
- dataSrc: "json",
100
- data: {
101
- json:
102
- '[{"name":"before","title":"Before"},{"name":"after","title":"After"}]'
111
+ "type": "select",
112
+ "input": true,
113
+ "key": "handler",
114
+ "label": "Handler",
115
+ "placeholder": "Select which handler(s) you would like to trigger",
116
+ "dataSrc": "json",
117
+ "data": {
118
+ "json": "[{\"name\":\"before\",\"title\":\"Before\"},{\"name\":\"after\",\"title\":\"After\"}]"
103
119
  },
104
- template: "<span>{{ item.title }}</span>",
105
- valueProperty: "name",
106
- multiple: true
120
+ "template": "<span>{{ item.title }}</span>",
121
+ "valueProperty": "name",
122
+ "multiple": true
107
123
  },
108
124
  {
109
- type: "select",
110
- input: true,
111
- label: "Methods",
112
- key: "method",
113
- placeholder: "Trigger action on method(s)",
114
- dataSrc: "json",
115
- data: {
116
- json:
117
- '[{"name":"create","title":"Create"},{"name":"update","title":"Update"},{"name":"read","title":"Read"},{"name":"delete","title":"Delete"},{"name":"index","title":"Index"}]'
125
+ "type": "select",
126
+ "input": true,
127
+ "label": "Methods",
128
+ "key": "method",
129
+ "placeholder": "Trigger action on method(s)",
130
+ "dataSrc": "json",
131
+ "data": {
132
+ "json": "[{\"name\":\"create\",\"title\":\"Create\"},{\"name\":\"update\",\"title\":\"Update\"},{\"name\":\"read\",\"title\":\"Read\"},{\"name\":\"delete\",\"title\":\"Delete\"},{\"name\":\"index\",\"title\":\"Index\"}]"
118
133
  },
119
- template: "<span>{{ item.title }}</span>",
120
- valueProperty: "name",
121
- multiple: true
134
+ "template": "<span>{{ item.title }}</span>",
135
+ "valueProperty": "name",
136
+ "multiple": true
122
137
  }
123
138
  ]
124
139
  },
125
140
  {
126
- key: "fieldset",
127
- type: "fieldset",
128
- input: false,
129
- tree: false,
130
- legend: "Action Conditions (optional)",
131
- components: [
141
+ "key": "fieldset",
142
+ "type": "fieldset",
143
+ "input": false,
144
+ "tree": false,
145
+ "legend": "Action Conditions (optional)",
146
+ "components": [
132
147
  {
133
- type: "container",
134
- key: "condition",
135
- input: false,
136
- tree: true,
137
- components: [
148
+ "type": "container",
149
+ "key": "condition",
150
+ "input": false,
151
+ "tree": true,
152
+ "components": [
138
153
  {
139
- key: "columns",
140
- type: "columns",
141
- input: false,
142
- columns: [
154
+ "key": "columns",
155
+ "type": "columns",
156
+ "input": false,
157
+ "columns": [
143
158
  {
144
- components: [
159
+ "components": [
145
160
  {
146
- type: "select",
147
- input: true,
148
- label: "Trigger this action only if field",
149
- key: "field",
150
- placeholder: "Select the conditional field",
151
- template: "<span>{{ item.label || item.key }}</span>",
152
- dataSrc: "json",
153
- data: {
154
- json:
155
- '[{"key":""},{"label":"Title","placeholder":"Enter the form title","tableView":true,"validate":{"required":true,"custom":"","customPrivate":false,"strictDateValidation":false,"multiple":false,"unique":false,"minLength":"","maxLength":"","pattern":""},"key":"title","type":"textfield","input":true,"hideOnChildrenHidden":false,"prefix":"","customClass":"","suffix":"","multiple":false,"defaultValue":null,"protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"refreshOn":"","redrawOn":"","modalEdit":false,"labelPosition":"top","description":"","errorLabel":"","tooltip":"","hideLabel":false,"tabindex":"","disabled":false,"autofocus":false,"dbIndex":false,"customDefaultValue":"","calculateValue":"","calculateServer":false,"widget":{"type":"input"},"attributes":{},"validateOn":"change","conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"properties":{},"allowMultipleMasks":false,"mask":false,"inputType":"text","inputFormat":"plain","inputMask":"","spellcheck":true,"id":"esheb5o"},{"label":"Name","labelPosition":"top","placeholder":"Enter the form machine name","description":"","tooltip":"","prefix":"","suffix":"","widget":{"type":"input"},"inputMask":"","allowMultipleMasks":false,"customClass":"","tabindex":"","autocomplete":"","hidden":false,"hideLabel":false,"showWordCount":false,"showCharCount":false,"mask":false,"autofocus":false,"spellcheck":true,"disabled":false,"tableView":true,"modalEdit":false,"multiple":false,"persistent":true,"inputFormat":"plain","protected":false,"dbIndex":false,"case":"","encrypted":false,"redrawOn":"","clearOnHide":true,"customDefaultValue":"","calculateValue":"value = _.camelCase(data.title)","calculateServer":false,"allowCalculateOverride":false,"validateOn":"change","validate":{"required":true,"pattern":"","customMessage":"","custom":"","customPrivate":false,"json":"","minLength":"","maxLength":"","strictDateValidation":false,"multiple":false,"unique":false},"unique":false,"errorLabel":"","key":"name","tags":[],"properties":{},"conditional":{"show":null,"when":null,"eq":"","json":""},"customConditional":"","logic":[],"attributes":{},"overlay":{"style":"","page":"","left":"","top":"","width":"","height":""},"type":"textfield","input":true,"hideOnChildrenHidden":false,"refreshOn":"","inputType":"text","id":"eaqup3","defaultValue":""},{"label":"Display as","widget":"choicesjs","tableView":true,"data":{"values":[{"label":"Form","value":"form"},{"label":"Wizard","value":"wizard"}],"json":"","url":"","resource":"","custom":""},"selectThreshold":0.3,"key":"display","type":"select","indexeddb":{"filter":{}},"input":true,"hideOnChildrenHidden":false,"defaultValue":"form","placeholder":"","prefix":"","customClass":"","suffix":"","multiple":false,"protected":false,"unique":false,"persistent":true,"hidden":false,"clearOnHide":true,"refreshOn":"","redrawOn":"","modalEdit":false,"labelPosition":"top","description":"","errorLabel":"","tooltip":"","hideLabel":false,"tabindex":"","disabled":false,"autofocus":false,"dbIndex":false,"customDefaultValue":"","calculateValue":"","calculateServer":false,"attributes":{},"validateOn":"change","validate":{"required":false,"custom":"","customPrivate":false,"strictDateValidation":false,"multiple":false,"unique":false},"conditional":{"show":null,"when":null,"eq":""},"overlay":{"style":"","left":"","top":"","width":"","height":""},"allowCalculateOverride":false,"encrypted":false,"showCharCount":false,"showWordCount":false,"properties":{},"allowMultipleMasks":false,"idPath":"id","clearOnRefresh":false,"limit":100,"dataSrc":"values","valueProperty":"","lazyLoad":true,"filter":"","searchEnabled":true,"searchField":"","minSearch":0,"readOnlyValue":false,"authenticate":false,"template":"<span>{{ item.label }}</span>","selectFields":"","searchThreshold":0.3,"uniqueOptions":false,"fuseOptions":{"include":"score","threshold":0.3},"customOptions":{},"useExactSearch":false,"id":"e490elx"},{"label":"Path","labelPosition":"top","placeholder":"example","description":"","tooltip":"","prefix":"https://host.fr/","suffix":"","widget":{"type":"input"},"inputMask":"","allowMultipleMasks":false,"customClass":"","tabindex":"","autocomplete":"","hidden":false,"hideLabel":false,"showWordCount":false,"showCharCount":false,"mask":false,"autofocus":false,"spellcheck":true,"disabled":false,"tableView":true,"modalEdit":false,"multiple":false,"persistent":true,"inputFormat":"plain","protected":false,"dbIndex":false,"case":"","encrypted":false,"redrawOn":"","clearOnHide":true,"customDefaultValue":"","calculateValue":"data = _camelCase(data.title).toLowerCase()","calculateServer":false,"allowCalculateOverride":false,"validateOn":"change","validate":{"required":false,"pattern":"","customMessage":"","custom":"","customPrivate":false,"json":"","minLength":"","maxLength":"","strictDateValidation":false,"multiple":false,"unique":false},"unique":false,"errorLabel":"","key":"path","tags":[],"properties":{},"conditional":{"show":null,"when":null,"eq":"","json":""},"customConditional":"","logic":[],"attributes":{},"overlay":{"style":"","page":"","left":"","top":"","width":"","height":""},"type":"textfield","input":true,"hideOnChildrenHidden":false,"refreshOn":"","inputType":"text","id":"e0jl1y","defaultValue":""},{"label":"Tags","labelPosition":"top","placeholder":"","description":"","tooltip":"","customClass":"","tabindex":"","hidden":false,"hideLabel":false,"autofocus":false,"disabled":false,"tableView":false,"modalEdit":false,"delimeter":",","maxTags":0,"storeas":"string","persistent":true,"protected":false,"dbIndex":false,"encrypted":false,"redrawOn":"","clearOnHide":true,"customDefaultValue":"","calculateValue":"","calculateServer":false,"allowCalculateOverride":false,"validate":{"required":false,"customMessage":"","custom":"","customPrivate":false,"json":"","strictDateValidation":false,"multiple":false,"unique":false},"unique":false,"validateOn":"change","errorLabel":"","key":"tags","tags":[],"properties":{},"conditional":{"show":null,"when":null,"eq":"","json":""},"customConditional":"","logic":[],"attributes":{},"overlay":{"style":"","page":"","left":"","top":"","width":"","height":""},"type":"tags","input":true,"prefix":"","suffix":"","multiple":false,"refreshOn":"","widget":{"type":"input"},"showCharCount":false,"showWordCount":false,"allowMultipleMasks":false,"id":"eacpmkv","hideOnChildrenHidden":false,"defaultValue":null}]'
161
+ "type": "select",
162
+ "input": true,
163
+ "label": "Trigger this action only if field",
164
+ "key": "field",
165
+ "placeholder": "Select the conditional field",
166
+ "template": "<span>{{ item.label || item.key }}</span>",
167
+ "dataSrc": "json",
168
+ "data": {
169
+ "json": "[{\"key\":\"\"},{\"label\":\"Rules\",\"reorder\":false,\"addAnotherPosition\":\"bottom\",\"layoutFixed\":false,\"enableRowGroups\":false,\"initEmpty\":false,\"tableView\":false,\"defaultValue\":[{\"path\":{},\"operator\":\"\"}],\"key\":\"rules\",\"type\":\"datagrid\",\"input\":true,\"components\":[{\"label\":\"Path\",\"widget\":\"choicesjs\",\"tableView\":true,\"dataSrc\":\"url\",\"data\":{\"url\":\"/test\",\"headers\":[{\"key\":\"\",\"value\":\"\"}]},\"key\":\"path\",\"type\":\"select\",\"input\":true,\"disableLimit\":false},{\"label\":\"Operator\",\"widget\":\"choicesjs\",\"tableView\":true,\"data\":{\"values\":[{\"label\":\"default\",\"value\":\"default\"},{\"label\":\"Contains\",\"value\":\"CONTAINS\"}]},\"key\":\"operator\",\"type\":\"select\",\"input\":true},{\"customClass\":\"mt-0 mb-0\",\"key\":\"fieldset\",\"type\":\"fieldset\",\"label\":\"Field Set\",\"input\":false,\"tableView\":false,\"components\":[{\"label\":\"Value\",\"tableView\":true,\"key\":\"value1\",\"customConditional\":\"show = row.operator === 'CONTAINS'\",\"type\":\"textfield\",\"input\":true}]},{\"label\":\"Hello\",\"tableView\":true,\"key\":\"textField\",\"customConditional\":\"show = row.operator === 'CONTAINS'\",\"type\":\"textfield\",\"input\":true}]},{\"label\":\"Path\",\"widget\":\"choicesjs\",\"tableView\":true,\"dataSrc\":\"url\",\"data\":{\"url\":\"/test\",\"headers\":[{\"key\":\"\",\"value\":\"\"}]},\"key\":\"path\",\"type\":\"select\",\"input\":true,\"disableLimit\":false},{\"label\":\"Operator\",\"widget\":\"choicesjs\",\"tableView\":true,\"data\":{\"values\":[{\"label\":\"default\",\"value\":\"default\"},{\"label\":\"Contains\",\"value\":\"CONTAINS\"}]},\"key\":\"operator\",\"type\":\"select\",\"input\":true},{\"label\":\"Value\",\"tableView\":true,\"key\":\"value1\",\"customConditional\":\"show = row.operator === 'CONTAINS'\",\"type\":\"textfield\",\"input\":true},{\"label\":\"Hello\",\"tableView\":true,\"key\":\"textField\",\"customConditional\":\"show = row.operator === 'CONTAINS'\",\"type\":\"textfield\",\"input\":true},{\"type\":\"button\",\"label\":\"Submit\",\"key\":\"submit\",\"disableOnInvalid\":true,\"input\":true,\"tableView\":false}]"
156
170
  },
157
- valueProperty: "key",
158
- multiple: false
171
+ "valueProperty": "key",
172
+ "multiple": false
159
173
  },
160
174
  {
161
- type: "select",
162
- input: true,
163
- label: "",
164
- key: "eq",
165
- placeholder: "Select comparison",
166
- template: "<span>{{ item.label }}</span>",
167
- dataSrc: "values",
168
- data: {
169
- values: [
170
- { value: "", label: "" },
175
+ "type": "select",
176
+ "input": true,
177
+ "label": "",
178
+ "key": "eq",
179
+ "placeholder": "Select comparison",
180
+ "template": "<span>{{ item.label }}</span>",
181
+ "dataSrc": "values",
182
+ "data": {
183
+ "values": [
171
184
  {
172
- value: "equals",
173
- label: "Equals"
185
+ "value": "",
186
+ "label": ""
174
187
  },
175
- { value: "notEqual", label: "Does Not Equal" }
188
+ {
189
+ "value": "equals",
190
+ "label": "Equals"
191
+ },
192
+ {
193
+ "value": "notEqual",
194
+ "label": "Does Not Equal"
195
+ }
176
196
  ],
177
- json: "",
178
- url: "",
179
- resource: ""
197
+ "json": "",
198
+ "url": "",
199
+ "resource": ""
180
200
  },
181
- valueProperty: "value",
182
- multiple: false
201
+ "valueProperty": "value",
202
+ "multiple": false
183
203
  },
184
204
  {
185
- input: true,
186
- type: "textfield",
187
- inputType: "text",
188
- label: "",
189
- key: "value",
190
- placeholder: "Enter value",
191
- multiple: false
205
+ "input": true,
206
+ "type": "textfield",
207
+ "inputType": "text",
208
+ "label": "",
209
+ "key": "value",
210
+ "placeholder": "Enter value",
211
+ "multiple": false
192
212
  }
193
213
  ]
194
214
  },
195
215
  {
196
- components: [
216
+ "components": [
197
217
  {
198
- key: "well2",
199
- type: "well",
200
- input: false,
201
- components: [
218
+ "key": "well2",
219
+ "type": "well",
220
+ "input": false,
221
+ "components": [
202
222
  {
203
- key: "html",
204
- type: "htmlelement",
205
- tag: "h4",
206
- input: false,
207
- content:
208
- 'Or you can provide your own custom JavaScript or <a href="http://jsonlogic.com" target="_blank">JSON</a> condition logic here',
209
- className: ""
223
+ "key": "html",
224
+ "type": "htmlelement",
225
+ "tag": "h4",
226
+ "input": false,
227
+ "content": "Or you can provide your own custom JavaScript or <a href=\"http://jsonlogic.com\" target=\"_blank\">JSON</a> condition logic here",
228
+ "className": ""
210
229
  },
211
230
  {
212
- label: "",
213
- type: "textarea",
214
- input: true,
215
- key: "custom",
216
- editorComponents: [
231
+ "label": "",
232
+ "type": "textarea",
233
+ "input": true,
234
+ "key": "custom",
235
+ "editorComponents": [
217
236
  {
218
- label: "Form settings",
219
- columns: [
237
+ "label": "Rules",
238
+ "reorder": false,
239
+ "addAnotherPosition": "bottom",
240
+ "layoutFixed": false,
241
+ "enableRowGroups": false,
242
+ "initEmpty": false,
243
+ "tableView": false,
244
+ "defaultValue": [
220
245
  {
221
- components: [
222
- {
223
- label: "Title",
224
- placeholder: "Enter the form title",
225
- tableView: true,
226
- validate: {
227
- required: true,
228
- custom: "",
229
- customPrivate: false,
230
- strictDateValidation: false,
231
- multiple: false,
232
- unique: false,
233
- minLength: "",
234
- maxLength: "",
235
- pattern: ""
236
- },
237
- key: "title",
238
- type: "textfield",
239
- input: true,
240
- hideOnChildrenHidden: false,
241
- prefix: "",
242
- customClass: "",
243
- suffix: "",
244
- multiple: false,
245
- defaultValue: null,
246
- protected: false,
247
- unique: false,
248
- persistent: true,
249
- hidden: false,
250
- clearOnHide: true,
251
- refreshOn: "",
252
- redrawOn: "",
253
- modalEdit: false,
254
- labelPosition: "top",
255
- description: "",
256
- errorLabel: "",
257
- tooltip: "",
258
- hideLabel: false,
259
- tabindex: "",
260
- disabled: false,
261
- autofocus: false,
262
- dbIndex: false,
263
- customDefaultValue: "",
264
- calculateValue: "",
265
- calculateServer: false,
266
- widget: { type: "input" },
267
- attributes: {},
268
- validateOn: "change",
269
- conditional: {
270
- show: null,
271
- when: null,
272
- eq: ""
273
- },
274
- overlay: {
275
- style: "",
276
- left: "",
277
- top: "",
278
- width: "",
279
- height: ""
280
- },
281
- allowCalculateOverride: false,
282
- encrypted: false,
283
- showCharCount: false,
284
- showWordCount: false,
285
- properties: {},
286
- allowMultipleMasks: false,
287
- mask: false,
288
- inputType: "text",
289
- inputFormat: "plain",
290
- inputMask: "",
291
- spellcheck: true,
292
- id: "esheb5o"
293
- }
294
- ],
295
- width: 4,
296
- offset: 0,
297
- push: 0,
298
- pull: 0,
299
- size: "sm"
300
- },
246
+ "path": {},
247
+ "operator": ""
248
+ }
249
+ ],
250
+ "key": "rules",
251
+ "type": "datagrid",
252
+ "input": true,
253
+ "components": [
301
254
  {
302
- components: [
303
- {
304
- label: "Name",
305
- labelPosition: "top",
306
- placeholder:
307
- "Enter the form machine name",
308
- description: "",
309
- tooltip: "",
310
- prefix: "",
311
- suffix: "",
312
- widget: { type: "input" },
313
- inputMask: "",
314
- allowMultipleMasks: false,
315
- customClass: "",
316
- tabindex: "",
317
- autocomplete: "",
318
- hidden: false,
319
- hideLabel: false,
320
- showWordCount: false,
321
- showCharCount: false,
322
- mask: false,
323
- autofocus: false,
324
- spellcheck: true,
325
- disabled: false,
326
- tableView: true,
327
- modalEdit: false,
328
- multiple: false,
329
- persistent: true,
330
- inputFormat: "plain",
331
- protected: false,
332
- dbIndex: false,
333
- case: "",
334
- encrypted: false,
335
- redrawOn: "",
336
- clearOnHide: true,
337
- customDefaultValue: "",
338
- calculateValue:
339
- "value = _.camelCase(data.title)",
340
- calculateServer: false,
341
- allowCalculateOverride: false,
342
- validateOn: "change",
343
- validate: {
344
- required: true,
345
- pattern: "",
346
- customMessage: "",
347
- custom: "",
348
- customPrivate: false,
349
- json: "",
350
- minLength: "",
351
- maxLength: "",
352
- strictDateValidation: false,
353
- multiple: false,
354
- unique: false
355
- },
356
- unique: false,
357
- errorLabel: "",
358
- key: "name",
359
- tags: [],
360
- properties: {},
361
- conditional: {
362
- show: null,
363
- when: null,
364
- eq: "",
365
- json: ""
366
- },
367
- customConditional: "",
368
- logic: [],
369
- attributes: {},
370
- overlay: {
371
- style: "",
372
- page: "",
373
- left: "",
374
- top: "",
375
- width: "",
376
- height: ""
377
- },
378
- type: "textfield",
379
- input: true,
380
- hideOnChildrenHidden: false,
381
- refreshOn: "",
382
- inputType: "text",
383
- id: "eaqup3",
384
- defaultValue: ""
385
- }
386
- ],
387
- width: 4,
388
- offset: 0,
389
- push: 0,
390
- pull: 0,
391
- size: "sm"
255
+ "label": "Path",
256
+ "widget": "choicesjs",
257
+ "tableView": true,
258
+ "dataSrc": "url",
259
+ "data": {
260
+ "url": "/test",
261
+ "headers": [
262
+ {
263
+ "key": "",
264
+ "value": ""
265
+ }
266
+ ]
267
+ },
268
+ "key": "path",
269
+ "type": "select",
270
+ "input": true,
271
+ "disableLimit": false
392
272
  },
393
273
  {
394
- components: [
395
- {
396
- label: "Display as",
397
- widget: "choicesjs",
398
- tableView: true,
399
- data: {
400
- values: [
401
- { label: "Form", value: "form" },
402
- {
403
- label: "Wizard",
404
- value: "wizard"
405
- }
406
- ],
407
- json: "",
408
- url: "",
409
- resource: "",
410
- custom: ""
411
- },
412
- selectThreshold: 0.3,
413
- key: "display",
414
- type: "select",
415
- indexeddb: { filter: {} },
416
- input: true,
417
- hideOnChildrenHidden: false,
418
- defaultValue: "form",
419
- placeholder: "",
420
- prefix: "",
421
- customClass: "",
422
- suffix: "",
423
- multiple: false,
424
- protected: false,
425
- unique: false,
426
- persistent: true,
427
- hidden: false,
428
- clearOnHide: true,
429
- refreshOn: "",
430
- redrawOn: "",
431
- modalEdit: false,
432
- labelPosition: "top",
433
- description: "",
434
- errorLabel: "",
435
- tooltip: "",
436
- hideLabel: false,
437
- tabindex: "",
438
- disabled: false,
439
- autofocus: false,
440
- dbIndex: false,
441
- customDefaultValue: "",
442
- calculateValue: "",
443
- calculateServer: false,
444
- attributes: {},
445
- validateOn: "change",
446
- validate: {
447
- required: false,
448
- custom: "",
449
- customPrivate: false,
450
- strictDateValidation: false,
451
- multiple: false,
452
- unique: false
274
+ "label": "Operator",
275
+ "widget": "choicesjs",
276
+ "tableView": true,
277
+ "data": {
278
+ "values": [
279
+ {
280
+ "label": "default",
281
+ "value": "default"
453
282
  },
454
- conditional: {
455
- show: null,
456
- when: null,
457
- eq: ""
458
- },
459
- overlay: {
460
- style: "",
461
- left: "",
462
- top: "",
463
- width: "",
464
- height: ""
465
- },
466
- allowCalculateOverride: false,
467
- encrypted: false,
468
- showCharCount: false,
469
- showWordCount: false,
470
- properties: {},
471
- allowMultipleMasks: false,
472
- idPath: "id",
473
- clearOnRefresh: false,
474
- limit: 100,
475
- dataSrc: "values",
476
- valueProperty: "",
477
- lazyLoad: true,
478
- filter: "",
479
- searchEnabled: true,
480
- searchField: "",
481
- minSearch: 0,
482
- readOnlyValue: false,
483
- authenticate: false,
484
- template:
485
- "<span>{{ item.label }}</span>",
486
- selectFields: "",
487
- searchThreshold: 0.3,
488
- uniqueOptions: false,
489
- fuseOptions: {
490
- include: "score",
491
- threshold: 0.3
492
- },
493
- customOptions: {},
494
- useExactSearch: false,
495
- id: "e490elx"
496
- }
497
- ],
498
- size: "sm",
499
- width: 4,
500
- offset: 0,
501
- push: 0,
502
- pull: 0
283
+ {
284
+ "label": "Contains",
285
+ "value": "CONTAINS"
286
+ }
287
+ ]
288
+ },
289
+ "key": "operator",
290
+ "type": "select",
291
+ "input": true
503
292
  },
504
293
  {
505
- components: [
294
+ "customClass": "mt-0 mb-0",
295
+ "key": "fieldset",
296
+ "type": "fieldset",
297
+ "label": "Field Set",
298
+ "input": false,
299
+ "tableView": false,
300
+ "components": [
506
301
  {
507
- label: "Path",
508
- labelPosition: "top",
509
- placeholder: "example",
510
- description: "",
511
- tooltip: "",
512
- prefix: "https://host.fr/",
513
- suffix: "",
514
- widget: { type: "input" },
515
- inputMask: "",
516
- allowMultipleMasks: false,
517
- customClass: "",
518
- tabindex: "",
519
- autocomplete: "",
520
- hidden: false,
521
- hideLabel: false,
522
- showWordCount: false,
523
- showCharCount: false,
524
- mask: false,
525
- autofocus: false,
526
- spellcheck: true,
527
- disabled: false,
528
- tableView: true,
529
- modalEdit: false,
530
- multiple: false,
531
- persistent: true,
532
- inputFormat: "plain",
533
- protected: false,
534
- dbIndex: false,
535
- case: "",
536
- encrypted: false,
537
- redrawOn: "",
538
- clearOnHide: true,
539
- customDefaultValue: "",
540
- calculateValue:
541
- "data = _camelCase(data.title).toLowerCase()",
542
- calculateServer: false,
543
- allowCalculateOverride: false,
544
- validateOn: "change",
545
- validate: {
546
- required: false,
547
- pattern: "",
548
- customMessage: "",
549
- custom: "",
550
- customPrivate: false,
551
- json: "",
552
- minLength: "",
553
- maxLength: "",
554
- strictDateValidation: false,
555
- multiple: false,
556
- unique: false
557
- },
558
- unique: false,
559
- errorLabel: "",
560
- key: "path",
561
- tags: [],
562
- properties: {},
563
- conditional: {
564
- show: null,
565
- when: null,
566
- eq: "",
567
- json: ""
568
- },
569
- customConditional: "",
570
- logic: [],
571
- attributes: {},
572
- overlay: {
573
- style: "",
574
- page: "",
575
- left: "",
576
- top: "",
577
- width: "",
578
- height: ""
579
- },
580
- type: "textfield",
581
- input: true,
582
- hideOnChildrenHidden: false,
583
- refreshOn: "",
584
- inputType: "text",
585
- id: "e0jl1y",
586
- defaultValue: ""
302
+ "label": "Value",
303
+ "tableView": true,
304
+ "key": "value1",
305
+ "customConditional": "show = row.operator === 'CONTAINS'",
306
+ "type": "textfield",
307
+ "input": true
587
308
  }
588
- ],
589
- size: "sm",
590
- width: 4,
591
- offset: 0,
592
- push: 0,
593
- pull: 0
309
+ ]
594
310
  },
595
311
  {
596
- components: [
597
- {
598
- label: "Tags",
599
- labelPosition: "top",
600
- placeholder: "",
601
- description: "",
602
- tooltip: "",
603
- customClass: "",
604
- tabindex: "",
605
- hidden: false,
606
- hideLabel: false,
607
- autofocus: false,
608
- disabled: false,
609
- tableView: false,
610
- modalEdit: false,
611
- delimeter: ",",
612
- maxTags: 0,
613
- storeas: "string",
614
- persistent: true,
615
- protected: false,
616
- dbIndex: false,
617
- encrypted: false,
618
- redrawOn: "",
619
- clearOnHide: true,
620
- customDefaultValue: "",
621
- calculateValue: "",
622
- calculateServer: false,
623
- allowCalculateOverride: false,
624
- validate: {
625
- required: false,
626
- customMessage: "",
627
- custom: "",
628
- customPrivate: false,
629
- json: "",
630
- strictDateValidation: false,
631
- multiple: false,
632
- unique: false
633
- },
634
- unique: false,
635
- validateOn: "change",
636
- errorLabel: "",
637
- key: "tags",
638
- tags: [],
639
- properties: {},
640
- conditional: {
641
- show: null,
642
- when: null,
643
- eq: "",
644
- json: ""
645
- },
646
- customConditional: "",
647
- logic: [],
648
- attributes: {},
649
- overlay: {
650
- style: "",
651
- page: "",
652
- left: "",
653
- top: "",
654
- width: "",
655
- height: ""
656
- },
657
- type: "tags",
658
- input: true,
659
- prefix: "",
660
- suffix: "",
661
- multiple: false,
662
- refreshOn: "",
663
- widget: { type: "input" },
664
- showCharCount: false,
665
- showWordCount: false,
666
- allowMultipleMasks: false,
667
- id: "eacpmkv",
668
- hideOnChildrenHidden: false,
669
- defaultValue: null
670
- }
671
- ],
672
- size: "md",
673
- width: 4,
674
- offset: 0,
675
- push: 0,
676
- pull: 0
312
+ "label": "Hello",
313
+ "tableView": true,
314
+ "key": "textField",
315
+ "customConditional": "show = row.operator === 'CONTAINS'",
316
+ "type": "textfield",
317
+ "input": true
677
318
  }
678
- ],
679
- autoAdjust: false,
680
- hideOnChildrenHidden: false,
681
- customClass: "",
682
- hidden: false,
683
- hideLabel: true,
684
- modalEdit: false,
685
- key: "formSettings",
686
- tags: [],
687
- properties: {},
688
- conditional: {
689
- show: null,
690
- when: null,
691
- eq: "",
692
- json: ""
693
- },
694
- customConditional: "",
695
- logic: [],
696
- attributes: {},
697
- overlay: {
698
- style: "",
699
- page: "",
700
- left: "",
701
- top: "",
702
- width: "",
703
- height: ""
704
- },
705
- type: "columns",
706
- input: false,
707
- tableView: false,
708
- placeholder: "",
709
- prefix: "",
710
- suffix: "",
711
- multiple: false,
712
- defaultValue: null,
713
- protected: false,
714
- unique: false,
715
- persistent: false,
716
- clearOnHide: false,
717
- refreshOn: "",
718
- redrawOn: "",
719
- labelPosition: "top",
720
- description: "",
721
- errorLabel: "",
722
- tooltip: "",
723
- tabindex: "",
724
- disabled: false,
725
- autofocus: false,
726
- dbIndex: false,
727
- customDefaultValue: "",
728
- calculateValue: "",
729
- calculateServer: false,
730
- widget: null,
731
- validateOn: "change",
732
- validate: {
733
- required: false,
734
- custom: "",
735
- customPrivate: false,
736
- strictDateValidation: false,
737
- multiple: false,
738
- unique: false
739
- },
740
- allowCalculateOverride: false,
741
- encrypted: false,
742
- showCharCount: false,
743
- showWordCount: false,
744
- allowMultipleMasks: false,
745
- tree: false,
746
- id: "eso5bqq"
319
+ ]
320
+ },
321
+ {
322
+ "type": "button",
323
+ "label": "Submit",
324
+ "key": "submit",
325
+ "disableOnInvalid": true,
326
+ "input": true,
327
+ "tableView": false
747
328
  }
748
329
  ],
749
- placeholder:
750
- '// Example: Only execute if submitted roles has \'authenticated\'.\nJavaScript: execute = (data.roles.indexOf(\'authenticated\') !== -1);\nJSON: { "in": [ "authenticated", { "var": "data.roles" } ] }'
330
+ "placeholder": "// Example: Only execute if submitted roles has 'authenticated'.\nJavaScript: execute = (data.roles.indexOf('authenticated') !== -1);\nJSON: { \"in\": [ \"authenticated\", { \"var\": \"data.roles\" } ] }"
751
331
  }
752
332
  ]
753
333
  }
@@ -760,29 +340,28 @@ Sandbox.args = {
760
340
  ]
761
341
  },
762
342
  {
763
- key: "html2",
764
- type: "htmlelement",
765
- tag: "hr",
766
- input: false,
767
- content: "",
768
- className: ""
343
+ "key": "html2",
344
+ "type": "htmlelement",
345
+ "tag": "hr",
346
+ "input": false,
347
+ "content": "",
348
+ "className": ""
769
349
  },
770
350
  {
771
- type: "button",
772
- input: true,
773
- label: "Save Action",
774
- key: "submit",
775
- size: "md",
776
- leftIcon: "",
777
- rightIcon: "",
778
- block: false,
779
- action: "submit",
780
- disableOnInvalid: true,
781
- theme: "primary"
351
+ "type": "button",
352
+ "input": true,
353
+ "label": "Save Action",
354
+ "key": "submit",
355
+ "size": "md",
356
+ "leftIcon": "",
357
+ "rightIcon": "",
358
+ "block": false,
359
+ "action": "submit",
360
+ "disableOnInvalid": true,
361
+ "theme": "primary"
782
362
  }
783
363
  ],
784
- action:
785
- "/project/5d0797bc872fc7d140559857/form/602967600685b24dbe24e999/action"
364
+ "action": "/project/5d0797bc872fc7d140559857/form/62b18b10fbbba513555c6c5e/action"
786
365
  }
787
366
  },
788
367
  options: { template: "tailwind", iconset: "bx" }