@xh/hoist 80.0.0-SNAPSHOT.1768264663674 → 80.0.0-SNAPSHOT.1768360784265

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 (54) hide show
  1. package/CHANGELOG.md +28 -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/cube/CubeField.d.ts +3 -2
  12. package/build/types/data/impl/RecordValidator.d.ts +9 -10
  13. package/build/types/data/impl/StoreValidator.d.ts +8 -7
  14. package/build/types/data/index.d.ts +2 -0
  15. package/build/types/data/validation/Rule.d.ts +5 -40
  16. package/build/types/data/validation/Types.d.ts +56 -0
  17. package/build/types/data/validation/constraints.d.ts +1 -1
  18. package/build/types/desktop/cmp/appOption/AutoRefreshAppOption.d.ts +3 -3
  19. package/build/types/desktop/cmp/appOption/ThemeAppOption.d.ts +3 -3
  20. package/cmp/form/FormModel.ts +2 -2
  21. package/cmp/form/field/BaseFieldModel.ts +38 -18
  22. package/cmp/form/field/SubformsFieldModel.ts +5 -5
  23. package/cmp/grid/Grid.scss +31 -8
  24. package/cmp/grid/columns/Column.ts +24 -10
  25. package/cmp/input/HoistInput.scss +19 -1
  26. package/cmp/input/HoistInputModel.ts +10 -2
  27. package/data/Field.ts +2 -1
  28. package/data/Store.ts +16 -4
  29. package/data/StoreRecord.ts +11 -0
  30. package/data/cube/CubeField.ts +8 -1
  31. package/data/cube/row/BaseRow.ts +4 -2
  32. package/data/impl/RecordValidator.ts +46 -28
  33. package/data/impl/StoreValidator.ts +22 -9
  34. package/data/index.ts +2 -0
  35. package/data/validation/Rule.ts +12 -52
  36. package/data/validation/Types.ts +81 -0
  37. package/data/validation/constraints.ts +2 -1
  38. package/desktop/appcontainer/OptionsDialog.scss +1 -1
  39. package/desktop/cmp/form/FormField.scss +128 -43
  40. package/desktop/cmp/form/FormField.ts +74 -40
  41. package/desktop/cmp/input/CodeInput.scss +13 -1
  42. package/desktop/cmp/input/RadioInput.scss +16 -4
  43. package/desktop/cmp/input/SwitchInput.scss +23 -5
  44. package/desktop/cmp/input/TextArea.scss +9 -1
  45. package/desktop/cmp/rest/impl/RestForm.scss +1 -1
  46. package/desktop/cmp/viewmanager/ViewManager.scss +7 -15
  47. package/kit/blueprint/styles.scss +4 -4
  48. package/kit/onsen/styles.scss +10 -2
  49. package/mobile/cmp/form/FormField.scss +52 -19
  50. package/mobile/cmp/form/FormField.ts +30 -21
  51. package/package.json +1 -1
  52. package/styles/XH.scss +1 -0
  53. package/styles/vars.scss +70 -12
  54. 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,58 @@ 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 (shared)
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 (with inline variants)
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
+ --xh-form-field-label-inline-border-bottom: var(--form-field-label-inline-border-bottom, none);
447
+ --xh-form-field-label-inline-margin: var(--form-field-label-inline-margin, 0);
448
+ --xh-form-field-label-inline-padding: var(--form-field-label-inline-padding, 0);
449
+
450
+ // Messages (general info text + validation results)
451
+ --xh-form-field-msg-font-size: var(--form-field-msg-font-size, var(--xh-font-size-small-px));
452
+ --xh-form-field-msg-line-height: var(--form-field-msg-line-height, 1.5em);
453
+ --xh-form-field-msg-margin: var(--form-field-msg-margin, var(--xh-pad-half-px) 0 0 0);
454
+ --xh-form-field-msg-text-transform: var(--form-field-msg-text-transform, none);
455
+
456
+ // Validation colors + borders
457
+ --xh-form-field-info-border: #{(var(--xh-form-field-info-border-width-px) solid var(--xh-form-field-info-border-color))};
458
+ --xh-form-field-info-border-color: var(--form-field-info-border-color, var(--xh-intent-primary-text-color));
459
+ --xh-form-field-info-border-width: var(--form-field-info-border-width, 1);
460
+ --xh-form-field-info-border-width-px: calc(var(--xh-form-field-info-border-width) * 1px);
461
+ --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)});
462
+ --xh-form-field-info-color: var(--form-field-info-color, var(--xh-intent-primary-text-color));
463
+
464
+ --xh-form-field-invalid-border: #{(var(--xh-form-field-invalid-border-width-px) solid var(--xh-form-field-invalid-border-color))};
465
+ --xh-form-field-invalid-border-color: var(--form-field-invalid-border-color, var(--xh-intent-danger-text-color));
415
466
  --xh-form-field-invalid-border-width: var(--form-field-invalid-border-width, 1);
416
467
  --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);
468
+ --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)});
469
+ --xh-form-field-invalid-color: var(--form-field-invalid-color, var(--xh-intent-danger-text-color));
470
+
471
+ --xh-form-field-warning-border: #{(var(--xh-form-field-warning-border-width-px) solid var(--xh-form-field-warning-border-color))};
472
+ --xh-form-field-warning-border-color: var(--form-field-warning-border-color, var(--xh-intent-warning-text-color));
473
+ --xh-form-field-warning-border-width: var(--form-field-warning-border-width, 1);
474
+ --xh-form-field-warning-border-width-px: calc(var(--xh-form-field-warning-border-width) * 1px);
475
+ --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)});
476
+ --xh-form-field-warning-color: var(--form-field-warning-color, var(--xh-intent-warning-text-color));
421
477
 
422
478
  &.xh-dark {
423
479
  --xh-form-field-box-shadow-color-top: var(--form-field-box-shadow-color-top, #{mc-trans('blue-grey', '800', 0.15)});
@@ -557,16 +613,18 @@ body {
557
613
  // Inputs
558
614
  //------------------------
559
615
  --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));
616
+ --xh-input-disabled-bg: var(--input-disabled-bg, rgba(206, 217, 224, 0.5)); // This and below currently matched from Blueprint defaults
617
+ --xh-input-disabled-text-color: var(--input-disabled-text-color, rgba(92, 112, 128, 0.5));
618
+ --xh-input-font-family: var(--input-font-family, var(--xh-font-family));
619
+ --xh-input-font-feature-settings: var(--input-font-feature-settings, var(--xh-font-feature-settings));
562
620
  --xh-input-text-color: var(--input-text-color, var(--xh-text-color));
563
621
  --xh-input-placeholder-text-color: var(--input-placeholder-color, rgb(175, 183, 191));
564
622
  --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
623
 
566
624
  &.xh-dark {
567
625
  --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));
626
+ --xh-input-disabled-bg: var(--input-disabled-bg, rgba(57, 75, 89, 0.5)); // This and below currently matched from Blueprint defaults
627
+ --xh-input-disabled-text-color: var(--input-disabled-text-color, rgba(191, 204, 214, 0.5));
570
628
  --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
629
  }
572
630