@subiz/widget-v4 4.1.138 → 4.1.140

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 (5) hide show
  1. package/compiled_src/form/Form.js +32 -8
  2. package/compiled_src/form.js +4 -3
  3. package/package.json +1 -1
  4. package/src/form/Form.js +33 -9
  5. package/src/form.js +3 -2
package/compiled_src/form/Form.js CHANGED
@@ -63,7 +63,7 @@ class Form2 extends _common.Com {
63
63
  class: "label"
64
64
  }, com.label, " ", com.is_required && (0, _preact.h)("span", {
65
65
  class: "red"
66
- }, "*")), com.input_type === 'text' && this.renderFieldTextInput(com, idx), com.input_type === 'multiple' && this.renderFieldTextareaInput(com, idx), com.input_type === 'date' && this.renderFieldDateInput(com, idx), com.input_type === 'radio' && this.renderFieldRadioInput(com, idx), com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx), com.input_type === 'dropdown' && this.renderFieldDropdownInput(com, idx), errorMsg && (0, _preact.h)("div", {
66
+ }, "*")), com.input_type === 'text' && this.renderFieldTextInput(com, idx), com.input_type === 'textarea' && this.renderFieldTextareaInput(com, idx), com.input_type === 'date' && this.renderFieldDateInput(com, idx), com.input_type === 'radio' && this.renderFieldRadioInput(com, idx), com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx), (com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx), errorMsg && (0, _preact.h)("div", {
67
67
  class: "form-control--valid-input--error"
68
68
  }, errorMsg));
69
69
  });
@@ -195,18 +195,42 @@ class Form2 extends _common.Com {
195
195
  let components = _index.default.get(this.props.formSetting, 'components') || [];
196
196
  _index.default.each(components, com => {
197
197
  if (com.type === 'input') {
198
+ let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
199
+ val = val.value || '""';
200
+ val = _index.default.parseJSON(val);
198
201
  if (com.is_required) {
199
- let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
200
- val = val.value || '""';
201
- val = _index.default.parseJSON(val);
202
- if (typeof val === 'string' && !val.trim()) {
202
+ let isEmpty = false;
203
+ if (typeof val === 'string' && !val.trim()) isEmpty = true;
204
+ if (Array.isArray(val) && val.length === 0) isEmpty = true;
205
+ if (isEmpty) {
203
206
  result = false;
204
207
  errors[com.key] = this.props.t('cannot_be_empty');
205
- if (!ref && com.input_type !== 'checkbox' && com.input_type !== 'radio') ref = `${com.key}_input`;
208
+ ref = `${com.key}_input`;
206
209
  }
207
- if (Array.isArray(val) && val.length === 0) {
210
+ }
211
+ if (com.validation && !Array.isArray(val)) {
212
+ let isInvalid = false;
213
+ let validationText = '';
214
+ if (com.validation === 'email' && !_index.default.isEmail(val)) {
215
+ validationText = 'Email';
216
+ isInvalid = true;
217
+ }
218
+ if (com.validation === 'phone' && !_index.default.isPhone(val)) {
219
+ validationText = this.props.t('phn');
220
+ isInvalid = true;
221
+ }
222
+ if (com.validation === 'number' && !_index.default.isNumber(val)) {
223
+ validationText = this.props.t('number');
224
+ isInvalid = true;
225
+ }
226
+ if (com.validation === 'url' && !_index.default.isURL(val)) {
227
+ isInvalid = true;
228
+ validationText = 'URL';
229
+ }
230
+ if (isInvalid) {
208
231
  result = false;
209
- errors[com.key] = this.props.t('cannot_be_empty');
232
+ errors[com.key] = this.props.t('format_is_invalid') + ' ' + validationText;
233
+ ref = `${com.key}_input`;
210
234
  }
211
235
  }
212
236
  }
package/compiled_src/form.js CHANGED
@@ -20,9 +20,10 @@ async function renderForm(form, chatbox, $div) {
20
20
  }
21
21
  const LANG = {
22
22
  no_select: 'Chưa chọn',
23
- cannot_be_empty: 'không thể để trống',
23
+ cannot_be_empty: 'Không thể để trống',
24
24
  you_have_submitted_info_successfully: 'Form được gửi thành công',
25
- no_info_input: 'Chưa nhập'
25
+ no_info_input: 'Chưa nhập',
26
+ phn: 'SĐT'
26
27
  };
27
28
  (0, _preact.render)((0, _preact.h)(_Form.default, {
28
29
  mode: "attachment",
@@ -32,7 +33,7 @@ async function renderForm(form, chatbox, $div) {
32
33
  submission: {
33
34
  values: []
34
35
  },
35
- t: key => LANG[key]
36
+ t: key => LANG[key] || key
36
37
  }), $div);
37
38
  }
38
39
  async function initCss(chatbox) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@subiz/widget-v4",
3
- "version": "4.1.138",
3
+ "version": "4.1.140",
4
4
  "main": "./compiled_src/lib.js",
5
5
  "scripts": {
6
6
  "dev": "npx webpack serve --config webpack.dev.js",
package/src/form/Form.js CHANGED
@@ -66,11 +66,11 @@ export default class Form2 extends Com {
66
66
  {com.label} {com.is_required && <span class='red'>*</span>}
67
67
  </label>
68
68
  {com.input_type === 'text' && this.renderFieldTextInput(com, idx)}
69
- {com.input_type === 'multiple' && this.renderFieldTextareaInput(com, idx)}
69
+ {com.input_type === 'textarea' && this.renderFieldTextareaInput(com, idx)}
70
70
  {com.input_type === 'date' && this.renderFieldDateInput(com, idx)}
71
71
  {com.input_type === 'radio' && this.renderFieldRadioInput(com, idx)}
72
72
  {com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx)}
73
- {com.input_type === 'dropdown' && this.renderFieldDropdownInput(com, idx)}
73
+ {(com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx)}
74
74
  {errorMsg && <div class='form-control--valid-input--error'>{errorMsg}</div>}
75
75
  </div>
76
76
  )
@@ -220,18 +220,42 @@ export default class Form2 extends Com {
220
220
  let components = sb.get(this.props.formSetting, 'components') || []
221
221
  sb.each(components, (com) => {
222
222
  if (com.type === 'input') {
223
+ let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
224
+ val = val.value || '""'
225
+ val = sb.parseJSON(val)
223
226
  if (com.is_required) {
224
- let val = sb.find(this.props.submission.values, (f) => f.key === com.key) || {}
225
- val = val.value || '""'
226
- val = sb.parseJSON(val)
227
- if (typeof val === 'string' && !val.trim()) {
227
+ let isEmpty = false
228
+ if (typeof val === 'string' && !val.trim()) isEmpty = true
229
+ if (Array.isArray(val) && val.length === 0) isEmpty = true
230
+ if (isEmpty) {
228
231
  result = false
229
232
  errors[com.key] = this.props.t('cannot_be_empty')
230
- if (!ref && com.input_type !== 'checkbox' && com.input_type !== 'radio') ref = `${com.key}_input`
233
+ ref = `${com.key}_input`
231
234
  }
232
- if (Array.isArray(val) && val.length === 0) {
235
+ }
236
+ if (com.validation && !Array.isArray(val)) {
237
+ let isInvalid = false
238
+ let validationText = ''
239
+ if (com.validation === 'email' && !sb.isEmail(val)) {
240
+ validationText = 'Email'
241
+ isInvalid = true
242
+ }
243
+ if (com.validation === 'phone' && !sb.isPhone(val)) {
244
+ validationText = this.props.t('phn')
245
+ isInvalid = true
246
+ }
247
+ if (com.validation === 'number' && !sb.isNumber(val)) {
248
+ validationText = this.props.t('number')
249
+ isInvalid = true
250
+ }
251
+ if (com.validation === 'url' && !sb.isURL(val)) {
252
+ isInvalid = true
253
+ validationText = 'URL'
254
+ }
255
+ if (isInvalid) {
233
256
  result = false
234
- errors[com.key] = this.props.t('cannot_be_empty')
257
+ errors[com.key] = this.props.t('format_is_invalid') + ' ' + validationText
258
+ ref = `${com.key}_input`
235
259
  }
236
260
  }
237
261
  }
package/src/form.js CHANGED
@@ -12,9 +12,10 @@ export default async function renderForm(form, chatbox, $div) {
12
12
  }
13
13
  const LANG = {
14
14
  no_select: 'Chưa chọn',
15
- cannot_be_empty: 'không thể để trống',
15
+ cannot_be_empty: 'Không thể để trống',
16
16
  you_have_submitted_info_successfully: 'Form được gửi thành công',
17
17
  no_info_input: 'Chưa nhập',
18
+ phn: 'SĐT',
18
19
  }
19
20
  render(
20
21
  <Form
@@ -23,7 +24,7 @@ export default async function renderForm(form, chatbox, $div) {
23
24
  onSubmit={() => {}}
24
25
  formSetting={form}
25
26
  submission={{values: []}}
26
- t={(key) => LANG[key]}
27
+ t={(key) => LANG[key] || key}
27
28
  />,
28
29
  $div,
29
30
  )