@xh/hoist 80.0.0-SNAPSHOT.1768323341476 → 80.0.0-SNAPSHOT.1768415875152

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 (51) hide show
  1. package/CHANGELOG.md +27 -3
  2. package/admin/tabs/activity/tracking/ActivityTracking.scss +7 -7
  3. package/admin/tabs/userData/roles/details/RoleDetails.scss +6 -6
  4. package/build/types/cmp/form/FormModel.d.ts +1 -1
  5. package/build/types/cmp/form/field/BaseFieldModel.d.ts +7 -3
  6. package/build/types/cmp/form/field/SubformsFieldModel.d.ts +3 -3
  7. package/build/types/cmp/grid/Grid.d.ts +2 -2
  8. package/build/types/data/Field.d.ts +2 -1
  9. package/build/types/data/Store.d.ts +7 -4
  10. package/build/types/data/StoreRecord.d.ts +5 -0
  11. package/build/types/data/impl/RecordValidator.d.ts +9 -10
  12. package/build/types/data/impl/StoreValidator.d.ts +8 -7
  13. package/build/types/data/index.d.ts +1 -0
  14. package/build/types/data/validation/Rule.d.ts +5 -40
  15. package/build/types/data/validation/Types.d.ts +56 -0
  16. package/build/types/data/validation/constraints.d.ts +1 -1
  17. package/build/types/desktop/cmp/appOption/AutoRefreshAppOption.d.ts +3 -3
  18. package/build/types/desktop/cmp/appOption/ThemeAppOption.d.ts +3 -3
  19. package/cmp/form/FormModel.ts +2 -2
  20. package/cmp/form/field/BaseFieldModel.ts +38 -18
  21. package/cmp/form/field/SubformsFieldModel.ts +5 -5
  22. package/cmp/grid/Grid.scss +31 -8
  23. package/cmp/grid/columns/Column.ts +24 -10
  24. package/cmp/input/HoistInput.scss +19 -1
  25. package/cmp/input/HoistInputModel.ts +10 -2
  26. package/data/Field.ts +2 -1
  27. package/data/Store.ts +16 -4
  28. package/data/StoreRecord.ts +11 -0
  29. package/data/impl/RecordValidator.ts +46 -28
  30. package/data/impl/StoreValidator.ts +22 -9
  31. package/data/index.ts +1 -0
  32. package/data/validation/Rule.ts +12 -52
  33. package/data/validation/Types.ts +81 -0
  34. package/data/validation/constraints.ts +2 -1
  35. package/desktop/appcontainer/OptionsDialog.scss +1 -1
  36. package/desktop/cmp/form/FormField.scss +136 -42
  37. package/desktop/cmp/form/FormField.ts +74 -40
  38. package/desktop/cmp/input/CodeInput.scss +13 -1
  39. package/desktop/cmp/input/RadioInput.scss +16 -4
  40. package/desktop/cmp/input/SwitchInput.scss +23 -5
  41. package/desktop/cmp/input/TextArea.scss +9 -1
  42. package/desktop/cmp/rest/impl/RestForm.scss +1 -1
  43. package/desktop/cmp/viewmanager/ViewManager.scss +7 -15
  44. package/kit/blueprint/styles.scss +4 -4
  45. package/kit/onsen/styles.scss +10 -2
  46. package/mobile/cmp/form/FormField.scss +52 -19
  47. package/mobile/cmp/form/FormField.ts +30 -21
  48. package/package.json +1 -1
  49. package/styles/XH.scss +1 -0
  50. package/styles/vars.scss +77 -12
  51. package/tsconfig.tsbuildinfo +1 -1
package/styles/vars.scss CHANGED
@@ -199,6 +199,19 @@ body {
199
199
  --xh-intent-danger-trans1: hsla(var(--xh-intent-danger-h), var(--xh-intent-danger-s), var(--xh-intent-danger-l3), var(--xh-intent-a1));
200
200
  --xh-intent-danger-trans2: hsla(var(--xh-intent-danger-h), var(--xh-intent-danger-s), var(--xh-intent-danger-l3), var(--xh-intent-a2));
201
201
 
202
+ // Add -text variants - customized to lighter values for dark theme to optimize for legibility and contrast.
203
+ --xh-intent-primary-text-color: var(--intent-danger-text-color, var(--xh-intent-primary));
204
+ --xh-intent-success-text-color: var(--intent-danger-text-color, var(--xh-intent-success));
205
+ --xh-intent-warning-text-color: var(--intent-danger-text-color, var(--xh-intent-warning));
206
+ --xh-intent-danger-text-color: var(--intent-danger-text-color, var(--xh-intent-danger));
207
+
208
+ &.xh-dark {
209
+ --xh-intent-primary-text-color: var(--intent-danger-text-color, var(--xh-intent-primary-lighter));
210
+ --xh-intent-success-text-color: var(--intent-danger-text-color, var(--xh-intent-success-lighter));
211
+ --xh-intent-warning-text-color: var(--intent-danger-text-color, var(--xh-intent-warning-lighter));
212
+ --xh-intent-danger-text-color: var(--intent-danger-text-color, var(--xh-intent-danger-lighter));
213
+ }
214
+
202
215
 
203
216
  //---------
204
217
  // AppBar
@@ -380,6 +393,10 @@ body {
380
393
  --xh-font-family-headings: var(--font-family-headings, var(--xh-font-family));
381
394
  --xh-font-family-mono: var(--font-family-mono, #{(Monaco, Consolas, monospace)});
382
395
 
396
+ // Control font features such as tabular numbers.
397
+ // For Hoist's default Inter font, see https://rsms.me/inter/#features
398
+ --xh-font-feature-settings: var(--font-feature-settings, 'tnum');
399
+
383
400
  --xh-font-size: var(--font-size, 13);
384
401
  --xh-font-size-large-mult: var(--font-size-large-mult, 1.2);
385
402
  --xh-font-size-large-em: var(--font-size-large-em, 1.2em);
@@ -405,19 +422,65 @@ body {
405
422
  //------------------------
406
423
  // Form Fields
407
424
  //------------------------
408
- --xh-form-field-box-shadow-color-top: var(--form-field-box-shadow-color-top, #{mc-trans('blue-grey', '100', 0.15)});
409
- --xh-form-field-box-shadow-color-bottom: var(--form-field-box-shadow-color-bottom, #{mc-trans('blue-grey', '100', 0.2)});
425
+ --xh-form-field-margin: var(--form-field-margin, 0 0 var(--xh-pad-px) 0);
426
+ --xh-form-field-padding: var(--form-field-padding, 3px);
427
+
428
+ // Box shadow + focus border
410
429
  --xh-form-field-box-shadow: var(--form-field-box-shadow, #{inset 0 0 0 1px var(--xh-form-field-box-shadow-color-top), inset 0 1px 1px var(--xh-form-field-box-shadow-color-bottom)});
430
+ --xh-form-field-box-shadow-color-bottom: var(--form-field-box-shadow-color-bottom, #{mc-trans('blue-grey', '100', 0.2)});
431
+ --xh-form-field-box-shadow-color-top: var(--form-field-box-shadow-color-top, #{mc-trans('blue-grey', '100', 0.15)});
411
432
  --xh-form-field-focused-border-color: var(--form-field-focused-border-color, var(--xh-focus-outline-color));
412
433
  --xh-form-field-focused-box-shadow: var(--form-field-focused-box-shadow, #{inset 0 0 0 1px var(--xh-form-field-focused-border-color), inset 0 1px 1px var(--xh-form-field-focused-border-color)});
413
- --xh-form-field-invalid-border-color: var(--form-field-invalid-border-color, var(--xh-intent-danger));
414
- --xh-form-field-invalid-box-shadow: var(--form-field-invalid-border-color, #{inset 0 0 0 1px var(--xh-form-field-invalid-border-color), inset 0 1px 1px var(--xh-form-field-invalid-border-color)});
434
+
435
+ // Label styling - common to all variants
436
+ --xh-form-field-label-color: var(--form-field-label-color, var(--xh-text-color));
437
+ --xh-form-field-label-font-size: var(--form-field-label-font-size, var(--xh-font-size-px));
438
+ --xh-form-field-label-font-style: var(--form-field-label-font-style, normal);
439
+ --xh-form-field-label-font-weight: var(--form-field-label-font-weight, normal);
440
+ --xh-form-field-label-text-transform: var(--form-field-label-text-transform, none);
441
+
442
+ // Label borders + padding - editable, not inline - the default case.
443
+ --xh-form-field-label-border-bottom: var(--form-field-label-border-bottom, none);
444
+ --xh-form-field-label-margin: var(--form-field-label-margin, 0 0 3px 0);
445
+ --xh-form-field-label-padding: var(--form-field-label-padding, 0);
446
+
447
+ // Label borders + padding - readonly, not inline
448
+ --xh-form-field-readonly-label-border-bottom: var(--form-field-readonly-label-border-bottom, var(--xh-form-field-label-border-bottom));
449
+ --xh-form-field-readonly-label-margin: var(--form-field-readonly-label-margin, var(--xh-form-field-label-margin));
450
+ --xh-form-field-readonly-label-padding: var(--form-field-readonly-label-padding, var(--xh-form-field-label-padding));
451
+
452
+ // Label borders + padding - inline, both editable and readonly
453
+ --xh-form-field-inline-label-border-bottom: var(--form-field-inline-label-border-bottom, var(--xh-form-field-label-border-bottom));
454
+ --xh-form-field-inline-label-margin: var(--form-field-inline-label-margin, 0); // Defaulted to zero for inline
455
+ --xh-form-field-inline-label-padding: var(--form-field-inline-label-padding, var(--xh-form-field-label-padding));
456
+
457
+ // Messages (general info text + validation results)
458
+ --xh-form-field-msg-font-size: var(--form-field-msg-font-size, var(--xh-font-size-small-px));
459
+ --xh-form-field-msg-line-height: var(--form-field-msg-line-height, 1.5em);
460
+ --xh-form-field-msg-margin: var(--form-field-msg-margin, var(--xh-pad-half-px) 0 0 0);
461
+ --xh-form-field-msg-text-transform: var(--form-field-msg-text-transform, none);
462
+
463
+ // Validation colors + borders
464
+ --xh-form-field-info-border: #{(var(--xh-form-field-info-border-width-px) solid var(--xh-form-field-info-border-color))};
465
+ --xh-form-field-info-border-color: var(--form-field-info-border-color, var(--xh-intent-primary-text-color));
466
+ --xh-form-field-info-border-width: var(--form-field-info-border-width, 1);
467
+ --xh-form-field-info-border-width-px: calc(var(--xh-form-field-info-border-width) * 1px);
468
+ --xh-form-field-info-box-shadow: var(--form-field-info-border-color, #{inset 0 0 0 1px var(--xh-form-field-info-border-color), inset 0 1px 1px var(--xh-form-field-info-border-color)});
469
+ --xh-form-field-info-color: var(--form-field-info-color, var(--xh-intent-primary-text-color));
470
+
471
+ --xh-form-field-invalid-border: #{(var(--xh-form-field-invalid-border-width-px) solid var(--xh-form-field-invalid-border-color))};
472
+ --xh-form-field-invalid-border-color: var(--form-field-invalid-border-color, var(--xh-intent-danger-text-color));
415
473
  --xh-form-field-invalid-border-width: var(--form-field-invalid-border-width, 1);
416
474
  --xh-form-field-invalid-border-width-px: calc(var(--xh-form-field-invalid-border-width) * 1px);
417
- --xh-form-field-invalid-border: #{(var(--xh-form-field-invalid-border-width-px) solid var(--xh-form-field-invalid-border-color))};
418
- --xh-form-field-invalid-message-text-color: var(--form-field-invalid-message-text-color, var(--xh-intent-danger));
419
- --xh-form-field-margin-bottom: var(--form-field-margin-bottom, 0);
420
- --xh-form-field-margin-right: var(--form-field-margin-right, 0);
475
+ --xh-form-field-invalid-box-shadow: var(--form-field-invalid-border-color, #{inset 0 0 0 1px var(--xh-form-field-invalid-border-color), inset 0 1px 1px var(--xh-form-field-invalid-border-color)});
476
+ --xh-form-field-invalid-color: var(--form-field-invalid-color, var(--xh-intent-danger-text-color));
477
+
478
+ --xh-form-field-warning-border: #{(var(--xh-form-field-warning-border-width-px) solid var(--xh-form-field-warning-border-color))};
479
+ --xh-form-field-warning-border-color: var(--form-field-warning-border-color, var(--xh-intent-warning-text-color));
480
+ --xh-form-field-warning-border-width: var(--form-field-warning-border-width, 1);
481
+ --xh-form-field-warning-border-width-px: calc(var(--xh-form-field-warning-border-width) * 1px);
482
+ --xh-form-field-warning-box-shadow: var(--form-field-warning-border-color, #{inset 0 0 0 1px var(--xh-form-field-warning-border-color), inset 0 1px 1px var(--xh-form-field-warning-border-color)});
483
+ --xh-form-field-warning-color: var(--form-field-warning-color, var(--xh-intent-warning-text-color));
421
484
 
422
485
  &.xh-dark {
423
486
  --xh-form-field-box-shadow-color-top: var(--form-field-box-shadow-color-top, #{mc-trans('blue-grey', '800', 0.15)});
@@ -557,16 +620,18 @@ body {
557
620
  // Inputs
558
621
  //------------------------
559
622
  --xh-input-bg: var(--input-bg, var(--xh-bg));
560
- --xh-input-disabled-bg: var(--form-field-disabled-bg, rgba(206, 217, 224, 0.5)); // This and below currently matched from Blueprint defaults
561
- --xh-input-disabled-text-color: var(--form-field-disabled-text-color, rgba(92, 112, 128, 0.5));
623
+ --xh-input-disabled-bg: var(--input-disabled-bg, rgba(206, 217, 224, 0.5)); // This and below currently matched from Blueprint defaults
624
+ --xh-input-disabled-text-color: var(--input-disabled-text-color, rgba(92, 112, 128, 0.5));
625
+ --xh-input-font-family: var(--input-font-family, var(--xh-font-family));
626
+ --xh-input-font-feature-settings: var(--input-font-feature-settings, var(--xh-font-feature-settings));
562
627
  --xh-input-text-color: var(--input-text-color, var(--xh-text-color));
563
628
  --xh-input-placeholder-text-color: var(--input-placeholder-color, rgb(175, 183, 191));
564
629
  --xh-input-disabled-checkmark-svg: var(--input-disabled-checkmark-svg, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='rgba(92, 112, 128, 0.5)'/%3e%3c/svg%3e"));
565
630
 
566
631
  &.xh-dark {
567
632
  --xh-input-bg: var(--input-bg, rgba(0, 0, 0, 0.3)); // Allow some blending w/backgrounds - e.g. in dialog.
568
- --xh-input-disabled-bg: var(--form-field-disabled-bg, rgba(57, 75, 89, 0.5)); // This and below currently matched from Blueprint defaults
569
- --xh-input-disabled-text-color: var(--form-field-disabled-text-color, rgba(191, 204, 214, 0.5));
633
+ --xh-input-disabled-bg: var(--input-disabled-bg, rgba(57, 75, 89, 0.5)); // This and below currently matched from Blueprint defaults
634
+ --xh-input-disabled-text-color: var(--input-disabled-text-color, rgba(191, 204, 214, 0.5));
570
635
  --xh-input-disabled-checkmark-svg: var(--input-disabled-checkmark-svg, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='rgba(191, 204, 214, 0.5)'/%3e%3c/svg%3e"));
571
636
  }
572
637